vue指令入門

1.  vue屬性、事件、內容綁定

 

 1 <div id="dv">
 2     <!-- v-cloak可以解決表達式閃爍問題
 3     （當網速較慢時，會先出現{{msg}}，當請求完畢後纔會將數據替換） -->
 4     <p v-cloak>===={{msg}}====</p>
 5     <p>========={{msg2}}========</p>
 6     <h4 v-text="msg">============</h4>
 7     <!--默認 v-text 沒有閃爍問題-->
 8     <!-- v-text會覆蓋元素中本來內容，
 9          而插件表達式不會覆蓋，可在先後增長想要的元素 -->
10     <div v-text="msg3"></div>
11     <div>{{msg3}}</div>
12     <div v-html="msg3"></div>
13     <!-- v-html可以將數據當成HTML文本顯示，會覆蓋原有內容 -->
14     <!-- v-text與插件表達式只會講數據當成普通文本顯示 -->
15 
16 
17     <!-- v-bind：用於綁定屬性的指令 -->
18     <input type="text" v-bind:value="mytitle">
19     <!-- v-bind能夠簡寫成 : -->
20     <!-- v-bind原理是將被綁定的屬性的值當成js代碼執行，
21          因此能夠在其中寫合法的表達式-->
22     <input type="text" :value="mytitle+'123'" @click = "show">
23 
24     <!-- v-on：事件綁定機制 -->
25     <!-- v-on：縮寫@ -->
26     <input type="button" value="按鈕" v-on:click = "show">
27 </div>
28 
29 
30 <script src="./lib/vue-2.4.0.js"></script>
31 <script>
32     var vm = new Vue({
33         el: '#dv',//el：表明被操做的元素
34         data:{//存儲數據,這裏面的數據名不是固定的
35             msg:'123',
36             msg2:'456',
37             msg3:'<h1>哈哈，你好Vue</h1>',
38             mytitle:'這是我本身定義的title'
39         },
40         methods:{//這個methods屬性定義了當前Vue實例中全部可用的方法
41             show:function () {
42                 alert("hello");
43             }
44         }
45     });
46 </script>

vue/事件、屬性、內容綁定

 

2.  v-on的事件修飾符

 

vue/v-on的事件修飾符

 

 3.  v-model雙向綁定

 1     <div id="dv">
 2         <h4>{{msg}}</h4>
 3         <input type="text" v-bind:value="msg">
 4         <input type="text" v-model="msg">
 5         <!-- v-bind只能實現數據的單向綁定 -->
 6         <!-- v-model可以實現數據的雙向綁定
 7              注意：v-model只能運用在表單元素中-->
 8     </div>
 9     <script src="./lib/vue-2.4.0.js"></script>
10     <script>
11         var vm = new Vue({
12             el: '#dv',
13             data:{
14                 msg:'123',
15             },
16             methods:{
17             }
18         });
19     </script>

vue/v-model雙向綁定

 4.  vue中的樣式

 1 <!-- 注意：這裏的class都須要使用 v-bind 進行數據綁定 -->
 2 <div id="dv">
 3     <!-- 第一種使用方式：直接傳遞一個數組 -->
 4     <h2 v-bind:class="['red','thin']">hello world!</h2>
 5     <!-- 第二種使用方法：可在數組中使用三元表達式 -->
 6     <h2 v-bind:class="['red','thin',flag?'italic':'']">hello world!</h2>
 7     <!-- 第三種使用方法：使用對象代替三元表達式，提升可讀性 -->
 8     <h2 v-bind:class="['red','thin',{'spacing':flag}]">hello world!</h2>
 9     <!-- 第四種：使用對象代替數組 -->
10     <!--<h2 v-bind:class="{red:true,italic:true,spacing:true,thin:true}">hello world!</h2>-->
11     <h2 v-bind:class="obj">hello world!</h2>
12 </div>
13 <script src="./lib/vue-2.4.0.js"></script>
14 <script>
15     var vm = new Vue({
16         el: '#dv',
17         data:{
18             flag:true,
19             obj:{red:true,italic:true,spacing:true,thin:true}
20         },
21         method:{}
22     });
23 </script>
24 
25 
26 
27 <div id="dv2">
28     <!-- 內聯樣式綁定： -->
29     <!-- 第一種：傳入一個對象 -->
30     <h3 :style="{color:'red','font-weight':200}">內聯樣式綁定</h3>
31 
32     <!-- 第二種：將對象提取出來 -->
33     <h3 :style="styleFlag">內聯樣式綁定</h3>
34 
35     <!-- 第三種：經過數組同時傳入多個對象 -->
36     <h3 :style="[styleFlag,styleFlag2]">內聯樣式綁定</h3>
37 </div>
38 <script>
39     var vm2= new Vue({
40         el:'#dv2',
41         data:{
42             styleFlag:{color:'red','font-weight':200},
43             styleFlag2:{color:'#000'}
44         }
45     });
46 </script>

vue中的樣式

5.  v-for循環指令

 1     <div id="dv">
 2         <!-- v-for遍歷數組，item表明數組的每一項（與PHP相似）,i表明每一項的索引 -->
 3         <!--<p v-for="item in arr">{{item}}</p>-->
 4         <p v-for="(item,i) in arr">項：{{item}}----索引：{{i}}</p>
 5         <br>--------------------<br>
 6 
 7         <!-- v-for遍歷 對象數組，有i表明索引與上相同 -->
 8         <p v-for="user in users">user.id：{{user.id}}----user.name：{{user.name}}</p>
 9         <br>--------------------<br>
10         <!-- v-for遍歷對象，出現形式爲 鍵值對 的形式，
11         第一個參數爲值，第二個參數爲鍵，有第三個參數 i 爲索引值 -->
12         <p v-for="(val,key) in obj">值：{{val}}----鍵：{{key}}</p>
13 
14         <!-- v-for迭代數字 -->
15         <p v-for="num in 3"></p>
16     </div>
17 
18     <script src="./lib/vue-2.4.0.js"></script>
19     <script>
20         var vm = new Vue({
21             el:'#dv',
22             data:{
23                 arr:[1,2,3,4],
24                 users:[
25                     {id:1,name:'user1'},
26                     {id:2,name:'user2'},
27                     {id:3,name:'user3'},
28                     {id:4,name:'user4'}
29                 ],
30                 obj:{
31                     id:1,
32                     name:'user',
33                     sex:'男',
34                     age:'22'
35                 }
36             }
37         })
38     </script>

vue/v-for循環

6.  v-if、v-show判斷

 1 <div id="dv">
 2         <input type="button" value="toggle" @click="flag=!flag">
 3         <!-- v-if會重複的建立與刪除元素，v-show只是切換改變display：none樣式 -->
 4         <!-- v-if有較高的切換性能消耗，v-show有較高的初始渲染消耗 -->
 5         
 6         <!-- 若是元素涉及到頻繁的切換，最好不要使用 v-if -->
 7         <!-- 若是元素可能永遠也不會被顯示出來，則不要使用v-show -->
 8         <h3 v-if="flag">這是一個v-if控制的元素</h3>
 9         <h3 v-show="flag">這是一個v-show控制的元素</h3>
10     </div>
11     <script src="./lib/vue-2.4.0.js"></script>
12     <script>
13         var vm = new Vue({
14             el:'#dv',
15             data:{
16                 flag:false
17             }
18         });
19     </script>

vue/v-if、v-show