小白初學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>

---