标签:
一. 数据绑定
1,hello world(new Vue())
<div id="app"> {{message}} </div>
new Vue({ el : ‘#app‘, data : { message : ‘hello world!‘ } })
2,双向绑定(v-model)
<!--v-model指令--> <div id="app"> <p>{{message}}</p> <input v-model="message"> </div>
3,渲染(v-for)
<div id="app"> <ul> <!-- v-for指令中,遍历数据 --> <li v-for="todo in todos"> {{todo.text}} </li> </ul> </div>
new Vue({ el : ‘#app‘, data : { todos : [ { text : ‘Learn javascript‘}, { text : ‘Learn Vue.js‘} ] } })
4,方法处理(v-on)
<!-- v-on处理事件 --> <p>{{message}}</p> <button v-on:click="reverseMessage">点击</button>
new Vue({ el : ‘#app‘, data : { message : "hello world", todos : [ { text : ‘Learn javascript‘}, { text : ‘Learn Vue.js‘} ] }, methods :{ reverseMessage : function(){ this.message = this.message.split(‘‘).reverse().join(‘‘); } } })
标签:
原文地址:http://www.cnblogs.com/zhaoliner/p/5856825.html