Vue筆記(一)

時間 2019-11-16

標籤 vue 筆記简体版

原文原文鏈接

指令：html

　　一、v-if 指令用於標籤的屬性，綁定數據，當數據爲true時，顯示該標籤，當屬性爲false時，移除該標籤。vue

　　二、v-bind 指令用於屬性響應綁定數據，數據改變此綁定的屬性也改變，例如：<a v-bind:href="url">連接</a>，數據url改變，則a的href屬性值也改變。緩存

　　三、v-on 指令用於監聽dom事件，如click、mouseover、mouseout等事件，例如：<button v-on:click="doSomething">點擊</button>，事件click，函數doSomething。dom

　　四、函數

計算緩存：this

　　一、計算屬性是基於依賴緩存的，只有在相關的依賴發生改變時纔會從新取值，就是說只有他依賴的這個新建vue對象的數據改變了，他纔會從新取值計算，只要依賴的數據沒有改變，他只會返回以前的計算結果。url

　　二、計算屬性computed與methods比較，methods是無需依賴改變，便可調用的方法。若是不但願用緩存時，它能夠代替計算屬性spa

　　三、計算屬性computed與watch比較，watch會監聽vue實例的某個數據變化，當監聽的數據發生改變的時候，會調用此函數htm

　　4　、對象

<!doctype html><html><head>    <meta charset="utf-8">    <title>vue</title>    <script src="https://unpkg.com/vue/dist/vue.js"></script></head><body>    <div class="contanier">        <p>無依賴數據的computed：{{now}}</p>        <p>有依賴數據的computed：{{computedFun}}</p>        <p  v-if="message"><span>{{message}}</span></p>        <p><input type="text" v-model="messageTest"></p>        <p><input type="button" value="輸出" v-on:click="methodsFun" ></p>        <p><span></span></p>    </div>    <script>       var vm = new Vue({           el:".contanier",           data:{               message:false,               messageTest:""           },           computed:{               now: function () {//沒有依賴數據，不執行，是計算緩存                   return Date.now();               },               computedFun:function(){//有依賴數據this.messageTest，執行                   return this.messageTest;               }           },           watch:{               messageTest:function(val){//當messageTest數據發生改變時調用                   this.message="等待輸出中...";               }           },           methods:{//vue實例定義的方法               methodsFun:function(){                   this.message=this.messageTest;               }           }       });    </script></body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。