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

 

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

注：data:{     //不能写成date了！！！！！！

posted @ 2020-06-23 16:12  我是王哈哈w  阅读(319)  评论(0)  编辑  收藏  举报