條件渲染
v-if 與 v-show 的區(qū)別
1固蚤、他們都能實(shí)現(xiàn)元素的顯示和隱藏
2、v-show只是簡單的控制元素的display屬性（不管條件為真還是為假拳话，這個(gè)元素都會被渲染出來）先匪；而v-if才是條件渲染（條件為真，元素會被渲染弃衍，條件為假呀非，元素會被銷毀）。
3镜盯、v-show有更高的首次渲染開銷岸裙；v-if的首次渲染開銷要小很多。
4速缆、v-if有更高的切換開銷降允，v-show切換開銷比較小。
5艺糜、v-if有配套的 v-else-if 和 v-else剧董，而v-show沒有。
6破停、v-if可以搭配template使用翅楼，而v-show不行。
mixins混入
定義里一個(gè)對象真慢，這個(gè)對象包含有vue組件實(shí)例相關(guān)的選項(xiàng)的一個(gè)對象毅臊，可以混入到實(shí)例vue中，就變成了一個(gè)公有屬性黑界。data如果是一個(gè)混入對象的選項(xiàng)管嬉，那么data需要設(shè)置為工廠模式皂林，否則實(shí)例vm1修改data里的內(nèi)容，也會影響到vm2里的內(nèi)容宠蚂。除了 el 與 propsData 這兩個(gè)選項(xiàng)之外式撼，其他的選項(xiàng)都可以寫在定義的對象中混入。
var vm1 = new Vue({
el:"#app1",
mixins:[common],
data:{
mes:"world",//自身有就用自身的
title:"toutou"
},
//生命周期函數(shù) 兩個(gè)都會執(zhí)行 自身和公用都有的話求厕，先執(zhí)行公有的著隆，再執(zhí)行自身的
mounted(){
console.log("自身的")
}
})
組件
- 組件的三大原則：==靈活性、復(fù)用性呀癣、高度可擴(kuò)展性==美浦。
組件中的使用情況
1、 組件的使用项栏，先注冊浦辨，然后用組件名字做為標(biāo)簽來使用。
2沼沈、 組件必須要有一個(gè) template 選項(xiàng)流酬，來指定這個(gè)組件的模板內(nèi)容愧沟。
3稚叹、 組件的data選項(xiàng)棵介，必須是一個(gè)函數(shù)返回對象的形式唾琼。
4、 組件的命名不能跟html標(biāo)簽沖突簇宽。
5苔巨、 組件的template選項(xiàng)只能有一個(gè)根元素（就是只能有一個(gè)大盒子）槐脏。
6店乐、 全局注冊的組件 Vue.componet 必須寫在 new Vue之前艰躺。
7、 組件的命名可以盡量使用短橫線方式眨八，也可以用駝峰式命名腺兴；但是使用的時(shí)候需要換成短橫線方式，否則會報(bào)錯(cuò)找不到廉侧。
- 7.1 使用 x-template 的script標(biāo)簽的方式的時(shí)候可以不用考慮短橫線命名的規(guī)則含长；使用單文件組件，也不需要考慮這條規(guī)則伏穆。
組件注冊分為全局注冊和局部注冊
1、全局注冊 Vue.component（組件的名字纷纫，組件的選項(xiàng)對象）
2枕扫、局部注冊 components 寫在Vue實(shí)例的內(nèi)部
全局注冊與局部注冊的區(qū)別
局部注冊的組件，在誰身上注冊的就只能用在那個(gè)身上辱魁。
全局組成的組件可以在任意地方使用烟瞧，但是必須要在 new Vue之前注冊诗鸭。
組件的寫法
直接使用 模板字符串的方式 template標(biāo)簽
使用單文件組件 （推薦）
使用 script 標(biāo)簽的方式 type="text/x-template"
組件的通信
- 父與子的通信
1、需要在子組件中定義props選項(xiàng)参滴，來確定我需要哪些prop强岸。
2、父組件在調(diào)用子組件的時(shí)候砾赔，需要傳遞prop下來蝌箍，使用prop作為自定義屬性來寫在子組件的標(biāo)簽身上。
父組件給子組件傳遞一個(gè)屬性prop暴心，子組件用props接收后妓盲，就可以使用父組件的prop。
- 子與父的通信
1专普、父調(diào)用子組件的時(shí)候悯衬，在子組件標(biāo)簽上綁定一個(gè)自定義事件。
2檀夹、子組件在某個(gè)時(shí)刻筋粗，觸發(fā)父親給綁定事件。
父組件給子組件綁定一個(gè)自定義事件炸渡，子組件需要修改的時(shí)候娜亿，觸發(fā)父組件綁定的事件并且傳遞參數(shù)過去，父組件接收后就可以修改了偶摔。
組件之間的通信除了用props父傳子暇唾，$emit子傳父，還有一些特殊操作（不推薦）
1辰斋、ref 用在組件標(biāo)簽上策州，通過$ref獲取到DOM元素直接修改上面的內(nèi)容
2、$root 實(shí)例屬性可以拿到跟組件對象宫仗，也就是new Vue 出來的實(shí)例
3够挂、$parent 實(shí)例屬性，可以拿到當(dāng)前組件的父組件的實(shí)例對象
4藕夫、$children 實(shí)例屬性孽糖，去獲取子組件的實(shí)例，得到的是一個(gè)子組件實(shí)例的集合
ref屬性
- ref這個(gè)屬性毅贮，可以寫在標(biāo)簽上办悟，也可以寫在組件標(biāo)簽上。
- 寫在標(biāo)簽上使用$refs獲取到的是 DOM對象
- 寫在組件標(biāo)簽上獲取到的是 組件對象
v-model 其實(shí)是一種語法糖形式
<input type="text" :value="name" @input="name = $event.target.value" />
注：$event
1滩褥、 $event用在普通的標(biāo)簽上病蛉，代表著事件對象。
2、 $event用在組件的標(biāo)簽上铺然，代表著觸發(fā)這個(gè)事件是傳遞過來的參數(shù)俗孝。
插槽
默認(rèn)在組件開始標(biāo)簽與結(jié)束標(biāo)簽中寫的內(nèi)容是無效的，如果需要將內(nèi)容渲染出去魄健，就需要使用插槽 slot 赋铝。
slot 是不限制次數(shù)的。
slot 是可以命名的沽瘦；slot 組件上使用 name 屬性給他命名革骨，那個(gè)插槽模板內(nèi)容要放到那個(gè) slot 坑里面，就需要帶著 name 的名字 slot=“name”其垄。
slot 還可以有個(gè)默認(rèn)不加鎖的坑苛蒲，沒寫name的就默認(rèn)放在這個(gè)坑里。
作用域插槽
把組件內(nèi)數(shù)據(jù)能夠在插槽模板內(nèi)容中使用绿满。
使用步驟：
1臂外、在 slot 標(biāo)簽上寫自定義的屬性，但是不能是 name喇颁。
2漏健、在相應(yīng)的 slot 的插槽模板內(nèi)容上面使用 slot-scope 接收第一部中傳遞過來的 porp集合。
插槽新語法橘霎，具名插槽（v-slot可以簡寫成 # ）
1蔫浆、先在組件中的template中的slot標(biāo)簽上定義一個(gè)名字，但是不能是name姐叁。
2瓦盛、在頁面上用<template v-slot:msg></template>標(biāo)簽，里面寫v-slot:msg,也可以接收參數(shù)v-slot:msg=“obj"外潜，obj是一個(gè)對象原环，可以傳入多個(gè)屬性。
Vue.component('hello',{
template:`
<div>
<slot :msg="msg"></slot>
</div>
`
})
//頁面上使用
<template v-slot:abc="obj">
<h1>我是新寫法--{{ obj.msg }}</h1>
</template>
注：其實(shí)<slot></slot>空標(biāo)簽有一個(gè)默認(rèn)default屬性处窥。
<template v-slot:default="obj">
</template>
非props特性
在使用組件的時(shí)候嘱吗，在組件標(biāo)簽上寫的特性，如果組件內(nèi)部沒有通過props選項(xiàng)去接收滔驾，那么這個(gè)特性就叫做非props特性谒麦，非props特性會自動寫入到組件的根元素上。
- 非props的合并和替換已有的特性
除了class和style不會被替換哆致，其他屬性都會被替換绕德，除了class和style會被合并，其他屬性都不會被合并摊阀，只會替換耻蛇。
禁用特性繼承 inheritAttrs: false
inheritAttr：false 不會影響style和class的綁定剩瓶。
獲取非props特性
$attrs 能夠拿到非props特性，但是class和style拿不到城丧。
生命周期鉤子
生命周期分為八個(gè)步驟：
1、beforeCreate⊥愫住（創(chuàng)建之前）
2亡哄、created （創(chuàng)建之后）
3布疙、beforeMount∥霉摺（掛載之前）
4、mounted ×榱佟（掛載之后）
5截型、beforeUpdate （更新之前）
6儒溉、updated 』陆埂（更新之后）
7、beforeDestroy《倩痢（銷毀之前）
8波闹、destroyed （銷毀之后）
一般在beforeDestroy這個(gè)生命周期做一下清除的事情（比如清除定時(shí)器涛碑，監(jiān)聽滾動條）
想要拿到組件中的dom元素精堕，需要在mounted這個(gè)生命周期函數(shù)之后才能獲取到。
通過axios發(fā)ajax請求
使用axios需要先引入axios的js
和jquery一樣蒲障，axios有三種寫法：
axios(
{url:"url地址"歹篓，
methods:'get',
params:{
data:'請求帶過去的東西'
}).then();
axios.get(url,options);
axios.post(url,options);
還可以對 axios 做一個(gè)請求或響應(yīng)攔截，實(shí)現(xiàn)登陸校驗(yàn)的驗(yàn)證揉阎，驗(yàn)證token
fetch發(fā)ajax請求
// fetch 的get請求方式
fetch(url).then(res=>{
return res.json(); //通過fetch獲取到的需要通過json轉(zhuǎn)換拿到想要的數(shù)據(jù)
}).then()
//轉(zhuǎn)換之后還需要return回去下面繼續(xù)鏈?zhǔn)秸{(diào)用
// fetch post請求方式
fetch('url',{
method:'post',
body:JSON.stringify({ 可以帶參數(shù)去請求庄撮，但是要轉(zhuǎn)換成json字符串格式
username:'zhangsan',
password:'123'
})
})
注意： fetch有個(gè)問題，獲取失敗余黎，但是第二個(gè).then會執(zhí)行重窟，
請求404沒找到catch抓取不到，不會走到catch回調(diào)中去惧财。