3.1.v-on 绑定事件 可以简写为@ ,按键修饰符 v-on:keyup = @keyup
事件修饰符：v-on提供了事件修饰符 修饰符是由点开头的指令后缀来表示的
1.`.stop` 阻止事件冒泡到父级
2.`.prevent` 阻止默认事件发生
3.`.capture` 组织事件捕获模式
4.`.self` 只有元素自身出发事件才执行（冒泡。捕获都不执行）
5.`.once` 只执行一次
按键修饰符: @click.ctrl 代表的是 单击+ctrl键 组合键（别的同理，在.后面新增就行）
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <script src="../node_modules/vue/dist/vue.js"></script> 12 <div id="app"> 13 <!--v-on @可以字节操坐js片段--> 14 <button v-on:click="num++">点赞</button> 15 <button v-on:click="num--">取消</button> 16 <h1>有{{num}}个赞</h1> 17 18 19 <div style="border: 1px solid red;padding:20px" v-on:click="hello"> 20 大div 21 <div style="border: 1px solid blue;padding:20px" @click.stop="hello"> 22 小div<br/> 23 <a href="http://baidu.com" @click.prevent.stop="hello">去百度</a> <!--阻止默认事件发生 不会进去链接内容--> 24 </div> 25 </div> 26 27 28 <!--按键修饰符 @click.ctrl 单击+ctrl键--> 29 <input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num+=10"> 30 31 </div> 32 33 <script> 34 //v-on 绑定事件 可以简写为@ 35 //1.按键修饰符 v-on:keyup 36 let vm = new Vue({ 37 el:"#app", 38 data:{ 39 num:1 40 }, 41 methods: { 42 hello(){ 43 alert("点击了"); 44 } 45 }, 46 }) 47 48 49 /*事件修饰符：v-on提供了事件修饰符 修饰符是由点开头的指令后缀来表示的 50 1.`.stop` 阻止事件冒泡到父级 51 2.`.prevent` 阻止默认事件发生 52 3.`.capture` 组织事件捕获模式 53 4.`.self` 只有元素自身出发事件才执行（冒泡。捕获都不执行） 54 5.`.once` 只执行一次 55 */ 56 57 //按键修饰符 58 59 </script> 60 </body> 61 62 </html>
3.2.v-for:
1. 几种遍历方式
显示user信息 v-for="item in items"
2.获取数组下标：v-for="(item.index) in items
3.遍历对象：v-for="value in object"
v-for="（value.key in object)"
v-for="value in object"
遍历的时候加上：key来区分不同数据 提高vue渲染效率
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <!-- 10 1. 显示user信息 v-for="item in items" 11 2.获取数组下标：v-for="(item.index) in items 12 3.遍历对象：v-for="value in object" 13 v-for="（value.key in object" 14 v-for="value in object" 15 16 17 --> 18 19 <div id="app"> 20 <ul> 21 <li v-for="(user,index) in users" :key="user.name" v-if="user.age>24"> 22 当前索引{{index}} ==> {{user.name}} ==> {{user.gender}} ==> {{user.age}} 23 24 对象信息： 25 <span v-for="(v,k,i) in user">{{v}}=={{v}}=={{i}};</span> 26 <!--4.便利的时候加上：key来区分不同数据 提高vue渲染效率--> 27 </li> 28 </ul> 29 30 <ul> <!--在这里使用:key="index" 来区分不同的zhi --> 31 <li v-for="(num,index) in nums" :key="index">{{num}}</li> 32 </ul> 33 </div> 34 <script src="../node_modules/vue/dist/vue.js"></script> 35 <script> 36 let app = new Vue({ 37 el:"#app", 38 data:{ //不能写成date了！！！！！！ 39 users:[{name:'柳岩1',gender:'女1',age:21}, 40 {name:'柳岩2',gender:'女2',age:22}, 41 {name:'柳岩3',gender:'女3',age:23}, 42 {name:'柳岩4',gender:'女4',age:24}, 43 {name:'柳岩5',gender:'女5',age:25}], 44 nums:[1,2,3,4,4] 45 } 46 }) 47 </script> 48 </body> 49 </html>
注：data:{ //不能写成date了！！！！！！