Vue模板语法

一，插值

分析：

    1 文本

              {{msg}}

     2 html

              使用v-html指令用于输出html代码          

     3 属性

              HTML属性中的值应使用v-bind指令

      4 表达式

              Vue提供了完全的JavaScript表达式支持

              {{str.substr(0,6).toUpperCase()}}

              {{ number + 1 }}

              {{ ok ? 'YES' : 'NO' }}

              
我的Id是js动态生成的

    5 class绑定`在这里插入代码片`

               使用方式：v-bind:class="expression"

 

    6 style绑定

              v-bind:style="expression"

              expression的类型：字符串、数组、对象
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

代码演示

	
		
		
		
		 
	
	
		
		

			
文本
			
{{msg}}
			
			
html串
			

			
			
Vue中的属性
			
			
			
			
			
			
			
表达式
			{{str.substring(0,4).toUpperCase()}}

			熊二：{{number+1}}

			{{ok?'yes' : 'on'}}
			书籍信息
			
			
class绑定
			文本内容
			
			
style绑定
			文本内容
		
	
	

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

二，指令

解析：

     指的是带有“v-”前缀的特殊属性

             v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素

    他们只能是兄弟元素

            v-else-if：上一个兄弟元素必须是v-if

            v-else：上一个兄弟元素必须是v-if或者是v-else-if

      v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"

      v-for：类似JS的遍历，

     遍历数组: v-for="item in items", items是数组，item为数组中的数组元素

     遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

      v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

v-for/v-model一起绑定[多选]复选框和单选框

代码演示

	
		
		
 
		
	
	
		
		

			
v-if
			请输入分数：
			对应结果：
			不及格
			合格
			良
			优秀
			优+
			输入不合格
 
			
v-show
			v-show展示与否
			v-if展示与否
			
			
v-for
			
				{{l.name}}
			
			

			

				{{l.name}}
			
			
			
v-on
			触发事件
			触发事件2
			
		
	
 
	

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

三，过滤器

解析：

    全局过滤器

    Vue.filter('filterName', function (value) {

     // value 表示要过滤的内容

    });

    局部过滤器

    new Vue({

       filters:{'filterName':function(value){}}

    });

    vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：

    

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

提示：

注1：过滤器函数接受表达式的值作为第一个参数

注2：过滤器可以串联

{{ message | filterA | filterB }}

注3：过滤器是JavaScript函数，因此可以接受参数：

{{ message | filterA(‘arg1’, arg2) }}

注4：js定义一个类

function Stu(){};

Stu.prototype.add(a,b){};//添加一个新的实例方法

Stu.update(a,b){};//添加一个新的类方法

代码演示

	
		
		
		
	
	
		
		

			{msg|strdelete}} -->
			{{msg|strdelete|strdelete2}}

			
			{{msg|strdelete3(2,5)}}
		
	
 
	

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

四，计算属性&监听器（案例）

解析：

计算属性

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新

computed:{}

监听属性

监听属性 watch，我们可以通过 watch 来响应数据的变化

watch:{}

二者区别在于：前者为多方影响，后者为当方面影响

代码演示

	
		
		
		
	
	
		
		

			
计算属性
			请输入第一个数：

			请输入第二个数：

			结果为：{{addFlag}}
			
监听属性
			请输入千米：

			请输入米：

			
购物车
			

				

					
物品
					
单价
					
数量
					
小计
				
				

					
帽子
					
{{maozidanjia}}
					

						
					
					

						{{maozizongjia}}
					
				

					
衣服
					
{{yifudanjia}}
					

						
					
					

						{{yifuzongjia}}
					
				
				

					
裤子
					
{{kuzidanjia}}
					

						
					
					

						{{kuzizongjia}}
					
				
				

					
总价
					
{{zongjia}}
				
			
 
 
 
		
	
 
	

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117