总结:v-bind,v-if,v-for,v-on,{{}},v-model
①v-bind绑定数据:标签属性v-bind:title='xxx',简写:title='xxx', 标签内容{{xxx}}
<span :title='message'>{{message}}</span>
②v-on绑定事件:<span v-on:click='clickMe'>点我</span> 或简写 <span @click='clickMe'>点我</span>
③显示和隐藏:<span v-if='xxx'>显示和隐藏</span> ,注,xxx可以为表达式或者是Boolean后为true或false的其他值
v-if='undefined == null',v-if='-1'都为true。 v-if='null',v-if='undefined',v-if='0'都为false
④v-if遍历:<span v-for='item in array'>{{item}}</span> 或 <span v-for='(item,index) in array'>{{index}}</span>
⑤v-model数据双向绑定:<input v-model='message'></input><p>{{message}}</p>
⑥创建vue实例语法
引入vue库
let app = new Vue({
el: '#id',
data: {
message: '你还好吗?'
},
methods: {
//this指app实例,可通过控制台app.message = '好久不见', 直接修改页面内容
clickMe:function(e){
this.message = this.message.split('').reverse().join('')
}
}
})
https://www.cnblogs.com/chosen-chen/p/11245529.html