vuejs基礎-常見指令
- 2019 年 10 月 10 日
- 筆記
一、
v-cloak 解決插值表達式閃爍問題 ，只會替換自己位元組佔位符
v-text 默認沒有閃爍問題，替換元素中原本內容
v-html 將內容裡面的標籤
<style> [v-cloak]{ display: none; } </style> </head> <body> <div id="app"> <p v-cloak>**不被替換**{{ msg }}</p> <h1 v-text="msg">***被替換*</h1> <div v-html="msg2">被替換</div> </div> <script type="text/javascript" src="vue.js" ></script> <script> var vm = new Vue({ el : "#app", data : { msg : "123", msg2 : "<h1>這是一個標籤</h1>" } }) </script>
v-bind 要綁定的屬性，寫合法的表達式
<input type="button" value="提交" title="mytitle" /> <input type="button" value="提交" v-bind:title="mytitle+'123'" /> <input type="button" value="提交" :title="mytitle" />
v-on 事件綁定機制
<input type="button" value="按鈕" v-on:click="show" /> <input type="button" value="按鈕" v-on:mouseover="show" />
var vm = new Vue({ el : "#app", data : { msg : "123", msg2 : "<h1>這是一個標籤</h1>", mytitle:"這是一個title" }, methods:{ show:function () { alert("hello"); } } }) </script>
在VM實例中，如果想要獲取data上的數據，或者想要掉哦用methods中的方法，必須通過this.數據屬性名或者this.方法名來進行訪問，這裡的this，就是表示我們new出來的實例
Vue實例，會監聽自己身上data中所有數據的改變，只要數據一發生變化，就會自動把最新的數據，從data上同步到頁面中去；好處：程式設計師只需關心數據，不需要考慮如何重新渲染DOM頁面。
v-bind 只能實習數據的單向綁定，從M自動綁定到V,無法實現數據的雙向綁定
v-model
v-model指令，可以是實現表單元素和model中數據的雙向數據綁定
注意 v-model 只能運用在表單元素中
input(radio, text , address, email …)select checkbox textarea
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.min.js" ></script> </head> <body> <div id="app"> <div v-text="msg"></div> <input type="text" v-model="msg"/> </div> </body> <script> var vw = new Vue({ el:"#app", data:{ msg:"v-model效果展示！" } }); </script> </html>
