第一章：Vue环境搭建

1.搭建Vue环境

    
    


    










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

2.helloWorld(插值语法)

    
    

  









  
hello  {{name}} 






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

    
    





    





你好  {{data}} 








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

1.创建一个Vue实例 传递一个配置对象
2.root容器中的代码依然符合html代码规范 只不过混入一些特殊的Vue
3.root容器代码称为Vue模板
4.Vue的实例和容器是一一对应的
5.在开发中 只有一个Vue实例 并且配合着组件一起使用
6.{{XXX}} XXX是js中语句  对象.属性  直接写对象




    
    
  





你好 ！{{name}}  {{address}} {{day}}





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

    
    
  





你好 ！{{name.name1}}  {{address}} {{day.age}}





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

3.模板语法

    
    


  








  
插值语法
  
你好 {{data}}  {{data}} 

  



  
指令语法




  进入










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

4.数据绑定

    
    

  










  单向数据绑定  





    双向数据绑定  







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

5.el和data的两种写法

    
    


  




  
{{name}}










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

6.MVVM实例

    
    



  



      
学校名称：{{name}}
      
地址：{{address}} {{$options}}







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

7.数据代理

    
    








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

数据代理：通过一个对象对另一个对象中属性的操作 读/写  -->
1

    
    









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

8.Vue中的数据代理

    
    

  






  
学校名称{{name}}
  
地址{{address}}










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

第二章：Vue事件

1.Vue中的事件处理(点击双击事件)

    
    

    




    
{{name}}


    提示


    确定










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

2.事件修饰符

	
		
		
		
		
		
	
	
		
		
		

			
欢迎来到{{name}}学习
			
			点我提示信息

			
			

				点我提示信息
				
				
			

			
			点我提示信息

			
			

				div1
				

					div2
				
			

			
			

				点我提示信息
			

			
			

				
1
				
2
				
3
				
4
			

		
	

	

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

3.键盘事件(keydown和keyup)

	
		
		
		
		
	
	
		
		
		

			
欢迎来到{{name}}学习
			
		
	

	

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

第三章：计算属性和监视属性

1.计算属性(computed)

	
		
		
		
		
	
	
		
		

			姓： 


			名： 


			全名：{{firstName}}-{{lastName}}
		
	

	

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

	
		
		
		
		
	
	
		
		

			姓： 


			名： 


			全名：{{fullName()}}
		
	

	

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

属性就是data里面的数据
方法(函数)就是methods里面的方法

el用来绑定标签里面的类名或id  data用来存放 标签里面要显示的内容 插值语法  methods用来存放对应的事件触发代码内容 
computed用来存放计算属性

1
2
3
4
5
6

	
		
		
		
		
	
	
		
		
		

			姓： 


			名： 


			测试： 


			全名：{{fullName}} 


			{fullName}} 


			全名：{{fullName}} 


			全名：{{fullName}} -->
		
	

	

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

2.计算属性的简写

	
		
		
		
		
	
	
		
		

			姓： 


			名： 


			全名：{{fullName}} 


		
	

	

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

3.监视属性

	
		
		
		
		
	
	
		
		

			
今天天气很{{info}}
			
			
			切换天气
		
	

	

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

	get(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				},
				set(value){
					console.log('set',value)
					const arr = value.split('-')
					this.firstName = arr[0]
					this.lastName = arr[1]
				}
			} */
			//简写
			fullName(){
				console.log('get被调用了')
				return this.firstName + '-' + this.lastName
			}
		}
	})

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

```

3.监视属性

	
		
		
		
		
	
	
		
		

			
今天天气很{{info}}
			
			
			切换天气
		
	

	

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