4.組件化
組件：組件就是可被反復(fù)使用的，帶有特定功能的視圖备籽。
所謂的組件化，就像玩積木一樣分井，把封裝的組件進(jìn)行復(fù)用,把積木（組件）拼接在一起车猬，構(gòu)成一個復(fù)雜的頁面應(yīng)用程序。
組件樹就是由各個組件構(gòu)成的一種數(shù)據(jù)結(jié)構(gòu)尺锚，它存在的意義是為了幫梳理應(yīng)用程序珠闰。
1、組件的創(chuàng)建
全局組件：
局部組件：
2瘫辩、組件使用
作為普通的標(biāo)簽去使用
3伏嗜、注意事項
1.組件的id和使用方式 遵循烤串式命名方式：a-b-c
2.如果一個組件 要渲染多個元素坛悉，將多個元素放在一個頂層標(biāo)簽中，比如div承绸、form
3.全局組件可以用在id為example的范圍內(nèi)的任何一個組件內(nèi)部裸影，直接調(diào)用可以；但是局部組件只能在父模板中直接調(diào)用
5.自定義指令
創(chuàng)建：
使用：
6.過濾器
過濾器是針對一些數(shù)據(jù) 進(jìn)行篩選军熏、過濾轩猩、格式化等相關(guān)的處理，變成我們想要的數(shù)據(jù)荡澎。
過濾器的本質(zhì) 就是一個帶有參數(shù)帶有返回值的方法均践。
Vue1.* 支持內(nèi)置的過濾器，但是Vue2.* 就不再內(nèi)置過濾器摩幔，但是支持自定義過濾器彤委。
1、過濾器的創(chuàng)建和使用
1.創(chuàng)建
2.使用
2热鞍、如何在調(diào)用過濾器時葫慎，完成參數(shù)的發(fā)送和接受
1.發(fā)送
2.接受
7.復(fù)合組件
知識回顧：
復(fù)合組件：并不是新的概念衔彻，就是一個組件薇宠，只不過這個組件中 可以調(diào)用其他的組件。
注意事項：
1.組件要渲染的內(nèi)容 取決于在定義組件時template
效果是出不來的艰额。
2.允許在一個組件中澄港，直接來調(diào)用另外一個組件。
8.生命周期
四個階段：
? ? create 準(zhǔn)備工作 （數(shù)據(jù)的初始化柄沮。回梧。。）
? ? mount 掛載前后針對元素進(jìn)行操作
????update 數(shù)據(jù)發(fā)生變化祖搓，
????destroy 清理工作 (關(guān)閉定時器狱意、集合清空..)
????beforeCreate/created
????beforeMount/mounted
????beforeUpdate/updated
????beforeDestroy/destroyed
9.常用屬性
1、watch
1.表單元素的雙向數(shù)據(jù)綁定
2.監(jiān)聽
2拯欧、computed
計算屬于是用于在模板中详囤，搞定復(fù)雜的業(yè)務(wù)邏輯，因為有依賴緩存镐作。
1.指定計算屬性
2.調(diào)用
10.組件間通信
1藏姐、父與子通信 （props down）
1.發(fā)送
2.接受到son組件：
2恩闻、子與父通信 (events up)
1.綁定
2.觸發(fā)
子組件內(nèi)部：
3酣栈、ref(reference 引用/參考 外號)
幫助在父組件中 得到子組件中的數(shù)據(jù)、方法窿吩。
1.指定ref屬性
2.根據(jù)ref得到子組件實例
4杨蛋、$parent
this.$parent得到父組件的實例
5兜材、兄弟組件通信
1.
2.接收方
3.發(fā)送方
11.補充組件創(chuàng)建的方式
1理澎、直接在template屬性中指定模板內(nèi)容
1.全局組件
2.局部組件
2、.vue結(jié)尾的文件
3曙寡、單獨指定一個模板內(nèi)容
12.路由模塊
路由模塊的本質(zhì) 就是建立起url和頁面之間的映射關(guān)系矾端。
1、SPA的基本概念和工作原理
SPA：single page application 單一頁面應(yīng)用程序卵皂，只有一個完整的頁面秩铆；它在加載頁面時，不會加載整個頁面灯变，而是只更新某個指定的容器中內(nèi)容殴玛，比如Gmail、移動的webApp添祸。
工作原理：
?????解析地址欄：完整的頁面地址滚粟、路由地址
?????根據(jù)路由地址從路由詞典中找到真正的要加載的頁面
????發(fā)起ajax請求：請求要加載的頁面
????像指定的容器中插入加載來的頁面
2、路由模塊的基本使用
????專業(yè)術(shù)語：
????router路由器
????route路由
????routes 路由數(shù)組（路由詞典）
1.引入vue.js vue-router.js
2.指定一個容器
3.創(chuàng)建業(yè)務(wù)所需要用到的組件類
4.配置路由詞典
5.測試
修改地址欄中的路由地址刃泌，測試看加載的組件是否正確
注意事項：
1.先引入vue凡壤，再引入插件
2.一定要指定router-view
3.route路由 {path:'',component:}
routes：路由數(shù)組 []
router：路由器，按照指定的路由規(guī)則去訪問對應(yīng)的組件 new VueRouter
3耙替、使用路由模塊來實現(xiàn)頁面跳轉(zhuǎn)的方式
方式1：
直接修改地址欄
方式2：
方式3：
4亚侠、完成參數(shù)的傳遞
在頁面之間跳轉(zhuǎn)的時候，在有些場景下俗扇，需要同時指定參數(shù)
1.明確發(fā)送方和接收方
2.配置接收方的路由地址
3.發(fā)送
5硝烂、路由嵌套
在一個路由中，path對應(yīng)一個component铜幽，如果這個component需要根據(jù)
不同的url再加載其他的component滞谢，稱之為路由的嵌套
舉例：比如A組件現(xiàn)在需要根據(jù)不同的url，加載B組件或者C組件
1.給A組件指定一個容器
2.配置路由詞典
需求：現(xiàn)在有兩個組件除抛，分別是login/mail,建立SPA狮杨。
在此基礎(chǔ)上，希望mail組件 嵌套inbox/outbox/draft
補充：在設(shè)置子路由到忽，路由匹配規(guī)則依然是適用的橄教，只不過路由地址為空和異常，要攜帶父組件的路由地址
13.搭建基于CLI開發(fā)環(huán)境的方式
1.指定一個文件夾：C:\xampp\htdocs\framework\vue\project
2.將tpls.zip拷貝到project中
3.右鍵單擊壓縮包绘趋，解壓縮到當(dāng)前文件夾
4.進(jìn)入到tpls
5.同時按下shift和鼠標(biāo)右鍵颤陶，選擇在此位置打開命令行串口
6.執(zhí)行npm install
7.執(zhí)行npm start
