VUE的基礎語法(二)


數據綁定最常見的形式就是使用 “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   只渲染元素和組件一次。隨后的重新渲染元素/組件及其所有的子節點將被視為靜態內容並跳過。可以優化更新性能。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM