Vue完整总结
目錄
- Vue
- MVVM思想
- Vue簡(jiǎn)介
- 入門案例
- 安裝
- HelloWorld
- vue聲明式渲染
- 雙向綁定
- 事件處理
- 概念
- 創(chuàng)建Vue實(shí)例
- 模板或元素
- 數(shù)據(jù)
- 方法
- 指令
- 插值表達(dá)式
- 花括號(hào)
- 插值閃爍
- v-text和v-html
- v-bind
- 綁定class
- 綁定style
- 綁定其他任意屬性
- v-bind縮寫
- v-model
- v-on
- 基本用法
- 事件修飾符
- 按鍵修飾符
- 組合按鈕
- v-for
- 遍歷數(shù)組
- 數(shù)組角標(biāo)
- 遍歷對(duì)象
- Key
- v-if和v-show
- 基本用法
- 與v-for結(jié)合
- v-else和v-else-if
- 計(jì)算屬性和偵聽器
- 計(jì)算屬性（computed）
- 偵聽（watch）
- 過濾器（filters）
- 局部過濾器
- 全局過濾器
- 組件化
- 全局組件
- 組件的復(fù)用
- 局部組件
- 生命周期鉤子函數(shù)
- 生命周期
- 鉤子函數(shù)
- vue模塊化開發(fā)
- 模塊化開發(fā)
- 項(xiàng)目結(jié)構(gòu)
- Vue單文件組件
- 導(dǎo)入element-ui快速開發(fā)
Vue
MVVM思想
- M：即Model，模型，包括數(shù)據(jù)和一些基本操作
- V：即View，視圖，頁(yè)面渲染結(jié)果
- VM：即View-Model，模型與視圖間的雙向操作（無需開發(fā)人員干涉）
在MVVM之前，開發(fā)人員從后端獲取需要的數(shù)據(jù)模型，然后要通過DOM操作Model渲染到View中。而后當(dāng)用戶操作視圖，還需要通過DOM獲取View中的數(shù)據(jù)，然后同步到Model中。
而MVVM中的VM要做的事情就是把DOM操作完全封裝起來，開發(fā)人員不用再關(guān)心Model和View之間是如何互相影響的：
- 只要Model發(fā)生了改變，View上自然就會(huì)表現(xiàn)出來。
- 當(dāng)用戶修改了View，Model中的數(shù)據(jù)也會(huì)跟著改變。
把開發(fā)人員從繁瑣的DOM操作中解放出來，把關(guān)注點(diǎn)放在如何操作Model上。
Vue簡(jiǎn)介
Vue(讀音/vju?/，類似于view)是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue的核心庫(kù)只關(guān)注視圖層，不僅易于上
手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí)，Vue也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。
官網(wǎng)：https://cn.vuejs.org/
參考：https://cn.vuejs.org/v2/guide/
Git地址：https://github.com/vuejs
尤雨溪，Vue.js創(chuàng)作者，VueTechnology創(chuàng)始人，致力于Vue的研究開發(fā)。
入門案例
安裝
官網(wǎng)文檔提供了3中安裝方式：
1.直接script引入本地vue文件。需要通過官網(wǎng)下載vue文件。
2.通過script引入CDN代理。需要聯(lián)網(wǎng)，生產(chǎn)環(huán)境可以使用這種方式
3.通過npm安裝。這種方式也是官網(wǎng)推薦的方式，需要nodejs環(huán)境。
本課程就采用第三種方式
HelloWorld
h2中要輸出一句話：xx是技術(shù)類公眾號(hào)。前面的xx是要渲染的數(shù)據(jù)。
<div id="#app"><h2>{{name}}, 是技術(shù)類公眾號(hào)</h2> </div> <script src="./node_modules/vue/dist/vue.min.js"></script> <script>let vm = new Vue({el: "#app",data: {name: "后端碼匠"}}); </scipt>vue聲明式渲染
<body><div id="app"><h1>{{name}}, 是技術(shù)類公眾號(hào)</h1></div><script src="./node_modules/vue/dist/vue.min.js"></script><script>let vm = new Vue({el: "#app",data: {name: "后端碼匠"}});</script> </body>- 首先通過newVue()來創(chuàng)建Vue實(shí)例
- 然后構(gòu)造函數(shù)接收一個(gè)對(duì)象，對(duì)象中有一些屬性：
- el：是element的縮寫，通過id選中要渲染的頁(yè)面元素，本例中是一個(gè)div
- data：數(shù)據(jù)，數(shù)據(jù)是一個(gè)對(duì)象，里面有很多屬性，都可以渲染到視圖中
- name：這里指定了一個(gè)name屬性
- 頁(yè)面中的h2元素中，通過{{name}}的方式，來渲染剛剛定義的name屬性。
更神奇的在于，當(dāng)你修改name屬性時(shí)，頁(yè)面會(huì)跟著變化：
雙向綁定
<body><div id="app"><h1>{{name}}, 是技術(shù)類公眾號(hào), 有{{num}}個(gè)人關(guān)注</h1></div><script src="https://cdn.jsdelivr.net/gh/xzMhehe/StaticFile_CDN@main/static/vue.min.js"></script><script>let vm = new Vue({el: "#app",data: {name: "后端碼匠",num: 10000}});</script> </body>雙向綁定:
效果：修改表單項(xiàng)，num會(huì)發(fā)生變化。修改num，表單項(xiàng)也會(huì)發(fā)生變化。為了實(shí)時(shí)觀察到這個(gè)變化，將num輸出到頁(yè)面。
事件處理
<body><div id="app"><button v-on:click="num++">關(guān)注</button><h1>{{name}}, 是技術(shù)類公眾號(hào), 有{{num}}個(gè)人關(guān)注</h1></div><script src="https://cdn.jsdelivr.net/gh/xzMhehe/StaticFile_CDN@main/static/vue.min.js"></script><script>let vm = new Vue({el: "#app",data: {name: "后端碼匠",num: 10000}});</script> </body>- 這里用v-on指令綁定點(diǎn)擊事件，而不是普通的onclick，然后直接操作num
- 普通click是無法直接操作num的。
- 未來會(huì)見到更多v-xxx，這些都是vue定義的不同功能的指令。
簡(jiǎn)單使用總結(jié)：
- 使用Vue實(shí)例管理DOM
- DOM與數(shù)據(jù)/事件等進(jìn)行相關(guān)綁定
- 只需要關(guān)注數(shù)據(jù)，事件等處理，無需關(guān)心視圖如何進(jìn)行修改
概念
創(chuàng)建Vue實(shí)例
每個(gè)Vue應(yīng)用都是通過用Vue函數(shù)創(chuàng)建一個(gè)新的Vue實(shí)例開始的：
let app = new Vue({ });在構(gòu)造函數(shù)中傳入一個(gè)對(duì)象，并且在對(duì)象中聲明各種Vue需要的數(shù)據(jù)和方法，包括：
- el
- data
- methods
等等
模板或元素
每個(gè)Vue實(shí)例都需要關(guān)聯(lián)一段Html模板，Vue會(huì)基于此模板進(jìn)行視圖渲染。
可以通過el屬性來指定。
例如一段html模板：
然后創(chuàng)建Vue實(shí)例，關(guān)聯(lián)這個(gè)div
let vm = new Vue({el: "#app" });這樣，Vue就可以基于id為app的div元素作為模板進(jìn)行渲染了。在這個(gè)div范圍以外的部
分是無法使用vue特性的。
數(shù)據(jù)
當(dāng)Vue實(shí)例被創(chuàng)建時(shí)，它會(huì)嘗試獲取在data中定義的所有屬性，用于視圖的渲染，并且監(jiān)視data中的屬性變化，當(dāng)data發(fā)生改變，所有相關(guān)的視圖都將重新渲染，這就是“響應(yīng)式
“系統(tǒng)。
html：
JS:
let vm = new Vue({el: "#app",data: {name: "后端碼匠"} });- name的變化會(huì)影響到input的值
- input中輸入的值，也會(huì)導(dǎo)致vm中的name發(fā)生改變
方法
Vue實(shí)例中除了可以定義data屬性，也可以定義方法，并且在Vue實(shí)例的作用范圍內(nèi)使用。
Html：
JS:
let vm = new Vue({el: "#app",data: {num: 0},methods: {add: function(){//this代表的當(dāng)前vue實(shí)例this.num++;}} });指令
什么是指令？
- 指令(Directives)是帶有v-前綴的特殊特性。
- 指令特性的預(yù)期值是：單個(gè)JavaScript表達(dá)式。
- 指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于DOM。
例如在入門案例中的v-on，代表綁定事件。
插值表達(dá)式
花括號(hào)
格式：{{表達(dá)式}}
說明：
- 該表達(dá)式支持JS語法，可以調(diào)用js內(nèi)置函數(shù)（必須有返回值）
- 表達(dá)式必須有返回結(jié)果。例如1+1，沒有結(jié)果的表達(dá)式不允許使用，如：let a = 1 + 1;
- 可以直接獲取Vue實(shí)例中定義的數(shù)據(jù)或函數(shù)
插值閃爍
使用
{{}}方式在網(wǎng)速較慢時(shí)會(huì)出現(xiàn)問題。在數(shù)據(jù)未加載完成時(shí)，頁(yè)面會(huì)顯示出原始的
{{}}加載完畢后才顯示正確數(shù)據(jù)，稱為插值閃爍。
將網(wǎng)速調(diào)慢一些，然后刷新頁(yè)面，試試看案例：
v-text和v-html
可以使用v-text和v-html指令來替代
{{}}說明：
- v-text：將數(shù)據(jù)輸出到元素內(nèi)部，如果輸出的數(shù)據(jù)有HTML代碼，會(huì)作為普通文本輸出
- v-html：將數(shù)據(jù)輸出到元素內(nèi)部，如果輸出的數(shù)據(jù)有HTML代碼，會(huì)被渲染
示例：
<div id = "app">v-text:<span v-text = "hello"></span><br/>v-html:<span v-html = "hello"></span> </div> <script>let vm = new Vue({el: "#app",data: {hello: "<h1>大家好</h1>"},methods: {} }); </script>并且不會(huì)出現(xiàn)插值閃爍，當(dāng)沒有數(shù)據(jù)時(shí)，會(huì)顯示空白或者默認(rèn)數(shù)據(jù)。
v-bind
html屬性不能使用雙大括號(hào)形式綁定，使用v-bind指令給HTML標(biāo)簽屬性綁定值；
而且在將v-bind用于class和style時(shí)，Vue.js做了專門的增強(qiáng)。
綁定class
<div class="static"v-bind:class="{active: isActive, 'text-danger': hasError}"> </div> <script>let vm = new Vue({el: "#app",data: {isActive: true,hasError: false}}) </script>綁定style
v-bind:style的對(duì)象語法十分直觀，看著非常像CSS，但其實(shí)是一個(gè)JavaScript對(duì)象。style屬性名可以用駝峰式(camelCase)或短橫線分隔(kebab-case，這種方式記得用單引號(hào)括起來)來命名。
例如：font-size–>fontSize
結(jié)果：
綁定其他任意屬性
<div id = "app" v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}" v-bind:user = "userName"></div> <script>let vm = new Vue({el: "#app",data: {activeColor: 'red',fontSize: 30,userName: 'zhangsan'}}) </script>效果：
v-bind縮寫
<div id = "app" :style="{color: activeColor, fontSize: fontSize + 'px'}" :user = userName> </div>v-model
剛才的v-text、v-html、v-bind可以看做是單向綁定，數(shù)據(jù)影響了視圖渲染，但是反過來就不行。接下來的v-model是雙向綁定，視圖（View）和模型（Model）之間會(huì)互相影響。
既然是雙向綁定，一定是在視圖中可以修改數(shù)據(jù)，這樣就限定了視圖的元素類型。目前v-model的可使用元素有：
- input
- select
- textarea
- checkbox
- radio
- components（Vue中的自定義組件）
基本上除了最后一項(xiàng)，其它都是表單的輸入項(xiàng)。
示例：
- 多個(gè)CheckBox對(duì)應(yīng)一個(gè)model時(shí)，model的類型是一個(gè)數(shù)組，單個(gè)checkbox值默認(rèn)是boolean類型
- radio對(duì)應(yīng)的值是input的value值
- text和textarea默認(rèn)對(duì)應(yīng)的model是字符串
- select單選對(duì)應(yīng)字符串，多選對(duì)應(yīng)也是數(shù)組
v-on
基本用法
v-on指令用于給頁(yè)面元素綁定事件。語法：v-on:事件名=“js片段或函數(shù)名”
示例：
另外，事件綁定可以簡(jiǎn)寫，例如v-on:click='add'可以簡(jiǎn)寫為@click='add'
事件修飾符
在事件處理程序中調(diào)用event.preventDefault()或event.stopPropagation()是非常常見的需求。盡管可以在方法中輕松實(shí)現(xiàn)這點(diǎn)，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯，而不是去處理DOM事件細(xì)節(jié)。
為了解決這個(gè)問題，Vue.js為v-on提供了事件修飾符。修飾符是由點(diǎn)開頭的指令后綴來表示的。
- .stop：阻止事件冒泡到父元素
- .prevent：阻止默認(rèn)事件發(fā)生
- .capture：使用事件捕獲模式
- .self：只有元素自身觸發(fā)事件才執(zhí)行。（冒泡或捕獲的都不執(zhí)行）
- .once：只執(zhí)行一次
效果：右鍵“點(diǎn)贊”，不會(huì)觸發(fā)默認(rèn)的瀏覽器右擊事件；右鍵“取消”，會(huì)觸發(fā)默認(rèn)的瀏覽器右擊事件）
按鍵修飾符
在監(jiān)聽鍵盤事件時(shí)，經(jīng)常需要檢查常見的鍵值。Vue允許為v-on在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符：
<!--只有在`keyCode`是13時(shí)調(diào)用`vm.submit()`--> <input v-on:keyup.13 = "submit">記住所有的keyCode比較困難，所以Vue為最常用的按鍵提供了別名：
<!--同上--> <input v-on:keyup.enter = "submit"> <input @keyup.enter = "submit"> <!--縮寫語法-->全部的按鍵別名：
- enter
- tab
- .delete(捕獲“刪除”和“退格”鍵)
- esc
- .space
- .up
- down
- left
- .right
組合按鈕
可以用如下修飾符來實(shí)現(xiàn)僅在按下相應(yīng)按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器。
- ctrl
- alt
- shift
v-for
遍歷數(shù)據(jù)渲染頁(yè)面是非常常用的需求，Vue中通過v-for指令來實(shí)現(xiàn)。
遍歷數(shù)組
語法：v-for = “item in items”
- items：要遍歷的數(shù)組，需要在vue的data中定義好。
- item：迭代得到的當(dāng)前正在遍歷的元素
數(shù)組角標(biāo)
在遍歷的過程中，如果需要知道數(shù)組角標(biāo)，可以指定第二個(gè)參數(shù)：
語法：v-for="(item, index) in items"
- items：要迭代的數(shù)組
- item：迭代得到的數(shù)組元素別名
- index：迭代到的當(dāng)前元素索引，從0開始。
遍歷對(duì)象
v-for除了可以迭代數(shù)組，也可以迭代對(duì)象。語法基本類似
語法：
v-for=“valueinobject”
v-for="(value,key)inobject"
v-for="(value,key,index)inobject"
- 1個(gè)參數(shù)時(shí)，得到的是對(duì)象的屬性值
- 2個(gè)參數(shù)時(shí)，第一個(gè)是屬性值，第二個(gè)是屬性名
- 3個(gè)參數(shù)時(shí)，第三個(gè)是索引，從0開始
示例：
<div id="app"><ul><li v-for = "(value, key, index) in users">{{index + 1}}.{{key}} - {{value}}</li></ul> </div> <script src="https://cdn.jsdelivr.net/gh/xzMhehe/StaticFile_CDN@main/static/vue.min.js"></script> <script>let vm = new Vue({el: "#app",data: {users: [user: {name: '張三', gender: '男', age: 18}]}，methods: {decrement(ev) {//ev.preventDefault();this.num--;}}}); </script>效果：
- 1.name - 張三
- 2.gender - 男
- 3.age - 18
Key
用來標(biāo)識(shí)每一個(gè)元素的唯一特征，這樣Vue可以使用“就地復(fù)用”策略有效的提高渲染的效率。
示例：
如果items是數(shù)組，可以使用index作為每個(gè)元素的唯一標(biāo)識(shí)
如果items是對(duì)象數(shù)組，可以使用item.id作為每個(gè)元素的唯一標(biāo)識(shí)
v-if和v-show
基本用法
v-if，顧名思義，條件判斷。當(dāng)?shù)玫浇Y(jié)果為true時(shí)，所在的元素才會(huì)被渲染。v-show，當(dāng)?shù)玫浇Y(jié)果為true時(shí)，所在的元素才會(huì)被顯示。
語法：v-if=“布爾表達(dá)式”,v-show=“布爾表達(dá)式”,
與v-for結(jié)合
當(dāng)v-if和v-for出現(xiàn)在一起時(shí)，v-for優(yōu)先級(jí)更高。也就是說，會(huì)先遍歷，再判斷條件。修改v-for中的案例，添加v-if：
- {{index + 1}}.{{user.name}} - {{user.gender}} - {{user.age}}
v-else和v-else-if
v-else元素必須緊跟在帶v-if或者v-else-if的元素的后面，否則它將不會(huì)被識(shí)別。
<div id = "app"><button v-on:click = "random = Math.random()">點(diǎn)我呀</button><span>{{random}}</span><h1 v-if = "random >= 0.75">看到我啦？！v-if>=0.75</h1><h1 v-else-if = "random > 0.5">看到我啦？！v-else-if>0.5</h1><h1 v-else-if = "random > 0.25">看到我啦？！v-else-if>0.25</h1><h1 v-else>看到我啦？！v-else</h1> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script type="text/javascript">let app = new Vue({el: "#app",data: {random: 1}}); </script>計(jì)算屬性和偵聽器
計(jì)算屬性（computed）
某些結(jié)果是基于之前數(shù)據(jù)實(shí)時(shí)計(jì)算出來的，可以利用計(jì)算屬性。來完成
<div id = "app"><ul><li>西游記：價(jià)格{{xyjPrice}}，數(shù)量：<input type = "number" v-model = "xyjNum"></li><li>水滸傳：價(jià)格{{shzPrice}}，數(shù)量：<input type = "number" v-model = "shzNum"></li><li>總價(jià)：{{totalPrice}}</li></ul> </div> <script src = "../node_modules/vue/dist/vue.js"></script> <script type = "text/javascript">let app = new Vue({el: "#app",data: {xyjPrice: 56.73,shzPrice: 47.98,xyjNum: 1,shzNum: 1},computed:{totalPrice() {return this.xyjPrice * this.xyjNum + this.shzPrice * this.shzNum;}})}; </script>效果：只要依賴的屬性發(fā)生變化，就會(huì)重新計(jì)算這個(gè)屬性
偵聽（watch）
watch可以讓監(jiān)控一個(gè)值的變化。從而做出相應(yīng)的反應(yīng)。
<div id = "app"><ul><li>西游記：價(jià)格{{xyjPrice}}，數(shù)量：<input type = "number" v-model = "xyjNum"></li><li>水滸傳：價(jià)格{{shzPrice}}，數(shù)量：<input type = "number" v-model = "shzNum"></li><li>總價(jià)：{{totalPrice}}</li>{{msg}}</ul> </div> <script src = "../node_modules/vue/dist/vue.js"></script> <script type = "text/javascript">letapp=newVue({el: "#app",data: {xyjPrice: 56.73,shzPrice: 47.98,xyjNum: 1,shzNum: 1,msg: ""},computed:{totalPrice() {return this.xyjPrice * this.xyjNum + this.shzPrice * this.shzNum;}},atch: {xyjNum(newVal, oldVal){if(newVal >= 3) {this.msg = "西游記沒有更多庫(kù)存了";this.xyjNum = 3;} else {his.msg="";}}})}; </script>過濾器（filters）
過濾器不改變真正的data，而只是改變渲染的結(jié)果，并返回過濾后的版本。在很多不同的
情況下，過濾器都是有用的，比如盡可能保持API響應(yīng)的干凈，并在前端處理數(shù)據(jù)的格式。
示例：展示用戶列表性別顯示男女
<div id = "app"><table><tr v-for = "user in userList"><td>{{user.id}}</td><td>{{user.name}}</td><!--使用代碼塊實(shí)現(xiàn)，有代碼侵入--><td>{{user.gender === 1 ? "男" : "女"}}</td></tr></table> </div> <script src = "../node_modules/vue/dist/vue.js"></script> <script type = "text/javascript">let app = new Vue({el: "#app",data: {userList:[{id: 1, name: 'jacky', gender: 1},{id: 2, name: 'peter', gender: 0}]})}; </script>局部過濾器
冊(cè)在當(dāng)前vue實(shí)例中，只有當(dāng)前實(shí)例能用
<script type = "text/javascript">let app = new Vue({el: "#app",data: {userList:[{id: 1, name: 'jacky', gender: 1},{id: 2, name: 'peter', gender: 0}]},//filters定義局部過濾器，只可以在當(dāng)前vue實(shí)例中使用filters: {myGenderFilter(gender){return gender === 1 ? '男~' : '女~';})}; </script> {{user.gender | myGenderFilter}}全局過濾器
//在創(chuàng)建Vue實(shí)例之前全局定義過濾器： Vue.filter('capitalize', function(value) {return value.charAt(0).toUpperCase() + value.slice(1) })任何vue實(shí)例都可以使用：
{{user.name | capitalize}}過濾器常用來處理文本格式化的操作。過濾器可以用在兩個(gè)地方：雙花括號(hào)插值和v-bind表達(dá)式
組件化
在大型應(yīng)用開發(fā)的時(shí)候，頁(yè)面可以劃分成很多部分。往往不同的頁(yè)面，也會(huì)有相同的部分。
例如可能會(huì)有相同的頭部導(dǎo)航。
但是如果每個(gè)頁(yè)面都獨(dú)自開發(fā)，這無疑增加了開發(fā)的成本。所以會(huì)把頁(yè)面的不同部分拆分成獨(dú)立的組件，然后在不同頁(yè)面就可以共享這些組件，避免重復(fù)開發(fā)。
在vue里，所有的vue實(shí)例都是組件
例如你可能會(huì)有頁(yè)頭、側(cè)邊欄、內(nèi)容區(qū)、等組件, 每個(gè)組件又包含了其他的導(dǎo)航鏈接、博文之類的組件
全局組件
通過Vue的component方法來定義一個(gè)全局組件。
<div id = "app"><!--使用定義好的全局組件--><counter></counter> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script type = "text/javascript">//定義全局組件，兩個(gè)參數(shù)：1，組件名稱。2，組件參數(shù)Vue.component("counter", {template:'<button v-on:click="count++">你點(diǎn)了我{{count}}次，我記住了.</button>',data(){return{count: 0}}})let app = new Vue({el: "#app"}) </script>- 組件其實(shí)也是一個(gè)Vue實(shí)例，因此它在定義時(shí)也會(huì)接收：data、methods、生命周期函數(shù)等
- 不同的是組件不會(huì)與頁(yè)面的元素綁定，否則就無法復(fù)用了，因此沒有el屬性。
- 但是組件渲染需要html模板，所以增加了template屬性，值就是HTML模板
- 全局組件定義完畢，任何vue實(shí)例都可以直接在HTML中通過組件名稱來使用組件了
- data必須是一個(gè)函數(shù)，不再是一個(gè)對(duì)象。
組件的復(fù)用
定義好的組件，可以任意復(fù)用多次：
<div id = "app"><!--使用定義好的全局組件--><counter></counter><counter></counter><counter></counter> </div>組件的data屬性必須是函數(shù)！
一個(gè)組件的data選項(xiàng)必須是一個(gè)函數(shù)，因此每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷
貝；
否則：
https://cn.vuejs.org/v2/guide/components.html#data-%E5%BF%85%E9%A1%BB%E6%98%AF%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0
局部組件
一旦全局注冊(cè)，就意味著即便以后你不再使用這個(gè)組件，它依然會(huì)隨著Vue的加載而加載。因此，對(duì)于一些并不頻繁使用的組件，會(huì)采用局部注冊(cè)。
先在外部定義一個(gè)對(duì)象，結(jié)構(gòu)與創(chuàng)建組件時(shí)傳遞的第二個(gè)參數(shù)一致：
const counter = {template: '<buttonv-on:click="count++">你點(diǎn)了我{{count}}次，我記住了.</button>',data(){return{count:0}} };然后在Vue中使用它：
let app = new Vue({el: "#app",components:{counter: counter//將定義的對(duì)象注冊(cè)為組件} })- components就是當(dāng)前vue對(duì)象子組件集合。
- 其key就是子組件名稱
- 其值就是組件對(duì)象名
- 效果與剛才的全局注冊(cè)是類似的，不同的是，這個(gè)counter組件只能在當(dāng)前的Vue實(shí)例中使用
簡(jiǎn)寫：
let app = new Vue({el: "#app",components:{counter//將定義的對(duì)象注冊(cè)為組件} })生命周期鉤子函數(shù)
生命周期
每個(gè)Vue實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過一系列的初始化過程：創(chuàng)建實(shí)例，裝載模板，渲染模板等等。Vue為生命周期中的每個(gè)狀態(tài)都設(shè)置了鉤子函數(shù)（監(jiān)聽函數(shù)）。每當(dāng)Vue實(shí)例處于不同的生命周期時(shí)，對(duì)應(yīng)的函數(shù)就會(huì)被觸發(fā)調(diào)用。
生命周期：你不需要立馬弄明白所有的東西。
鉤子函數(shù)
- beforeCreated：在用Vue時(shí)都要進(jìn)行實(shí)例化，因此，該函數(shù)就是在Vue實(shí)例化時(shí)調(diào)用，也可以將他理解為初始化函數(shù)比較方便一點(diǎn)，在Vue1.0時(shí)，這個(gè)函數(shù)的名字就是init。
- created：在創(chuàng)建實(shí)例之后進(jìn)行調(diào)用。
- beforeMount：頁(yè)面加載完成，沒有渲染。如：此時(shí)頁(yè)面還是{{name}}
- mounted：可以將他理解為原生js中的window.οnlοad=function({.,.}),或許大家也在用jquery，所以也可以理解為jquery中的$(document).ready(function(){….})，他的功能就是：在dom文檔渲染完畢之后將要執(zhí)行的函數(shù)，該函數(shù)在Vue1.0版本中名字為compiled。此時(shí)頁(yè)面中的{{name}}已被渲染成張三
- beforeDestroy：該函數(shù)將在銷毀實(shí)例前進(jìn)行調(diào)用。
- destroyed：改函數(shù)將在銷毀實(shí)例時(shí)進(jìn)行調(diào)用。
- beforeUpdate：組件更新之前。
- updated：組件更新之后。
vue模塊化開發(fā)
- npminstallwebpack-g
全局安裝webpack - npminstall-g@vue/cli-init
全局安裝vue腳手架 - 初始化vue項(xiàng)目；
vueinitwebpackappname：vue腳手架使用webpack模板初始化一個(gè)appname項(xiàng)目 - 啟動(dòng)vue項(xiàng)目；
項(xiàng)目的package.json中有scripts，代表能運(yùn)行的命令
npmstart=npmrundev：啟動(dòng)項(xiàng)目
npmrunbuild：將項(xiàng)目打包
模塊化開發(fā)
項(xiàng)目結(jié)構(gòu)
運(yùn)行流程
進(jìn)入頁(yè)面首先加載index.html和main.js文件。
- main.js導(dǎo)入了一些模塊【vue、app、router】，并且創(chuàng)建vue實(shí)例，關(guān)聯(lián)index.html頁(yè)面的<divid=”app”>元素。使用了router，導(dǎo)入了App組件。并且使用標(biāo)簽引用了這個(gè)組件
- 第一次默認(rèn)顯示App組件。App組件有個(gè)圖片和，所以顯示了圖片。但是由于代表路由的視圖，默認(rèn)是訪問/#/路徑（router路徑默認(rèn)使用HASH模式）。在router中配置的/是顯示HelloWorld組件。
- 所以第一次訪問，顯示圖片和HelloWorld組件。
- 嘗試自己寫一個(gè)組件，并且加入路由。點(diǎn)擊跳轉(zhuǎn)。需要使用<router-linkto="/foo">GotoFoo標(biāo)簽
Vue單文件組件
Vue單文件組件模板有三個(gè)部分；
<template><div class="hello"><h1>{{msg}}</h1></div> </template><script>export default{name: 'HelloWorld',data() {return{msg: 'WelcometoYourVue.jsApp'}}} </script><!--Add"scoped"attributetolimitCSStothiscomponentonly--> <style scoped>h1, h2 {font-weight: normal;} </style>- Template：編寫模板
- Script：vue實(shí)例配置
- Style：樣式
導(dǎo)入element-ui快速開發(fā)
1、安裝element-ui：npmielement-ui
2、在main.js中引入element-ui就可以全局使用了。
3、將App.vue改為element-ui中的后臺(tái)布局
4、添加測(cè)試路由、組件，測(cè)試跳轉(zhuǎn)邏輯
(1)、參照文檔el-menu添加router屬性
(2)、參照文檔el-menu-item指定index需要跳轉(zhuǎn)的地址
總結(jié)
- 上一篇： hexo d后 ERROR Deploy
- 下一篇： vue中如何关闭eslint检测？