創建項目命令；

或者 vue create my - vue - router - project這個是創建帶路由的項目

22.組件組成

比如說一個頁面吧，他三個組件，template就是用來放所有的標簽，script用來放業務邏輯，style用來放樣式，css
在樣式里面添加scoped這個東西呢只會讓這個組件的樣式只在這個組件顯示，就不會全局了，方便，建議添加，如果你的屬性有重復用到的話；比如container 記住這個是 scoped

23.組件嵌套

每個組件是相互嵌套的，比如這個，在componets里面的各個頁面相輔相成然后促成一個頁面；
用哪個組件就導入到哪個去；記住組件的導入就是在dom里面先用到，然后去js里面導入，也就是初始化；在export defaultl里面的componets里面注冊

  <script>import ItemOne from './ItemOne.vue';export default {components:{ItemOne}}</script>

24.組件注冊

組件可以全局注冊和局部注冊；部就在另一個組件或者是哪注冊則可；全局注冊就是在main.js里面注冊

要注必須在這兩個之間注冊；綠色標注處；

用app.componet("Header“,Header)這樣就能注冊了；主要是掛載；我猜測，這個是在app的父組件里面寫好子組件；然后咱們用之間去父組件里面用就行，寫在dom，咱就不用注冊和引入了；格式就是這樣，前后一致，但是前面是字符串；
注意：記得寫完一面按保存…

推薦用到多的全局的就全局注冊；沒有用到的還是局部更好；不然項目最后打包之后非常大；非常麻煩；而且子父關系不明確；依賴關系也不夠；

25.組件傳遞數據

組件之間是可以傳遞數據的
我們不是在標簽里面，在父組件里面會用到子組件的標簽嗎？

我們可以在子組件的標簽里面給子組件傳信息，那子組件去接收一下就行了；用props與data同級：【】注意里面是字符串

輸出要雙括號哦

傳遞的數量沒有限制，可以無限添加，你接收就在后面打逗號就行；
當然，之前的所有手段都適用

要給個屬性名字，v-bind綁定一下在地下寫好，上面要用字符串，這個就是動態的，不是寫死在html當中的；把父組件的改到js就行了
原理就是其實父組件也是個標簽

26.傳遞類型

父組件給子組件傳遞什么類型都可以；比如；就父親給子傳數組，那就動態定義一下就好，也可以傳數組，傳過去接收完畢之后呢，子組件可以去渲染；
再記憶一遍，文本，屬性，之間文本插值或者綁定則可；數組渲染最好循環用列表顯示，別的也行；對象的話，就是雙括號里面一定要用點訪問；
這里的props是所有類型都能接收；

<template><p>這里是組件依賴關系</p><RelationTwo title="兒子你好"></RelationTwo><RelationTwo :title2="msg" :title3="msg2" :name="name"></RelationTwo>
</template><script>
import RelationTwo from './RelationTwo.vue';
export default {components:{RelationTwo
},
data(){return{msg:"信息",msg2:3,name:["商品","信息","價格"]}
}
}</script>

<template><p>這里是三級層級關系；第三級</p><p>{{ title }} {{ title2 }} {{ title3 }}</p><ul v-for="(i ,index) in name" :key="index"><li>{{ i }}</li></ul></template>
<script>
export default {data(){return},props:["title","title2","title3","name"]
}</script>

校驗類型；這個意思就是，你傳給我的title必須是這四種之一別的不行，會報錯；

還有情況是，你說要傳值但是沒傳值，那我們就設置一個默認值

比如age吧，你父組件說了要傳但是沒傳；我們接收方就可以設置一個默認值；我們設置默認值類型是數字吧；默認可以直接設置0；
如果是數組的話；我們不可以直接設置default，我們需要把default設置成一個函數；里面寫返回值才行；因為數組，對象這些都是引用類型，所以他不能單純直接返回；一般都是函數返回；java里面也有提到；

但是也需要有必選項；就是設置一個東西，我是需要你必須給我傳的，不傳不行；不傳我就給你報錯；提醒你，這個就可以再接收方；用props類里面寫：寫一個必選項；叫required需求，顧名思義了；
再一個，props是只讀的，是不能修改的，咱們可以用一個方法去訪問獲取到父組件的元素；但是無法對其做修改，比如用this訪問，就沒法對其做修改；

這就會純報錯；
所以基本上required這個就是主要是來校驗props的；

27.組件事件

就是給組件綁定一個事件；一般這個事件就用來組件之間傳遞參數

用這個事件來進行組件之間傳遞數據，之前我們之間標簽傳，只能父傳子；現在用這個方法就可以子傳父了；
就是在子組件里面，我們寫好一個數據，設置一個按鈕，點擊事件然后觸發方法；方法里面寫this.$emit這個方法就能傳參了

然后，在父組件里面，把傳過來的數據當成一個事件用v-on綁定；然后觸發一個方法，方法里面寫反饋就行；

子元素繼續給個值，往后加，去父元素里面接收；父元素里面傳參就行，給參數，其實就是一個方法的調用，實參傳給形參


然后還可以把這個data顯示出來，因為我們已經拿到數據了；所以我們可以直接去顯示；直接return里面設置一個變量；直接把data的值賦給變量就行；然后去dom里面文本插值輸出渲染到頁面就行；

這兩章主要是父子組件的互相傳遞；

復習，父親傳子，可以直接dom的標簽傳，子組件接收props只讀，或者給父組件設置到js里面變成動態的；然后傳過去是動態的；
子傳父，需要調用事件；在子組件里面設置好傳遞按鈕觸發方法，方法里面寫this.$emit事件括號里面寫我們要傳的東西；然后去父組件里面接收；父組件里面先用子組件的標簽；然后綁定事件，這個事件名字必須是我們傳遞的第一個信息名；然后觸發方法；方法里面寫接收，打印輸出都行，也可以傳參，然后把參數賦值給一個屬性，然后渲染到dom；當然子元素給的數據也可以用動態綁定；
說實話我發現我父傳子的時候吧；子不用propos接收也能顯示0.0‘

28.互傳事件配合v-model

就是在組件a的事件在組件b也可以獲得；比如實現的效果，在輸入框搜索，但是在別的地方獲得了你的輸入；v-model基本上就用來綁定表單，獲取輸入；大部分時間；
比如說，在子組件里面輸入；然后在父組件里面獲得吧；在子組件里面綁定好事件，然后寫好輸入框，設置偵聽器，傳新值給父；去父組件里面接收；
propos也可以實現子傳父

29.插槽

之前都是傳遞數據，現在我們傳遞標簽；就是比如一些html結構
父傳子 用插槽；slot，
1.先建立父子關系
2.父親里面用孩子的雙標簽里面寫上html文本標簽
3.回到孩子那邊寫一個slot的標簽接收；
這就是插槽傳遞 插槽就是父傳子
防止同名，所以出現了一個叫具名插槽
具名插槽
定義：就是給插槽標簽命名，然后父親這邊命名，孩子那邊寫個值去匹配，匹配上了就渲染對應標簽；
1.父親這邊還是用孩子的標簽寫內容，但用v-slot:=名字 這種格式去命名；
2.命名完畢去子元素接收；在插槽標簽里面；接收的時候自己命名一個變量等于這個名字去匹配
3.命名的時候要用template標簽包裹

4.父親這邊再子標簽里面寫給tem標簽里面用v-slot然后是：起名
5.孩子那邊是用slot插槽標簽，里面是自命名變量去判斷是否與你命名相等所以是name=“”

6.v-slot可以直接簡寫成#號

30.組件生命周期

就是各個組件不同的狀態，比如第一次被渲染，第一次被銷毀，第一次數據更新，而執行這些操作的函數就叫，生命周期鉤子函數；這個函數是自動執行的；
生命周期鉤子函數示意圖


四個時期；

這些方法都是與data同級，不寫在方法里；
其實渲染和掛載差不多 渲染是把寫好的代碼渲染到dom 而掛載是把渲染好的東西插入到制定頁面；

31生命周期的應用

通過ref來獲取dom結構
添加ref就是用來讀取他的數據
再不同的節點做不同的事情；比如，在掛載渲染之后咱們讀取獲取數據，因為很多時候其實你還沒加載出來，但是結構已經加載出來了；

32.動態組件

比如，切換組件的按鈕 點擊之后切換另一個組件；
1.先導入兩組件；然后，先不顯示
2.用一個component的標簽，里面用v-bind綁定一下屬性，屬性就是初始化值為componentA
3.然后用一個按鈕去實現；方法里面如果等于componentA就讓按鈕值等于，否則等于A，就切換成功了；
4.往深處想；這樣就不動這個頁面，就做到了再一個頁面里面切換不同的組件；

33.組件保持存活

切換的時候；另一個組件會被銷毀
beforeMount(){
console.log(‘組件被銷毀前’)
},
unmounted(){
console.log(‘組件被銷毀后’)
}
這個放a組件里面就能看見了，切換就會銷毀組件；

不想組件被銷毀，那就用組件保護一下，就不參與銷毀了；

34.異步加載組件

咱們組件很多；一次性加載完項目會被卡死；
所以咱們用異步加載的辦法；先加載別的，后面用到了再去加載這個組件；
1.先不導入你要異步的組件；
2.導入{defineAsyncComponent}的方法
3.用一個變量去接收b組件的路徑；


箭頭函數，傳統就是類型加方法名里面是參數然后{返回值}，寫在可以用一個變量去接收；然后=右邊是參數然后打一個箭頭是返回值；省略了很多東西；語句不多的時候可以
主要結構就是
命名變量=（參數）=>{函數體，返回值；}

35.依賴注入

從祖宗給父親給兒子這個步驟不能跳躍，傳數據；

1.在祖宗里面寫，與data同級 provide：{屬性名字：‘屬性值’}
2.去孫子里面接收，同樣與data同級之間inject:[“屬性名”]
就可以隔代傳輸了
3.這里面傳遞的數據也可以是動態的，去data里面定義去
4.那就得把provide寫成方法，有返回值；每次變成方法基本上都是因為需要返回的東西不是文本了，或者不是靜態了；
provide（）{
return{
自定義屬性名字：this.之前data的屬性名
}
}
5.孫子里面用原來的接收方法也行；用data的返回值那種接收也可以；
6.如果你是在全局里面注冊；那我們哪里都可以讀到，但是如果有父子關系， 我們只能上下傳遞；

36.Vue應用

main.js是vue的唯一實例對象；
每一個項目都是由一個組件開始，然后嵌套然后分支然后很多，app是第一個根組件，也只能有一個

所以，在這倆之間，咱們引入別的組件；
光是html啥的這些文件可以到頁面渲染，但是vue文件不行，所以他需要掛載到一個容器里面，然后才能渲染出去；
這個容器可以是div也可以是css選擇器；
app.mount()就已經是掛載了
然后#app是在找index.html是我們的初始頁面；
id選擇器是#打頭；而css選擇器是.打頭；
我們寫的vue的所有文件最后都會打包成一個main.js的文件；最后去在index.html中把這個main.js文件引入進來
所以說vue的入口實則就是從main.js入，然后關聯一個index.html，在里面瘋狂的導入組件，掛載，所有寫的vue都會打包成一個main.js的文件，最后在index.html里面正常運行，進去之后看到app的根組件然后從app.vue一層層往下走；
公共文件夾是什么資源都可以放；css也行；

開發項目流程

其實開發一個vue項目的流程就是
1.根據公司項目需求
2.確定技術棧，搭建框架
3.創建項目，配好依賴
4.分配好目錄，按需規劃
5.路由配置，掛載，狀態管理，通信規范
6.與后端商量好接口文檔
7.設計組件，可復用的組件
7.搭建首頁頁面，登錄類似基礎頁面，設置好框架，然后根據接口寫好接收請求；
8.設計框架，每頁的頁面展示，簡潔可觀
9.實現邏輯
10.部署上線，項目部署到服務器，確保訪問
11維護更新