數據綁定最常見的形式就是使用 “Mustache” 語法(雙大括號)的文本插值:
例如{{name}},如果只想插入一次就用<span v-once>{{name}}</span>;\
每個通過vue綁定的屬性都是返回json,所以這里面可以寫表達式,但是不能寫語句。
一.VUE指令
1.v-text 更新元素的textcontent
<span v-text="msg"></span>
<!-- 和下面的一樣 -->
<span>{{msg}}</span>
2.v-html 更新元素的innerhtml。(內容按普通html插入,不會作為Vue模板進行編譯,只在可信內容上使用,永不用在用戶提交的內容上)
<div v-html="html"></div>
3.v-show 值為布爾值true或false,來切換元素的display值
4.v-if v-if與v-show的區別在於v-if的元素及數據綁定/組件被銷毀並重建,而v-show只是改變display值,v-else以及v-else-if同上
5.v-for 基於源數據多次渲染元素或模板塊,必須使用特定語法alias in expression,為當前遍歷的元素提供別名。
<div id="app">
<div v-for="(item,index) in list">{{item.name}}--{{index}}</div>
<--這里面item代表源數據里面的每個數據,這里支持第二個參數為當前項的索引,這里也可以用of來替代in in是代表遍歷屬性,of表示遍歷值-->
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({ el:"#app", data:{ list:[ {name:"bgg"}, {name:"xiongmao"} ] } }) </script>
6.v-on 綁定監聽事件,事件類型由參數指定,用在普通元素上面只能監聽原生DOM事件,用在自定義組件上面可以監聽子組件觸發的自定義事件,在監聽原生Dom事件時,方法以事件為唯一的參數,如果使用內聯語句,只可以訪問一個$event屬性v-on:click="handle('ok', $event)" ------------重點--------------
-------------------修飾符--------------------------------
.stop 調用event.stoppropagation()事件
.prevent 阻止默認事件,調用event.preventdefault();
.capture 添加偵聽事件的時候使用capture模式
.self 只當事件是從偵聽器綁定的元素本身觸發時才回調
.{keyCode |keyalias} 只當事件是從偵聽器綁定的元素本身觸發時才回調
.native 監聽組件根元素的原生事件
7. v-bind 我們主要是使用v-bind來綁定標簽的屬性。
<div :style="{color:'red',fontSize:'100px'}">123</div>
注意style里面是一個json對象,所以一定要加花括號
<div id="app-1" v-bind:style="[bgg,name]"> {{some}} <div :style="{color:isred}">123</div>
<p :style="{color:'red'}">這是一個p標簽</p>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app1=new Vue({ el:"#app-1",//注意Vue注冊要寫在前面,實例化要寫在后面,要不會報錯
data:{ some:"這是一個div", bgg:{ fontSize:"100px", color:"red" }, name:{ fontSize:"20px" }, isred:'blue' //這里是字符串拼接的方式,所以一定要注意單引號跟雙引號的區別 } }) </script>
8.v-model 屬於表單的雙向綁定,主要用在input,select,textarea,components上面
1. .lazy取代input的監聽change事件
2. .number將字符串轉化為數字
3. .trim輸入首尾空格過濾
9.v-pre 跳過這個元素和它的子元素的編譯過程。可以用來現實原始的Mustache標簽,跳過大量的沒有指令的節點會加快編譯
<span v-pre>{{ this will not be compiled }}</span>
10.v-cloak 這個指令保持在元素上直到關聯實例結束編譯。如果和css規則一起使用,這個指令可以隱藏未編譯的Mustache標簽直到實例准備完畢。可以用來調試
<div v-cloak> {{ message }} </div> [v-cloak] { display: none; }
11.v-once 只渲染元素和組件一次。隨后的重新渲染元素/組件及其所有的子節點將被視為靜態內容並跳過。可以優化更新性能。