Vue的簡單使用（3）v-model、methods、computed、watch

1.雙向數據綁定

2.計算屬性與監聽

理解：

1.在vue中有單向數據流（v-bind）和雙向數據流（v-model）

1.1

v-bind和input配合也可以實現雙向數據流，

v-bind爲單向的數據流，如輸入框的改變不會使得下面p中的value改變；

當我們屬性改變的話，他並不會改變數據；

我們通過v-on事件來改變數據；

<template>
    <div id="app">
      <input type="text" ：value="value" @input="input">
      <p>{{value}}</p>
    </div>
</template>
<script>
export default {
    name:'app',
    data(){
        return{
          value:"zengcy"
        }
    },
    methods:{
     input:function(e){
       this.value=e.target.value;
     }
    
   }
}
</script>
<style scoped>
</style>

1.2.雙向數據綁定：v-model

初始化value的值；

改變value的值；

<template>
    <div id="app">
      <input type="text" v-model="value">
      <p>{{value}}</p>
    </div>
</template>
<script>
export default {
    name:'app',
    data(){
        return{
          count:0,
          count2:0,
          value:"zengcy"
        }
    }
}
</script>
<style scoped>
</style>

2.methods與computed的區別：

2.1.寫法上的區別：

methods：<p>result()</p>，computed：不用加括號<p>result</p>

2.2.渲染的區別：

methods執行函數的時候，會渲染它裏面所有的方法，不管這個方法有沒有用到data裏面的屬性count或者count2，以保證數據爲最新。如果函數去渲染數據，當任意的一個dom發生變化了，函數都會重新執行；當一個操作需要我們去操作任意的dom的話，我們就可以使用函數這種形式；

computed執行函數的時候，只會渲染用到data裏面的屬性如包含count這個數據的函數，省略了多餘的操作。計算屬性一般都是用來監聽數據的，當一個數據發生變化，我們就會執行一個相應的操作；

3.第二種方式去監聽數據：watch，第一種監聽數據是computed

與前面兩種寫法不同，watch監聽data裏面的屬性變化，當count值發生改變時，觸發函數

<template>
    <div id="app">
      
      <p>{{output}}</p>
    </div>
</template>
<script>
export default {
    name:'app',
    data(){
        return{
          count:0,
          count2:0,
          output:""
        }
    },
    watch:{
     count:function(val){
       this.output=val>5?"大於5"："小於5";
     }
   }
}
</script>
<style scoped>
</style>

4.watch和computed有什麼區別：

4.1.computed有返回值，watch不需要返回值

4.2.computed是同步代碼，watch裏面可以寫異步代碼