vue指令与事件修饰符
一.条件渲染指令
vue中提供了两个指令可以用于判断是否要显示元素，分别是v-if和v-show。
实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <p v-if='is_login==true'>欢迎登陆</p> <p v-else><a href="">登录</a><a href="">注册</a></p> <!-- v-else不能单独使用,只能跟着v-if或者跟着v-else-if后面,表示或者的意思 v-else会使用上一个v-if作为条件判断,并且v-else和v-if必须紧密相连 --> <!-- 一次只会出现一个结果 v-else-if可以有多个,但是和v-else一样,必须紧跟这v-if后面,不能单独使用 --> <p v-if='num%3==0'>这个数可以被3整除</p> <p v-else-if='num%5==0'>这个数可以被5整除</p> <p v-else-if='num%7==0'>这个数可以被7 整除</p> <p v-else>这个数比较特别</p> <!-- v-show只能单独使用,后面无法跟v-else --> <p v-show="num>10">num大于10</p> <p v-show="num<=10">num小于等于10</p> </div> <script> let vm=new Vue({ el:'#app', data:{ is_login:false, num:5 }, }) </script> </body> </html>
总结:
1. v-if 的特点：每次都会重新删除或创建元素
2. v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式
3. v-if 有较高的切换性能消耗
4. v-show 有较高的初始渲染消耗
5. 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
6. 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if
7. v-if后面可以跟else,v-show后面不能跟else
二.列表渲染指令(v-for)
1.在vue中，可以通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象(python中的字典)。
实例一:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <p v-for="(item, i) in list">索引值：{{i}} --- 每一项：{{item}}</p> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { list: [1, 2, 3, 4, 5, 6] }, methods: {} }); </script> </body> </html>
实例二:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { list: [ { id: 1, name: 'zs1' }, { id: 2, name: 'zs2' }, { id: 3, name: 'zs3' }, { id: 4, name: 'zs4' } ] }, methods: {} }); </script> </body> </html>
实例三:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <!-- 注意：在遍历对象身上的键值对的时候， 除了 有 val key ,在第三个位置还有 一个 索引 --> <p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { user: { id: 1, name: '托尼·屎大颗', gender: '男' } }, methods: {} }); </script> </body> </html>
实例四:循环数字从1开始,是一个闭区间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <!-- in 后面我们放过 普通数组，对象数组，对象， 还可以放数字 --> <!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始,还是一个闭区间 --> <p v-for="count in 10">这是第 {{ count }} 次循环</p> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {} }); </script> </body> </html>
实例五:v-forkey的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <div> <label>Id: <input type="text" v-model="id"> </label> <label>Name: <input type="text" v-model="name"> </label> <input type="button" value="添加" @click="add"> </div> <!-- 注意： v-for 循环的时候，key 属性只能使用 number获取string --> <!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 --> <!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 --> <p v-for="item in list" :key="item.id"> <input type="checkbox">{{item.id}} --- {{item.name}} </p> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { id: '', name: '', list: [ { id: 1, name: '李斯' }, { id: 2, name: '嬴政' }, { id: 3, name: '赵高' }, { id: 4, name: '韩非' }, { id: 5, name: '荀子' } ] }, methods: { add() { // 添加方法 this.list.unshift({ id: this.id, name: this.name }) } } }); </script> </body> </html>
三.事件修饰符
.stop阻止事件冒泡
.prevent阻止自身事件
.self只有自身事件才会触发
.capture:捕获事件
实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="js/vue.js"></script> <style> .inner{ background: blue; height: 150px; } .outer{ background:yellow; padding:40px; } </style> </head> <body> <div id='app'> <!-- 使用了.stop 阻止冒泡--外层的事件不会被触发--> <!-- <div class='inner' @click='innerHandle'> <input type="button" value='抽我' @click.stop='btnHandle'> </div> --> <!-- 使用了.prevent 阻止默认行为,连接就不会跳转 --> <!-- <a href="http://www.baidu.com" @click.prevent='link'>连接事件</a> --> <!-- 使用了.capture 实现捕获触发事件机制,从外到里执行,注意看这个修饰方法是法作用在外层的--> <!-- <div class='inner' @click.capture='innerHandle'> <input type="button" value='抽我' @click='btnHandle'> </div> --> <!-- .self自由是自身点击才会执行,冒泡或者捕获到的都不会执行 --> <!-- <div class='inner' @click.self='innerHandle'> <input type="button" value='抽我' @click='btnHandle'> </div> --> <!--只阻止一次,preven和once的位置没有关系 --> <!-- <a href="http://www.baidu.com" @click.prevent.once='link'>连接事件</a> --> <!-- .stop和.self的区别 --> <!-- .self自会阻止自身点击事件,并不会阻止冒泡行为,中间层被self拦截,外层的冒泡行为继续 --> <!-- stop除了自身,所有的冒泡行为继续 --> <div class="outer" @click='outer'> <div class='inner' @click.self='innerHandle'> <input type="button" value='抽我' @click='btnHandle'> </div> </div> </div> <script> let vm=new Vue({ el:'#app', data:{ }, methods: { btnHandle:function() { console.log('操你大爷') }, innerHandle:function(){ console.log('inner') }, link:function(){ console.log('触发了连接事件') }, outer:function(){ console.log('outer') } }, }) </script> </body> </html>
