小白初学Vue之绑定事件，属性绑定、双向绑定、v-if自学第二篇~

事件绑定:v-on:

属性绑定 v-bind:

双向绑定:v-model 实现数据的双向绑定

 

效果如下：

a.属性绑定

b.双向数据绑定

b1.b2.

 

<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>

---