Vue入门初体验

Vue可以说是现在最火的MVVM前端UI框架了吧,整体性能优于React,比Angular也更轻量,具体可参考官网对比其他框架
官方文档: https://cn.vuejs.org/v2/api/

Hello World


首先我们开始从学每门语言的hello world入门Vue
html代码,同angular一样,采用双大括号的形式实现数据绑定:

1
2
3
<div id="app">
{{ message }}
</div>

js代码,通过el获取到html的节点,向节点中插入data里的message的值:

1
2
3
4
5
6
var app = new Vue({
el: '#app',
data: {
message: 'Hello VueJs'
}
})

运行结果:

1
Hello VueJs

注:el指明了创建的Vue实例对象的作用域,data则是用于存储Vue实例的数据对象

双向数据绑定


双向数据绑定就是用表单控件的v-model指令实现通过表单里的内容改变,来让data里的数据改变,最后更新到页面上

1
2
<input v-model="msg">
<p>{{ msg }}</p>

渲染列表


v-for指令根据一组数组的选项列表进行渲染,这个很像js里的for in循环,in前面是自己定义的局部变量,in后面是要遍历的数组

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul id="list">
<li v-for="item in items">
{{item}}
</li>
</ul>
<script>
var vm = new Vue({
el:"#list",
data:{
items:["a","b","c"]
}
})
</script>

事件监听


使用v-on指令监控对应的事件,比如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
<p>{{msg}}</p>
<button v-on:click="reverse">clickMe</button>
<button @click="reverse">clickMe</button> //简写形式
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg:"hello world"
},
methods: {
reverse: function() {
this.msg = this.msg.split("").reverse().join("")
}
}
})
</script>

当点击按钮时,data里的msg的字符串就会反转,再点击之后就会重新变回来
注:methods里的方法可通过创建的Vue实例对象调用

TodoList


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div id="app">
<input v-model="newTodo" v-on:keyup.enter="addTodo">
<ul>
<li v-for="item,index in lists">
<input type="checkbox" :checked="item.state">
<span>{{ item.text }}</span>
<button v-on:click="removeTodo(index)">X</button>
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
newTodo: "",
lists: []
},
methods: {
addTodo: function() {
var todo = this.newTodo.trim();
if (todo) {
this.lists.push({
text: todo,
state: false
});
this.newTodo = "";
}
},
removeTodo: function(index) {
this.lists.splice(index, 1)
}
}
})
</script>

html代码中用到了v-on:keyup.enter,这句代码意思是监听回车按钮敲击事件,如果敲击回车则执行后面的方法,下面的index是取得当前项的索引值传递到removeTodo方法中清除指定的项目
addTodo方法是将输入框输入的内容两边去掉空格,然后判断是否为空,如果不为空将这个字符串放到list数组里,并且清空输入框

如果您觉得我的文章对您有用,请随意打赏。

您的支持将鼓励我继续创作!

¥ 打赏支持

文章导航

目录

×
  1. 1. Hello World
  2. 2. 双向数据绑定
  3. 3. 渲染列表
  4. 4. 事件监听
  5. 5. TodoList