<div id="root">
<!--事件绑定-->
<div v-on:click="clicks">{{title}}</div>
<!--此句与上句相同,没差。v-on:click="clicks"简写为@click="clicks"-->
<div @click="clicks">{{title}}</div>
<!--属性绑定-->
<!--此处显示效果如上图所示-->
<div title="hello!">{{title}}</div>
<!--注意如果直接把title的属性值写成title,则此处的title将会被识别成字符串而不是Vue实例中的title。-->
<div title="title">{{title}}</div>
<!--那如果我想要它识别的是Vue实例中的title该怎么办呢?此时我们就会用到属性绑定 v-bind: 指令-->
<div v-bind:title="title">{{title}}</div>
<!--注意v-bind: 指令还可以简写成: 即v-bind:title=""简写为:title=""-->
<div :title="title">{{title}}</div>
<!--双向绑定-->
<!--此处效果如上b1,但此时只是input的值与div的值是一样的,但是无论input的值如何改变,div的值都不会变化,如果想让他们变化的话该怎么办呢?-->
<input type="text" :value="msg"/>
<div>{{msg}}</div>
<!--那如何让div的内容随着input的值的变化而变化呢?此时就要用到一个新的指令
v-model ,效果如b2-->
<input type="text" v-model="msg"/>
<div>{{msg}}</div>
</div>
<script>
// 创建一个实例
new Vue({
el:"#root",
data:{
title:"小丸子君",
msg:"厉害了!大佬!"
},
methods: {
clicks: function() {
this.title = "楚洁自话啊哈哈哈~~~~"
}
}
});
</script>