vue指令入门

Posted 2022-01-03 smile-w

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