Vue
可以说是现在最火的MVVM
前端UI框架了吧,整体性能优于React
,比Angular
也更轻量,具体可参考官网对比其他框架
官方文档: https://cn.vuejs.org/v2/api/
Hello World
首先我们开始从学每门语言的hello world
入门Vue
吧html
代码,同angular
一样,采用双大括号的形式实现数据绑定:
<div id="app">
{{ message }}
</div>
js
代码,通过el
获取到html
的节点,向节点中插入data
里的message
的值:
var app = new Vue({
el: '#app',
data: {
message: 'Hello VueJs'
}
})
运行结果:
Hello VueJs
注:el
指明了创建的Vue
实例对象的作用域,data
则是用于存储Vue
实例的数据对象
双向数据绑定
双向数据绑定就是用表单控件的v-model
指令实现通过表单里的内容改变,来让data
里的数据改变,最后更新到页面上
<input v-model="msg">
<p>{{ msg }}</p>
渲染列表
v-for
指令根据一组数组的选项列表进行渲染,这个很像js
里的for in
循环,in
前面是自己定义的局部变量,in
后面是要遍历的数组
<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
指令监控对应的事件,比如:
<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
<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
数组里,并且清空输入框
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。