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