vue指令

v-bind

属性绑定

<标签名 v-bind:属性名=“属性值” /> <标签名 :属性名=“属性值” />

v-html/v-text

<标签名 v-html=“数据变量” /> <标签名 v-text=“数据变量” />

v-on

给标签绑定事件

语法

• v-on:事件名=“要执行的少量的代码”
• v-on:事件名=“methods中的函数”
• v-on:事件名=“methods中的函数(实参)”

简写 @事件名=“methods中的函数(实参)”

v-on事件对象

vue处理函数中，拿到事件对象

语法:

• 无传参: 通过形参直接接收
• 传参: 通过$event指定事件对象传给事件处理函数

    

      阻止百度
      

      阻止跳转到百度
    
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

v-on修饰符

在事件后面.修饰符名,给事件带来更强大的功能

修饰符是由点开头的指令后缀来表示的

语法：

• @事件名.修饰符 =“methods函数”
  • .stop 阻止事件冒泡
  • .prevent 阻止默认行为
  • .once 程序运行期间，只触发一次事件处理函数
  • .self 只当在 event.target 是当前元素自身时触发处理函数

 
    
  
  
    

      

        stop阻止事件冒泡
        prevent阻止默认行为
        once触发一次
      

      
      

        stop阻止事件冒泡
        prevent阻止默认行为
        once触发一次
      
    
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

v-on按键修饰符

给键盘事件添加修饰符

语法

• @keyup.enter 监听回车按键
• @keyup.esc 监听返回按键

    

      
      

      
    
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

v-model

主要用于表单元素,把value属性和vue数据变量，双向绑定到一起

语法:

v-model=“vue数据变量”

• 双向数据绑定(vue内部采用MVVM设计模式)
  • 数据变化–>视图自动同步
  • 视图变化–>数据自动同步

    

      
      

        用户名
        
      
      

        密码
        
      
      

         来自于
        
        
          北京
          南京
          天津
        
      

      

        性别
        男
        女
      

      
      

        爱好
        抽烟
        喝酒
        打游戏
      

      

        全选
        
      

      

        自我评价
        
      

      

      
{{username}}
      
{{pass}}
      
{{city}}
      
{{gender}}
      
{{hobby}}
      
{{checkall}}
      
{{content}}
    
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

v-model修饰符

让v-model拥有更强大的功能

语法:

• v-model.修饰符=“vue数据变量”

  • .number 以parseFloat转成数字类型
  • .trim 去除首尾空白字符
  • .lazy change时触发而非input

 
    

      

        年龄
        
      

      

        人生格言
        
      

      

        自我介绍
        
      
      {{content}}
    
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

v-show和v-if

控制标签的显示隐藏

语法:

• v-show=“vue变量”
• v-if=“vue变量”

原理:

• v-show用的是display:none控制标签的显示隐藏 （频繁切换）

• v-if 用的是插入和删除节点来控制标签的显示隐藏

• v-else

    

      
v-show的盒子
      
v-if的盒子

      

        
        
我成年了
        
未成年
      
    
  
  


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

v-for

列表渲染，所在标签结构，按照数据数量 循环生成

语法：

• v-for=“(值,索引) in 目标结构”

• v-for=“值 in 目标结构”

目标结构

• 可以遍历数组/对象/数字/字符串

    

      

        
{{index}} ---{{item}}
      
      

      

        

          {{obj.name}}---{{obj.sex}}---{{obj.hobby}}
        
      
      

      
{{key}}---{{value}}
    
  
  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44