Vue学习笔记
Posted 赵林
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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学习笔记的主要内容,如果未能解决你的问题,请参考以下文章
[原创]java WEB学习笔记61:Struts2学习之路--通用标签 property,uri,param,set,push,if-else,itertor,sort,date,a标签等(代码片段