vue学习一（指令3.v-on,v-for）

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