vue数据响应式原理：vue是通过数据劫持来对data中的数据做响应式拦截的，通过es5中的Object.defineProperty中的setter和getter来做数据劫持的
指令
- v-text
- v-html
- v-bind 单项数据绑定
- v-if 条件为boolean,false时元素不会出现在dom树中
- v-else-if
- v-else
- v-show 条件为boolean,控制的是display:none
- v-for 渲染
- v-model 双项数据绑定，默认绑定表单元素中的value。原理：v-bind + v-on
- v-on 事件绑定
- 事件修饰符：v-on="eventName.stop" ,使用事件修饰符时写的顺序很重要。
- .stop 阻止数据冒泡
- .capture 使用事件捕获模式
- .prevent 阻止默认行为
- .self 点自己才执行
- .once 只执行一次
- .passive 滚轮事件的默认行为立即执行
自定义指令
- 全局定义
```
Vue.directive('指令名',{
bind(el,binding){},
inserted(el,binding){},
unbind(el,binding){}
})
```
- 局部定义
```
directives:{
"指令名":{
bind(el,binding){},
inserted(el,binding){},
unbind(el,binding){}
}
}
```
自定义过滤器
Vue.filter('fiterName',callback(val,[option]))
- 全局定义
```
Vue.filter('filterName',(val,type)=>{
})
```
- 局部定义
```
filters:{
filterName(val){
}
}
```
vue数据绑定
- 方案一：axios :get/put/delete用params传递数据到后端，post表单格式需要new URLSearchParams对象来传数据，post json格式普通键值对就可以。
- get请求,put,delete请求原理是get请求，写法一样
```
axios({
url:"",
method:'get',//or put/delete
params:{
'key':'value'
},
}).then(res=>{console.log(res)})
.catch(err=>{console.log(err)})
```
- post请求表单格式数据 application/x-www-form-urlencoded
```
let p=new URLSearchParams();
p.append('key','value');
axios({
url:'',
method:'post',
data:p
}).then(res=>console.log(res))
.catch(err=>console.log(err))
```
- post请求json格式数据 application/json
```
axios({
url:"",
method:"post",
data:{
'key':'value'
}
}).then(res=>console.log(res))
.catch(err=>console.log(err))
```
- 方案二 : fetch
- get请求：发送给后端的数据要拼接到url中
```
fetch({
url:'../index.html?key1=value1&key2=value2',
method:'get'
}).then(data=>data.json())
.then(res=>console.log(res))
.catch(err=>console.log(err))
```
- post请求：需要设置请求头，用body传递转为json字符串的数据
```
fetch({
url:'',
headers:new header({
'Content-Type':'application/x-www-form-urlencoded'
}),
body:new URLSearchParams([['key1','value1'],['key2','value2']]).toString()
}).then(data=>data.json())
.then(res=>console.log(res))
.catch(err=>console.log(err))
```
```
fetch({
url:'',
headers:new headers({
'Content-Type':'appliction/json'
}),
body:JSON.stringify({
'key1':'value1',
'key2':'value2'
})
}).then(data=>data.json())
.then(res=>console.log(res))
.catch(err=>console.log(err))
```
总结:axios请求到的数据是一个封装好的json对象，安全性较高,数据在data中。fetch请求到的数据没有经过封装，安全性较低，并且数据要使用 json() 或 text() 或 blob() 格式化处理 才能使用
axios promsie封装
```
const instance=axios.create({
url:'',
timeout:1000
})
const request=({
url,
method="get",
params,
data,
headers,
})=>{
return new Promise((resolved,rejected)=>{
swich(method.toUppercase()){
case 'POST':
let realData={};
if(headers['Content-Type']=="application/x-www-form-urlencoded"){
const p=new URLSearchParams()
for(let key in data){
p.append(key,data[key])
}
realData=p;
}else{
realData=data;
}
instance.post(url,realData,{
method,
headers,
}).then(res=>resolved(res))
.catch(err)=>rejected(err)
break;
default:
instance.get(url,{
params,
method,
headers
}).then(res=>console.log(res))
.catch(err=>console.log(err))
break;
}
})
}
```
vue属性
- el
- data
- methods
- computed ： 计算属性，用来写 对data中的数据进行计算 的方法，有普通函数写法和对象写法
- watch :侦听属性 ，用来对data中数据进行侦听，数据发生改变时就进行一些操作，比如数据请求
vdom,diff算法，jsx
- vdom就是模拟dom的数据
- 使用jsx方式简写vdom,再用render()将vdom渲染成真实dom
- 当有数据更改时，会重新生成vdom,通过diff算法比较新旧vdom的区别，得到petch对象，根据petch对象重新渲染真实dom。
生命周期
- 所有组件都有生命周期，可以分为初始化，更新，销毁 3个阶段。拥有11个钩子函数，8个常用。
