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>
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>
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>
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>
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>
