1.声明式渲染
vue.js核心是允许你采用简洁的模板语法来声明式的将数据渲染进DOM系统。通过{{}}绑定DOM内容和vue实例的某属性内容,通过v-bind指令绑定元素的某个属性和vue实例的某个属性。
2.条件与循环
控制一个元素显示或者隐藏,只需要给元素添加v-if="seen",在vue实例里的data属性的seen属性值为true或者false。
v-for
指令可以绑定数据到数组来渲染一个列表:
<--html-->
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<--js-->
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{
text: 'Learn JavaScript' },
{
text: 'Learn Vue' },
{
text: 'Build something awesome' }
]
}
})
3.处理用户输入
用
v-on
指令绑定一个监听事件用于调用我们 Vue 实例中定义的方法。
<--html-->
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<--js-->
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
用v-model
指令,在表单输入和应用状态中做双向数据绑定。
4.用组件构建
在vue里一个组件实际上是一个拥有预定义选项的vue实例。
Vue.component(
'todo-item', {//定义一个组件
template: '<li>This is a todo</li>'
})
<ol><!--写入组件,但是每一个todo会渲染一样的文本-->
<todo-item></todo-item>
</ol>
Vue.component(
'todo-item', {//重新定义组件,使它接受一个props字段
props: [
'todo'],
template: '<li>{{ todo.text }}</li>'
})
<div id="app-7"><!--用
v-bind
指令将 todo 传到每一个重复的组件中:-->
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>