慕課網(wǎng)Vue基礎(chǔ)知識(shí)學(xué)習(xí)
1.基礎(chǔ)知識(shí)
- 掛載點(diǎn)： el對(duì)應(yīng)的id
- 模板：指的就是掛載點(diǎn)DOM內(nèi)部的標(biāo)簽內(nèi)容拱层，可以在Vue實(shí)例中，設(shè)置template屬性值粟矿；
- 實(shí)例參數(shù)：
-
new Vue({})：Vue實(shí)例調(diào)用磕道，參數(shù)為對(duì)象； - 對(duì)象中的變量：
- 1）el: 賦值為id值讳侨，作為掛載點(diǎn)呵萨，綁定DOM標(biāo)簽中的元素；如
el: "#root"; - 2）template:模板跨跨；賦值為字符串類(lèi)型潮峦，即作為掛載點(diǎn)DOM標(biāo)簽下的內(nèi)容；若不設(shè)置該屬性勇婴，則在掛載點(diǎn)DOM標(biāo)簽下的內(nèi)容忱嘹，作為該實(shí)例模板；
- 3）data：賦值為對(duì)象耕渴，對(duì)象中為變量鍵值對(duì)拘悦；用來(lái)插入到掛載點(diǎn)對(duì)應(yīng)的DOM節(jié)點(diǎn)中；
- 4）methods:賦值為對(duì)象橱脸，對(duì)象中為函數(shù)方法鍵值對(duì)础米；
- 5）computed:計(jì)算屬性分苇，賦值為對(duì)象，對(duì)象中為計(jì)算屬性設(shè)置椭盏；用于對(duì)data中變量進(jìn)行計(jì)算组砚；
- 6）watch:偵聽(tīng)器，賦值為對(duì)象掏颊；監(jiān)聽(tīng)變量的變化糟红，進(jìn)而執(zhí)行對(duì)應(yīng)函數(shù)；
- 7）props:賦值為數(shù)組乌叶；數(shù)組中元素為父級(jí)元素設(shè)置的自定義屬性名盆偿，用于傳遞給子組件參數(shù)；
- 8）components:賦值為對(duì)象准浴；設(shè)置該Vue實(shí)例（組件）的局部組件事扭；局部組件標(biāo)簽名和對(duì)象；
- 1）el: 賦值為id值讳侨，作為掛載點(diǎn)呵萨，綁定DOM標(biāo)簽中的元素；如
-
- 基礎(chǔ)知識(shí)：
- vue數(shù)據(jù)綁定的幾種方式：內(nèi)容綁定乐横；事件綁定求橄；標(biāo)簽屬性綁定；數(shù)據(jù)的雙向綁定葡公；
-
{{msg}}：插值表達(dá)式輸出到DOM標(biāo)簽中罐农，插入變量msg的內(nèi)容； -
v-text="msg"：在該標(biāo)簽中將msg變量的值催什，作為純文本插入其中涵亏； -
v-html="msg"：在該標(biāo)簽中將msg變量的值，作為內(nèi)容插入蒲凶，內(nèi)容保留html樣式气筋； -
v-on:click="fn"或@click="fn"：給對(duì)應(yīng)標(biāo)簽綁定事件，此為綁定click點(diǎn)擊事件旋圆，fn為點(diǎn)擊事件觸發(fā)后執(zhí)行的函數(shù)名宠默；fn定義在實(shí)例參數(shù)methods中；- 注：在webstrom中使用v-on會(huì)報(bào)錯(cuò)灵巧，所以只能用
@click="fn"形式綁定事件光稼；
- 注：在webstrom中使用v-on會(huì)報(bào)錯(cuò)灵巧，所以只能用
- 若想修改DOM中的內(nèi)容，只需改變VUE實(shí)例中變量?jī)?nèi)容孩等，然后VUE會(huì)監(jiān)聽(tīng)到變量的變化，進(jìn)而修改DOM中的內(nèi)容采够；
- 在Vue實(shí)例中使用data中的變量肄方，使用
this.變量名調(diào)用； - 修改實(shí)例data中變量的內(nèi)容蹬癌，使用
this.變量名=xxx权她；即可改變變量?jī)?nèi)容虹茶，進(jìn)而改變DOM中的對(duì)應(yīng)內(nèi)容；
- 在Vue實(shí)例中使用data中的變量肄方，使用
-
v-bind:title="msg"或:title="msg"：標(biāo)簽的屬性綁定隅要，即給該標(biāo)簽綁定title屬性為標(biāo)簽msg變量值蝴罪；- 注：在webstrom中使用v-bind會(huì)報(bào)錯(cuò)，所以只能使用
:title="msg";
- 注：在webstrom中使用v-bind會(huì)報(bào)錯(cuò)，所以只能使用
-
v-model="msg"：數(shù)據(jù)的雙向綁定步清； -
v-show="showto"：控制DOM元素的顯示與否要门；其中，showto為變量廓啊，值為布爾值欢搜，當(dāng)為true時(shí)，會(huì)給標(biāo)簽元素添加一個(gè)display:block屬性谴轮；當(dāng)為false時(shí)炒瘟，會(huì)給標(biāo)簽元素添加一個(gè)display:none屬性；不會(huì)影響DOM樹(shù)結(jié)構(gòu)第步； -
v-if="showto：控制DOM元素的存在與否疮装；其中showto為布爾值，為true時(shí)粘都，標(biāo)簽存在廓推，為false時(shí)，標(biāo)簽刪除驯杜；與v-show不同的是受啥，會(huì)影響DOM結(jié)構(gòu)，會(huì)刪除標(biāo)簽鸽心； -
v-for="(item,index) of ary：控制一組數(shù)據(jù)滚局，通過(guò)這組數(shù)據(jù)循環(huán)顯示在DOM中，根據(jù)數(shù)組的長(zhǎng)度顽频，遍歷標(biāo)簽藤肢，插入DOM結(jié)構(gòu)中；- 注：給遍歷的標(biāo)簽設(shè)置一個(gè)key屬性糯景，會(huì)提升每一項(xiàng)的性能嘁圈；key值都不能相同；
- 驗(yàn)證代碼：
- 數(shù)據(jù)綁定和事件綁定及模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>數(shù)據(jù)綁定和事件綁定及模板</title> <script src="./js/vue.js"></script> </head> <body> <div id="root"> <div v-text="msg"></div> <div v-html="msg"></div> <p @click="handleclick">{{tet}}</p> <input type="text" v-model="title"/> <div :title="title">{{title}}</div> </div> <script> new Vue({ el:"#root", data: { msg:"<span>hello world</span>", tet:"點(diǎn)擊我", title:"這是一個(gè)世界的美好" }, methods:{ handleclick:function () { //點(diǎn)擊事件觸發(fā)蟀淮，修改tet內(nèi)容 this.tet="已點(diǎn)擊" } } }) </script> </body> </html>- 計(jì)算屬性和偵聽(tīng)器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>計(jì)算屬性和偵聽(tīng)器</title> <script src="./js/vue.js"></script> </head> <body> <div id="root"> 姓：<input type="text" v-model="firstName"/> 名：<input type="text" v-model="lastName"/> <p>{{fullName}}</p> <p>{{count}}</p> </div> <script> new Vue({ //掛載點(diǎn) el:"#root", //設(shè)置變量 data:{ firstName:"", lastName:"", count: 0 }, //設(shè)置綁定的事件函數(shù) methods:{ }, //設(shè)置計(jì)算屬性最住； computed:{ fullName:function () { return this.firstName+"和"+this.lastName; } }, //設(shè)置偵聽(tīng)器，偵聽(tīng)變量的變化 watch:{ firstName:function () { this.count++; }, lastName:function () { this.count--; } } }) </script> </body> </html>- 模板指令：v-if,v-show,v-for
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>驗(yàn)證</title> <script src="./js/vue.js"></script> </head> <body> <div id="root"> <div v-if="show">標(biāo)簽的存在和刪除</div> <div v-show="show">標(biāo)簽顯示和隱藏</div> <button @click="handletoggle">toggle</button> <ul> <li v-for="(item,index) of textList" :key="index">{{item}}</li> </ul> </div> <script> new Vue({ el:"#root", data:{ show: true, textList:["meihao","tiankong","nihao"] }, methods:{ handletoggle:function () { this.show=!this.show; } } }) </script> </body> </html> - todoList小實(shí)例
- 代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todoList</title> <script src="./js/vue.js"></script> <style> html,body{ font-size: 30px; } </style> </head> <body> <div id="root"> <div> <input type="text" v-model="inputValue"/> <button @click="btnClick">添加到列表顯示</button> </div> <ul> <li v-for="(item, index) of listAry" :key="index">{{item}}</li> </ul> </div> <script> new Vue({ el: "#root", data:{ inputValue:"", listAry:[] }, methods:{ btnClick:function () { this.listAry.push(this.inputValue); this.inputValue=""; } } }) </script> </body> </html>
2.組件與實(shí)例
- 組件和實(shí)例的關(guān)系
- 關(guān)系：每一個(gè)組件都是一個(gè)Vue實(shí)例怠惶，一個(gè)Vue項(xiàng)目是通過(guò)多個(gè)Vue實(shí)例組成的涨缚；
- 在局部組件中，可以設(shè)置methods,computed等屬性策治，即與Vue實(shí)例中的屬性設(shè)置相同脓魏；
- 組件的創(chuàng)建和調(diào)用
- 全局組件的定義：
- 定義：調(diào)用Vue類(lèi)的靜態(tài)方法component兰吟，創(chuàng)建全局組件
- 代碼
Vue.component("todo-list",{ template:"<li>xxx</li>" })；
- 代碼
- 調(diào)用：使用的todo-list標(biāo)簽插入DOM使用茂翔；
- 定義：調(diào)用Vue類(lèi)的靜態(tài)方法component兰吟，創(chuàng)建全局組件
- 局部組件
- 定義：通過(guò)創(chuàng)建變量混蔼，變量值為對(duì)象，對(duì)象中設(shè)置template屬性珊燎，作為局部組件的DOM模板惭嚣；
- 調(diào)用：局部組件要在vue實(shí)例中調(diào)用，必須在實(shí)例中進(jìn)行聲明注冊(cè)俐末；即在components屬性中設(shè)置局部組件調(diào)用的標(biāo)簽名料按，注：標(biāo)簽名不能大寫(xiě)；
- 代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>組件的定義和調(diào)用</title> <script src="./js/vue.js"></script> <style> html,body{ font-size: 30px; } </style> </head> <body> <div id="root"> <div> <input type="text" v-model="inputValue"/> <button @click="btnClick">添加到列表顯示</button> </div> <ul> <!--全局組件的調(diào)用--> <todo-item></todo-item> <!--局部組件的調(diào)用--> <do-list></do-list> </ul> </div> <script> //全局組件定義 Vue.component("todo-item",{ template:"<li>meihao</li>" }); //局部組件定義卓箫，局部組件使用父組件傳遞的參數(shù) var sonItem={ template:"<li>meili</li>" }; //實(shí)例創(chuàng)建 new Vue({ el: "#root", //局部組件的聲明载矿，聲明的name不能大寫(xiě)，加引號(hào)烹卒； components:{ "do-list":sonItem }, data:{ inputValue:"", listAry:[] }, methods:{ btnClick:function () { this.listAry.push(this.inputValue); this.inputValue=""; } } }) </script> </body> </html> - 全局組件的定義：
- 父組件與子組件之間傳遞數(shù)據(jù)
- 父組件向子組件傳遞數(shù)據(jù)：通過(guò)在子組件上設(shè)置自定義屬性闷盔，來(lái)傳遞參數(shù)；
- 父組件：定義傳遞給子組件的變量參數(shù)旅急；
- 子組件：
- 子組件標(biāo)簽中設(shè)置自定義屬性逢勾，屬性值為父組件傳遞給子組件的參數(shù)值；
- 子組件實(shí)例對(duì)象中設(shè)置props屬性藐吮，屬性值為數(shù)組溺拱，數(shù)組元素為子組件標(biāo)簽上設(shè)置的自定義屬性名；
- 在子組件template模板中谣辞，在標(biāo)簽中迫摔，通過(guò)
{{}}插入props接收的自定義屬性名，進(jìn)而獲取父級(jí)組件傳遞的參數(shù)泥从； - 設(shè)置了props屬性后句占，相當(dāng)于給子組件設(shè)置了兩個(gè)data變量；可以在對(duì)象中通過(guò)
this.自定義屬性名獲取傳遞的參數(shù)躯嫉；但是纱烘，若修改傳遞的參數(shù)，會(huì)報(bào)錯(cuò)祈餐；
- 子組件向父組件傳遞數(shù)據(jù)參數(shù)
- 子組件通過(guò)訂閱發(fā)布的形式向父組件傳遞數(shù)據(jù)擂啥；
- 父組件通過(guò)給子組件標(biāo)簽設(shè)置自定義屬性，屬性值為函數(shù)體帆阳；
- 子組件通過(guò)事件觸發(fā)后啤它，在函數(shù)體內(nèi)調(diào)用執(zhí)行父組件傳遞來(lái)的函數(shù)體，并向其傳遞子組件中的數(shù)據(jù)，進(jìn)而在父組件中獲取到該數(shù)據(jù)变骡；然后進(jìn)行其他操作；
- 代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父組件與子組件之間傳遞參數(shù)實(shí)例</title> <script src="./js/vue.js"></script> <style> html,body{ font-size: 30px; } </style> </head> <body> <div id="root"> <!--root掛載點(diǎn)下的所有標(biāo)簽芭逝，作為父級(jí)組件的模板--> <div> <input type="text" v-model="inputValue"/> <button @click="btnClick">添加到列表顯示</button> </div> <ul> <!--其中todo-item作為子組件塌碌，綁定標(biāo)簽自定義屬性，傳遞父級(jí)組件變量item--> <todo-item v-for="(item,index) of listAry" :key="index" :content="item" :index="index" :sondata="sonClick"></todo-item> </ul> </div> <script> Vue.component("todo-item",{ props: ["content","index","sondata"], //在子組件模板中調(diào)用content旬盯，即獲取父級(jí)組件傳遞的參數(shù) //在子組件模板中綁定自己的click事件台妆，觸發(fā)后，執(zhí)行父組件傳遞的函數(shù)體胖翰，并傳遞數(shù)據(jù)接剩； template:"<li @click='deleteData'>{{content}}</li>", methods:{ deleteData:function () { this.sondata(this.index); } } }); new Vue({ el: "#root", data:{ inputValue:"", listAry:[] }, methods:{ btnClick:function () { this.listAry.push(this.inputValue); this.inputValue=""; }, //創(chuàng)建父組件向子組件傳遞的函數(shù)體，接收子組件傳遞的數(shù)據(jù) sonClick:function (index) { this.listAry.splice(index,1); } } }) </script> </body> </html> - 父組件向子組件傳遞數(shù)據(jù)：通過(guò)在子組件上設(shè)置自定義屬性闷盔，來(lái)傳遞參數(shù)；
Vue-cli插件
- Vue-cli(2.x)舊版安裝與使用
- 前提：下載node.js
- 命令：
- 1）全局安裝：
npm install --global vue-cli;下載的版本為舊版本2.x萨咳；- 卸載：
npm uninstall -g vue-cli;
- 卸載：
- 2）創(chuàng)建一個(gè)基于webpack模板的新項(xiàng)目：
vue init webpack my-project - 3）安裝完畢后懊缺，進(jìn)入創(chuàng)建的項(xiàng)目文件：
cd my-project - 4）運(yùn)行服務(wù)器：
npm run dev
- 1）全局安裝：
- 注意：創(chuàng)建webpack模板項(xiàng)目時(shí)，不要使用eslint規(guī)則校驗(yàn)代碼培他，否則會(huì)出警告鹃两；
- 錯(cuò)誤鏈接：ESlint校驗(yàn)的錯(cuò)誤文檔;
- Vue-cli的全局樣式和局部樣式
- 在vue的組件中，style標(biāo)簽后設(shè)置scoped局部作用域標(biāo)識(shí)符舀凛，為局部樣式俊扳，代表指作用于該組件的樣式；如果去掉標(biāo)識(shí)符猛遍，為全局樣式馋记，則作用于所有組件，包括父級(jí)組件懊烤；
- 參考鏈接：慕課網(wǎng)vue2.5入門(mén)知識(shí)解讀
