vue初识

1.阻止vue在启动时产生提示

Vue.config.productionTip=false

2.el用于指定当前vue实例为那个容器服务

用法有：

• el:document.getElementById(‘root’)
• el:’#root’
• 创建vue实例：v后，v.$mount(’#root’)

3.data用于存储数据，供el指定的容器使用

两种写法:

• 对象式
• 函数式如 :

data(){  ​        
 return {​          
 text:'初识vue',​          
 name:'双向数据绑定',​    
 address:'https://www.baidu.com',​   
   }},

注意：学习组件后必须用函数式，否则会报错

vue模板语法

1.插值语法用于解析标签体内容{{xxx}}
2.指令语法用于解析标签
v-bind:href="xxx"或:href=“xxx”

数据绑定

1.单向数据绑定(v-bind)
2.双向数据绑定(v-model)
注：

• 双向绑定一般用于表单类元素上，如:input,select；
• v-model:value可简写为v-model,因为v-model默认收集value值

数据代理

通过一个对象代理对另一个对象中属性的操作
Object.defineProperty方法可追加属性

Object.defineProperty(person,'age',{​
value:18,​		
enumberable:true,//控制是否可以枚举，默认false​		
writable:true,//控制是否可以修改，默认false​		configurable:true
//控制是否可以删除，默认false​	 
get(){​        
console.log('读取');//读取时调用，点击...调用​        
return number;​      
},​      
set(value){       //修改时调用，value收到具体值​        
console.log('修改',value);​        number=value    //修改number​      
}  
})

事件的基本使用

1.事件绑定v-on:xxx或@xxx,eg:@click
2.事件回调配置在methods中，为使this指向vm或组件实例对象，不要用箭头函数3.@click="demo($event)"可传参
常用事件修饰符，eg:@click.stop​

• prevent阻止默认事件​
• stop阻止事件冒泡​
• once事件只触发一次

键盘事件(系统修饰键:ctrl,alt,shift,meta)

• @keyup.xxx.xxx，按下后释放触发，系统修饰键需配合其他键，eg:@keyup.ctrl.d
• @keydown.xxx.xxx，按下触发事件(tap键必须配合keydown使用)

计算属性computed

• 原理：借助Object.defineProperty提供的getter和setter
• get初次读取时和依赖的数据改变时会调用相比于methods，computed内部有缓存机制
  例如：

computed:{​      
fullname:{​      
get(){​        
console.log('读取');​        
return this.firstname+'-'+this.lastname;
​ },​      
set(value){​        
console.log('修改',value);​        
const arr=value.split('-')​     
this.firstname=arr[0]	//如果计算属性要被修改必须写set去响应修改​  
this.lastname=arr[1]	//且set中要引起计算时所依赖的数据改变​      
}	}	}

监视属性

vm.$watch('firstname',{​ 
   immediate:true,//初识化时调用 handler​ 
   handler(newValue,oldValue){//当firstname改变时 handler被调用​
   console.log(newValue,oldValue);}  }) 

   watch:{
   ​  firstname:{       ​   
     immediate:true,//初识化时调用 handler​                      
     handler(newValue,oldValue){//当firstname改变时 handler调用        
     console.log(newValue,oldValue);​
  }
 }
}                                                                                                                                           

简写
*注意: 无法写deep:true和immediate:true *​ firstname(newValue,oldValue){​ console.log(newValue,oldValue);
​ }​

深度监视

1.vue中watch默认不监测对象内部值的改变（一层）
2.配置deep:true可以监测对象内部值的改变（多层）

computed和watch的区别

1.computed能完成的功能，watch都可以完成2.watch能完成的功能，computed不一定可以完成，如：watch可以进行异步操作

两个重要原则：

1.所有被vue管理的函数，最好写成普通函数，这样this指向才是vm或组件实例对象
2.所有不被vue管理的函数（定时器setTimeout的回调函数，ajax的回调函数，promise的回调函数等），最好写成箭头函数，这样this指向才是vm或组件实例对象