首页 > 代码库 > Vue学习笔记（一）
Vue学习笔记（一）
一. 数据绑定
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(‘‘); } }})
Vue学习笔记（一）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。