Vue笔记

第一章：Vue环境搭建

1.搭建Vue环境

2.helloWorld(插值语法)

    
    

  









  
hello  {{name}} 

    
    





    





你好  {{data}} 

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




    
    
  





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

    
    
  





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

3.模板语法

    
    


  








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

  



  
指令语法




  进入

4.数据绑定

    
    

  










  单向数据绑定  





    双向数据绑定  

5.el和data的两种写法

    
    


  




  
{{name}}

6.MVVM实例

    
    



  



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

7.数据代理

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

8.Vue中的数据代理

    
    

  






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

第二章：Vue事件

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

    
    

    




    
{{name}}


    提示


    确定

2.事件修饰符

	
		
		
		
		
		
	
	
		
		
		

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

			
			

				点我提示信息
				
				
			

			
			点我提示信息

			
			

				div1
				

					div2
				
			

			
			

				点我提示信息
			

			
			

				
1
				
2
				
3
				
4
			

		
	

	

3.键盘事件(keydown和keyup)

	
		
		
		
		
	
	
		
		
		

			
欢迎来到{{name}}学习
			
		
	

	

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

1.计算属性(computed)

	
		
		
		
		
	
	
		
		

			姓： 


			名： 


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

	

	
		
		
		
		
	
	
		
		

			姓： 


			名： 


			全名：{{fullName()}}
		
	

	

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

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

	
		
		
		
		
	
	
		
		
		

			姓： 


			名： 


			测试： 


			全名：{{fullName}} 


			
		
	

	

2.计算属性的简写

	
		
		
		
		
	
	
		
		

			姓： 


			名： 


			全名：{{fullName}} 


		
	

	

3.监视属性

	
		
		
		
		
	
	
		
		

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

	

	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
			}
		}
	})

```

3.监视属性

	
		
		
		
		
	
	
		
		

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