1.認(rèn)識(shí)Vue

官網(wǎng)地址：https://v2.cn.vuejs.org/v2/guide/

Vue.js 是一套構(gòu)建用戶(hù)界面的漸進(jìn)式框架。

Vue 2 是在2016年發(fā)布使用，2020是 vue3 才剛發(fā)布，時(shí)隔一年左右就已經(jīng)將 vue3 作為了默認(rèn)版本

尤雨溪，Vue.js和Vite的作者，HTML5版Clear的打造人，獨(dú)立開(kāi)源開(kāi)發(fā)者。

曾就職于Google Creative Labs和Meteor Development Group。

由于工作中大量接觸開(kāi)源的JavaScript項(xiàng)目，最后自己也走上了開(kāi)源之路，現(xiàn)全職開(kāi)發(fā)和維護(hù)Vue.js。

尤雨溪畢業(yè)于上海復(fù)旦附中，在美國(guó)完成大學(xué)學(xué)業(yè)

尤雨溪大學(xué)專(zhuān)業(yè)并非是計(jì)算機(jī)專(zhuān)業(yè)，在大學(xué)期間他學(xué)習(xí)專(zhuān)業(yè)是室內(nèi)藝術(shù)和藝術(shù)史

引入VUE：<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>，，最好下載下來(lái)以文件路徑引入，會(huì)受到網(wǎng)絡(luò)因素的影響。

為什么要使用vue？

DOM操作比較耗費(fèi)性能，是前端的性能瓶頸，而vue幾乎沒(méi)有DOM操作，

• 虛擬DOM ：性能高
  • 數(shù)據(jù)驅(qū)動(dòng)視圖，在html中操作變量。找真實(shí)DOM和虛擬DOM之間的差別，只更新有差別的地方，使用diff算法比較很快，不怎么耗費(fèi)性能，而不是全部做修改
• 組件化：作用域彼此獨(dú)立，組件化便于復(fù)用
• 數(shù)據(jù)與視圖分離

2.基本語(yǔ)法

<div id="app">{{ message }} {{info}}
</div><script>let app = new Vue({//配置項(xiàng)el: '#app',//掛載點(diǎn)data: {message: 'Hello',info:"vue"}})
</script>

el：掛載點(diǎn)，使用div作為vue掛載點(diǎn)，將來(lái)的vue項(xiàng)目要渲染到哪里。

data：以對(duì)象的形式存儲(chǔ)數(shù)據(jù)，

在html中寫(xiě)的是變量，相應(yīng)的數(shù)據(jù)存在data中，之后如果需要修改數(shù)據(jù)，不需要做DOM操作，只需要修改變量即可。

雙大括號(hào)插值表達(dá)式：雙大括號(hào)其實(shí)提供了一個(gè)js執(zhí)行環(huán)境，可以寫(xiě)任意js表達(dá)式，不能寫(xiě)語(yǔ)句，不識(shí)別html結(jié)構(gòu)。

一個(gè)元素中可以有多個(gè)插值表達(dá)式

數(shù)據(jù)統(tǒng)一存放在data中

3.指令

注意：所有指令后面的引號(hào)是提供一個(gè)js執(zhí)行環(huán)境的，不是字符串的引號(hào)。

1. 不帶標(biāo)簽的只有內(nèi)容的用雙大括號(hào)插值表達(dá)式{{}};（不用v-text）
2. 內(nèi)容帶標(biāo)簽的用v-html;
3. 綁定屬性，屬性是變化的，注意class和style的特殊性
4. 綁定事件
5. v-if v-else 條件渲染 頻繁創(chuàng)建與刪除元素
6. v-show 顯示與隱藏 一開(kāi)始就會(huì)創(chuàng)建出來(lái)元素，再做顯示隱藏的修改
7. v-for 循環(huán)創(chuàng)建數(shù)目不定的元素 注意要用 :key=“index”
8. v-model 表單的雙向綁定

v-bind:屬性名="數(shù)據(jù)"
簡(jiǎn)寫(xiě)  :屬性名="屬性值"
如    :class="{'act':true}"

v-on:事件名="函數(shù)名"
簡(jiǎn)寫(xiě)：  @事件名="函數(shù)名"
如     @click="change"

在JQuery中的思想是先獲取元素做DOM操作，而在Vue中是直接操作數(shù)據(jù)。

v-html

把一段html結(jié)構(gòu)渲染到它所綁定的元素里面

如果元素本身內(nèi)部有內(nèi)容，會(huì)被指令中的內(nèi)容覆蓋掉

v-text

把一段文本內(nèi)容渲染到它所綁定的元素中

v-bind

動(dòng)態(tài)綁定屬性，所有寫(xiě)在開(kāi)始標(biāo)簽里的都是屬性。

v-bind:屬性名="數(shù)據(jù)"  
常用簡(jiǎn)寫(xiě)  :屬性名="數(shù)據(jù)"

<div id="app"><div :id='a' :class='b'>{{msg}}</div></div><script>let app=new Vue({el:"#app",data:{a:"box",b:"title",msg:"Hello",info:"<h1>world</h1>"}})
</script>

v-bind的特殊情況

• class

 <!-- 方式一：綁定字符串 一個(gè)class名 -->
<div id="app"><h1 :class="myClass">{{msg}}</h1></div><script>let app = new Vue({el: "#app",data: {myClass: "title",msg: "hello",}})
</script><!-- 方式二同方式三：直接綁定對(duì)象內(nèi)容 多個(gè)class名 -->
<div id="app"><h1 :class="{aa:flag,bb:false,cc:true,dd:false}">{{msg}}</h1></div><script>let app = new Vue({el: "#app",data: {myClass: "title",flag: true,msg: "hello",}})
</script><!-- 方式三：綁定對(duì)象 多個(gè)class名 -->
<div id="app"><h1 :class="obj">{{msg}}</h1></div><script>let app = new Vue({el: "#app",data: {myClass: "title",flag: true,msg: "hello",obj: { aa: true, bb: false, cc: true, dd: false }}})
</script><!-- 方式四：綁定數(shù)組 多個(gè)class名 -->
<div id="app"><h1 :class="['aa','bb',myClass]"><!-- 或者 <h1 :class="[obj,obj2]"> <h1 :class="arr"> <h1 :class="arr2"> -->{{msg}}</h1></div><script>let app = new Vue({el: "#app",data: {myClass: "title",flag: true,msg: "hello",obj: { aa: true, bb: false, cc: true, dd: false },obj2: { ee: true },arr: ['aa', 'bb'],arr2:[ { aa: true, bb: false, cc: true, dd: false },{ ee: true },]}})
</script>

- 可以綁定一個(gè)字符串，字符串名就是class名
- 可以綁定一個(gè)對(duì)象，對(duì)象的屬性名就是class名，對(duì)象的屬性值是布爾，代表是否有這個(gè)class
- 可以綁定一個(gè)數(shù)組，數(shù)組里是變量名，變量值就是class名字

• style：在DOM操作中得到的樣式就是一個(gè)對(duì)象，注意:寫(xiě)樣式的時(shí)候樣式的屬性值要加引號(hào)，并且屬性名是有多個(gè)單詞組成的要寫(xiě)成駝峰式。

<!-- 方式一同方式二：直接綁定對(duì)象內(nèi)容 一個(gè)樣式 -->
<div id="app"><h1 :style="{width:'200px',height:'200px',backgroundColor:bgColor}">{{msg}}</h1></div><script>let app=new Vue({el:"#app",data:{msg:"hello",bgColor:"red"}})
</script><!-- 方式二：綁定對(duì)象，一個(gè)樣式 -->
<div id="app"><h1 :style="cssStyle">{{msg}}</h1></div><script>let app=new Vue({el:"#app",data:{msg:"hello",cssStyle:{width:'200px',height:'200px',backgroundColor:'red'}}})
</script><!-- 方式三：綁定數(shù)組，多個(gè)樣式 -->
<div id="app"><h1 :style="[cssStyle,cssStyle2]"><!-- 或者 <h1 :style="cssStyle3"> -->{{msg}}</h1></div><script>let app=new Vue({el:"#app",data:{msg:"hello",cssStyle:{width:'200px',height:'200px',backgroundColor:'red'},cssStyle2:{color:'blue',fontSize:'35px'},cssStyle3:[{width:'200px',height:'200px',backgroundColor:'red'},{color:'blue',fontSize:'35px'}]}})
</script>

- 綁定到一個(gè)對(duì)象，對(duì)象就是樣式對(duì)象
- 綁定到一個(gè)數(shù)組，就是綁定到多個(gè)樣式對(duì)象

v-on

v-on:事件名="函數(shù)名"    
縮寫(xiě)為 @事件名=“函數(shù)”

函數(shù)不放在data中，放在另一個(gè)配置項(xiàng)methods中。

函數(shù)如果有參數(shù)，在指令里面直接加括號(hào)寫(xiě)參數(shù)就行了，沒(méi)有參數(shù)就不需要加括號(hào)。

關(guān)于事件對(duì)象：想要既拿到事件對(duì)象又要自己的參數(shù)，（只有事件觸發(fā)的時(shí)候才會(huì)有事件對(duì)象），用匿名函數(shù)再包一層，在匿名函數(shù)里面執(zhí)行。

@事件名="(e)=>{fn(e,實(shí)參)}"

<!-- 使用例子 -->
<div id="app"><!-- <button @click="fn">按鈕</button> 輸出：2--><!-- <button @click="fn2('你好')">按鈕</button>   輸出：你好 --><button @click="(e)=>{fn3(e,'hello')}">按鈕</button><!-- 輸出：事件對(duì)象 hello -->
</div><script>new Vue({el: "#app",data: {msg: "這是我的第一個(gè)vue程序！"},methods: {fn() {console.log(2)},fn2(m) {//輸出傳的參數(shù)console.log(m)},fn3(e, m) {//輸出帶有事件對(duì)象的參數(shù)console.log(e, m)}}})
</script>

案例1：點(diǎn)擊按鈕更改h1的內(nèi)容。

 <!-- 點(diǎn)擊按鈕，h1的內(nèi)容發(fā)生更換 -->
<div id="app"><h1>{{msg}}</h1><button @click="fn">按鈕</button></div><script>new Vue({el: "#app",data: {msg: "這是我的第一個(gè)vue程序",},methods: {fn() {this.msg = "我是新的數(shù)據(jù)。"}}})
</script>

案例2：點(diǎn)擊按鈕控制數(shù)據(jù)的顯示與隱藏。

<style>#title {width: 200px;height: 200px;background-color: red;}
</style><div id="app"><div id="title" :style="{display:show}"></div><button @click="toggle">切換</button></div><script>new Vue({el: "#app",data: {show: "block"},methods: {toggle() {//使用三目運(yùn)算符 判斷show的值this.show = (this.show === "block" ? "none" : "block")}}})
</script>

按鍵修飾符：常用在表單input中。

在監(jiān)聽(tīng)鍵盤(pán)事件時(shí)，我們經(jīng)常需要檢查詳細(xì)的按鍵。Vue 允許為 v-on 在監(jiān)聽(tīng)鍵盤(pán)事件時(shí)添加按鍵

<input @keyup.enter="submit">
<input @keyup.down="onPageDown">

為了在必要的情況下支持舊瀏覽器，Vue 提供了絕大多數(shù)常用的按鍵碼的別名：

• .enter
• .tab
• .delete (捕獲“刪除”和“退格”鍵)
• .esc
• .space
• .up
• .down
• .left
• .right

v-if v-else v-else-if

類(lèi)似于JQuery中的show()和hide()

控制整個(gè)元素是否渲染，不是基于樣式的， 是真正的條件渲染，滿(mǎn)足條件就創(chuàng)建出來(lái)，不滿(mǎn)足條件就刪掉。

 <h1 v-if=" grades=='A' ">優(yōu)秀</h1><h1 v-else-if="grades=='B'">良好</h1><h1 v-else-if="grades=='C'">及格</h1><h1 v-else>不及格</h1>

注意，使用v-if的時(shí)候

• v-if的元素是和v-else必須是同級(jí)
• v-if的元素和v-else的元素必須緊挨著，中間不允許夾雜其他元素
• 適合用于多選一的情況

v-show顯示與隱藏

基于樣式的切換，而并不是把元素刪掉了。

案例2：點(diǎn)擊按鈕控制數(shù)據(jù)的顯示與隱藏。

<div id="app"><div id="title" v-show="show"></div><button @click="toggle">切換</button></div><script>new Vue({el: "#app",data: {show: true},methods: {toggle() {this.show = !this.show}}})
</script>

v-if 與 v-show的性能對(duì)比

v-if 是“真正”的條件渲染，因?yàn)樗鼤?huì)確保在切換過(guò)程中條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件適當(dāng)?shù)乇讳N(xiāo)毀和重建。

v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開(kāi)始渲染條件塊。

相比之下，v-show 就簡(jiǎn)單得多——不管初始條件是什么，元素總是會(huì)被渲染，并且只是簡(jiǎn)單地基于 CSS 進(jìn)行切換。

一般來(lái)說(shuō)，v-if 有更高的切換開(kāi)銷(xiāo)，需要頻繁的創(chuàng)建與刪除元素；而 v-show 有更高的初始渲染開(kāi)銷(xiāo)，不管是否需要顯示都先創(chuàng)建出來(lái)再改樣式，這樣在大量數(shù)據(jù)需要處理的時(shí)候就回產(chǎn)生巨大的開(kāi)銷(xiāo)。因此，如果需要非常頻繁地切換，則使用 v-show 較好，不需要反復(fù)的刪除和創(chuàng)建元素；如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好。

v-for 元素個(gè)數(shù)是變量

1.基本用法

將v-for放在元素的開(kāi)始標(biāo)簽中，代表的是循環(huán)創(chuàng)建多個(gè)該元素，刪除和創(chuàng)建元素時(shí)就變?yōu)榱诵薷臄?shù)組和對(duì)象的內(nèi)容。

• 可以循環(huán)數(shù)組 (value,index)
• 可以循環(huán)對(duì)象 (value,key,index)
• 可以循環(huán)整數(shù) item

<!-- v-for使用方法 -->
<div id="app"><!-- 1 循環(huán)數(shù)組 --><select><option v-for="(item,index) in provinces">{{index}} {{item}}<!-- item值  index角標(biāo) --></option></select><!-- 2 循環(huán)對(duì)象 --><select><option v-for="(item,key,index) in obj">{{index}} {{key}}:{{item}}<!-- item值 key屬性名 index循環(huán)次數(shù) --></option></select><!-- 循環(huán)整數(shù) --><div v-for="(item,index) in 10" :key="index">{{item}}<!-- 輸出1-10的整數(shù) --></div></div><script>new Vue({el: "#app",data: {provinces: ["山東省", "河北省", "河南省", "山西省"],obj: { name: "張三", age: 18, gender: "boy" }},})
</script>

建議盡可能在使用 v-for 時(shí)提供 key attribute

除非遍歷輸出的 DOM 內(nèi)容非常簡(jiǎn)單，或者是刻意依賴(lài)默認(rèn)行為以獲取性能上的提升。

注意：v-if和v-for盡量避免同時(shí)使用，可以將v-if套在v-for的外層使用：因?yàn)関-for的優(yōu)先級(jí)比v-if更高，當(dāng)v-if為false時(shí)會(huì)先執(zhí)行v-for創(chuàng)建元素，再判斷v-if為false刪除元素。

<template></template>標(biāo)簽也是一個(gè)容器 ，在需要的時(shí)候可以發(fā)揮作用，但在編譯時(shí)不存在了，可以在需要一個(gè)容器但是與頁(yè)面結(jié)構(gòu)無(wú)關(guān)的時(shí)候使用。

<div id="app"><template v-show="show"><div v-for="i in 9">{{i}}</div></template><!-- 這里使用<template></template>標(biāo)簽是因?yàn)槿绻褂胐iv標(biāo)簽會(huì)產(chǎn)生一個(gè)與頁(yè)面結(jié)構(gòu)無(wú)關(guān)的標(biāo)簽 -->
</div><script>new Vue({el:"#app",data:{show:true}})
</script>

key的作用

為什么需要key？

<div id="app"><input type="text" v-if="see" key="a"/><input type="password" v-else key="b"/><button @click="change">更改</button><!-- <button @click="see=!see">更改</button> -->
</div><script>
new Vue({el: '#app',data: {see:true},methods:{change(){this.see=false}}
})
</script><!-- 實(shí)現(xiàn)效果：先顯示type="text"的輸入框，點(diǎn)擊更改后顯示為type="password"的輸入框，但是原來(lái)text中的內(nèi)容還會(huì)在password中，因?yàn)関ue是只更改不一樣的部分，二者都是輸入框，只是類(lèi)型不一樣，vue只做了更改類(lèi)型的操作 這時(shí)就可以給兩個(gè)input不一樣的key屬性，當(dāng)發(fā)現(xiàn)key不一樣時(shí)會(huì)做刪除添加元素，而不進(jìn)行復(fù)用。	
-->

盡量不要使用索引值index作key值，一定要用唯一標(biāo)識(shí)的值，如id等。因?yàn)槿粲脭?shù)組索引index為key，當(dāng)向數(shù)組中指定位置插入一個(gè)新元素后，因?yàn)檫@時(shí)候會(huì)重新更新index索引，對(duì)應(yīng)著后面的虛擬DOM的key值全部更新了，這個(gè)時(shí)候還是會(huì)做不必要的更新，就像沒(méi)有加key一樣，因此index雖然能夠解決key不沖突的問(wèn)題，但是并不能解決復(fù)用的情況。如果是靜態(tài)數(shù)據(jù)，用索引號(hào)index做key值是沒(méi)有問(wèn)題的。

響應(yīng)式原理

由于 JavaScript 的限制，Vue 不能檢測(cè)數(shù)組和對(duì)象的變化 。

在實(shí)際工作中，使用的Vue.set()只更新一個(gè)的情況很少，一般都是直接將數(shù)組和對(duì)象整體進(jìn)行替換。

對(duì)于對(duì)象來(lái)說(shuō):

property 必須在 data 對(duì)象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的，只能做修改，不能添加。

對(duì)于已經(jīng)創(chuàng)建的實(shí)例，Vue 不允許動(dòng)態(tài)添加根級(jí)別的響應(yīng)式 property。

//想要響應(yīng)式的添加屬性，可以使用如下方法嵌套對(duì)象添加響應(yīng)式 property
Vue.set(object, propertyName, value)
//哪個(gè)對(duì)象  想要增加哪個(gè)屬性名 屬性值this.obj.age = 58//age屬性已經(jīng)存在 ，修改屬性值Vue.set(this.obj, "salary", 2500)//salary屬性不存在，添加屬性

對(duì)于數(shù)組來(lái)說(shuō):

直接通過(guò)角標(biāo)賦值是無(wú)法設(shè)置為響應(yīng)式的。

直接修改長(zhǎng)度也是無(wú)法設(shè)置為響應(yīng)式的。

方法一：需要修改數(shù)組的某一項(xiàng)時(shí)，不是僅替換該項(xiàng)，而是將整個(gè)數(shù)組替換掉，需要使用深復(fù)制的方法(擴(kuò)展運(yùn)算符簡(jiǎn)單)。（該方法需要解決深復(fù)制的問(wèn)題，不如方法二簡(jiǎn)單）

 //search是數(shù)組變量let arr = [...this.search]arr[2] = 8this.search = arr

方法二： 只修改數(shù)組的某一項(xiàng)，比方法一更簡(jiǎn)單，不用深復(fù)制。

//只想修改數(shù)組的某一項(xiàng)，可以使用如下方法為數(shù)組添加響應(yīng)式 property
Vue.set(vm.items, indexOfItem, newValue)
//哪個(gè)數(shù)組 數(shù)組的第幾項(xiàng)  新值Vue.set(this.search,1,8);

總結(jié)：

數(shù)組：法一：完整替換；

		法二：深復(fù)制.

let narr=[...arr]
narr[0]="w"
state.arr=narr

	法三：set().

對(duì)象：法一：完整替換；

      法二：深復(fù)制，相同屬性名后面的屬性值覆蓋前面的屬性值。

state.person={...person,salary:8000}

	法三：set()

數(shù)組更新檢測(cè)

Vue 將被偵聽(tīng)的數(shù)組的變更方法進(jìn)行了包裹，所以它們也將會(huì)觸發(fā)視圖更新。這些被包裹過(guò)的方法包括：

• push()
• pop()
• shift()
• unshift()
• splice() 刪除或添加數(shù)組的某一項(xiàng)
• sort()
• reverse()

v-model 表單雙向綁定

基本使用

其他的vue都是數(shù)據(jù)驅(qū)動(dòng)視圖，雙向綁定既可以數(shù)據(jù)驅(qū)動(dòng)視圖，又可以視圖驅(qū)動(dòng)數(shù)據(jù)，這樣在vue中想要拿到表單的value值只需要取變量即可，不像之前的js中還得等到用戶(hù)有輸入onblur了才能拿到值，在vue中直接隨時(shí)就可以拿到。變量的初始值可以設(shè)置為""。

表單的雙向綁定，v-model默認(rèn)綁定到表單的value屬性。

• 輸入框input：直接綁定到值value，變量初始值可以設(shè)置為"".
• 多選框checkbox： 單個(gè)多選框，綁定到布爾值，若變量初始值設(shè)置為true，則默認(rèn)勾選了；多個(gè)復(fù)選框，綁定的是value的數(shù)組，變量的初始值可以設(shè)置為[]，若變量中的初始值有一個(gè)默認(rèn)的值[“打籃球”]，那么該value值對(duì)應(yīng)的多選框會(huì)被默認(rèn)選中。單個(gè)多選框常用于注冊(cè)時(shí)的確認(rèn)協(xié)議，直接獲取綁定的變量值是否為true/flase來(lái)判斷是否選中.多個(gè)多選框判斷綁定的變量值中是否有某個(gè)值來(lái)判斷是否選中了該項(xiàng)。
• 單選框radio：直接綁定到值value。若將變量的初始值設(shè)置為某個(gè)值，則顯示出來(lái)的是默認(rèn)選中該項(xiàng)。
• 下拉選擇框select：直接綁定到值value.
• 雙向綁定也可以綁定到數(shù)組的某一項(xiàng)或者對(duì)象的某一項(xiàng)，讓該項(xiàng)的內(nèi)容給到表單的value.

案例1：todolist待辦事項(xiàng)。

 <!-- 1.在工作中只要遇見(jiàn)了表單一定會(huì)加雙向綁定的。2.給每個(gè)li綁定點(diǎn)擊事件，點(diǎn)誰(shuí)誰(shuí)刪除.splice刪除哪一項(xiàng)時(shí)index剛好與之對(duì)應(yīng)想要在方法中使用index，可以將index作為參數(shù)在函數(shù)中傳遞-->
<div id="app"><input type="text" placeholder="請(qǐng)輸入您的待辦事項(xiàng)" v-model="todo" @keyup.enter="add"><button @click="add">添加</button><div><ul><li v-for="(item,index) in list" :key="index" @click="remove(index)">{{item}}</li></ul></div></div><script>new Vue({el: "#app",data: {todo: "",list: [],},methods: {add() {this.list.push(this.todo)this.todo = ""},remove(index) {this.list.splice(index, 1)}}})
</script>

案例2：使用vue實(shí)現(xiàn)導(dǎo)航條高亮效果

<style>* {padding: 0;margin: 0;}.clear {clear: both;}.tab {float: left;width: 60px;height: 30px;line-height: 30px;text-align: center;margin-right: 15px;background-color: gray;color: white;}.active {background-color: pink;color: blue;}
</style><body><!-- 作業(yè)：導(dǎo)航條導(dǎo)航條的內(nèi)容是通過(guò)列表動(dòng)態(tài)渲染的 list:["首頁(yè)","特惠","資訊","游記","地區(qū)"]點(diǎn)誰(shuí)誰(shuí)高亮 背景色和文字顏色 其余的的恢復(fù)默認(rèn)思路：我自己不知道怎么只選中一個(gè)div是否應(yīng)該存在.act 使用一個(gè)變量flag，其初始值為0，默認(rèn)選中第一個(gè)導(dǎo)航條，當(dāng)點(diǎn)擊時(shí)就將index賦值給flag，判斷flag與index是否相等來(lái)決定是否要有.act--><div id="app"><div class="tab" v-for="(item,index) in list" :key="index" @click="change(index)" :class="{'active':index===flag}"><!-- 注意：這里的類(lèi)名要加上引號(hào) change()傳遞index參數(shù)-->{{item}}</div><div class="clear"></div></div><script>new Vue({el: "#app",data: {list: ["首頁(yè)", "特惠", "資訊", "游記", "地區(qū)"],flag: 0, //當(dāng)前點(diǎn)的項(xiàng)的序號(hào)},methods: {change(index) {this.flag = index}}})</script></body>

修飾符

<!-- 在“change”時(shí)而非“input”時(shí)更新 在失去焦點(diǎn)時(shí)更新，而不是每次都更新-->
<input v-model.lazy="msg">
<!--表單的數(shù)據(jù)默認(rèn)是字符串類(lèi)型的，如果想自動(dòng)將用戶(hù)的輸入值轉(zhuǎn)為數(shù)值類(lèi)型，可以給 v-model 添加 number 修飾符：-->
<input v-model.number="num">
<!--如果要自動(dòng)過(guò)濾用戶(hù)輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符：-->
<input v-model.trim="msg">

4.methods 配置項(xiàng)

方法的集合，鼓勵(lì)使用es6的形式。

5.computed 計(jì)算屬性 配置項(xiàng)

在后端一般不存儲(chǔ)字符串，而是存儲(chǔ)數(shù)字，占內(nèi)存小，使用數(shù)字代表其中字符串的含義，如1代表男，2代表女，這樣從后端拿回到的數(shù)據(jù)就是1 2，而我們要渲染到頁(yè)面中的是字符串，這時(shí)我們就需要將數(shù)數(shù)字轉(zhuǎn)換成對(duì)應(yīng)的字符串。

<h1>性別：{{gender==1?"男":"女"}}</h1>這樣可以解決問(wèn)題。但是不這么用，因?yàn)檫@樣會(huì)將大量的邏輯寫(xiě)在html中，結(jié)構(gòu)很亂，影響頁(yè)面的整潔性，而且對(duì)于多步驟的運(yùn)算實(shí)現(xiàn)不了。

<h1>>性別：{{sex()}}</h1> sex(){return gender==1?"男":"女"}，這樣將判斷寫(xiě)在函數(shù)中，調(diào)用函數(shù)也是可以實(shí)現(xiàn)的。但是也不這么用，因?yàn)檫@樣如果修改另一個(gè)與之不相關(guān)的數(shù)據(jù)內(nèi)容，而調(diào)用函數(shù)的數(shù)據(jù)并沒(méi)有要改變，但是方法還會(huì)再執(zhí)行一次，影響性能。（vue是數(shù)據(jù)驅(qū)動(dòng)視圖的，只要改了數(shù)據(jù)，視圖就需要重新渲染，方法就需要重新調(diào)用）

 <!--計(jì)算屬性的用法：-->
<div id="app"><h1>{{sex}}</h1><!-- 這里調(diào)用計(jì)算屬性不加括號(hào)，是屬性不是函數(shù) -->
</div><script>new Vue({el: "#app",data: {gender: 2},computed: {sex() {return this.gender === 1 ? "男" : "女"}}})
</script>

1. 計(jì)算屬性是個(gè)函數(shù)，要求一定有返回值。
2. 不能和data中的數(shù)據(jù)重名。
3. 計(jì)算屬性是基于緩存的，只有在他計(jì)算依賴(lài)的項(xiàng)有變化的時(shí)候他才會(huì)重新運(yùn)算，否則不運(yùn)算。
   1. 依賴(lài)：此函數(shù)中用到的數(shù)據(jù)有變化，那么計(jì)算屬性都會(huì)重新運(yùn)行。
4. 計(jì)算屬性最終的結(jié)果是個(gè)屬性，調(diào)用的時(shí)候不能加括號(hào)，在vue內(nèi)部自動(dòng)幫忙調(diào)用了。
5. 計(jì)算屬性也是可以傳參的，只需要讓返回值是個(gè)函數(shù)即可，最終用的是里層的函數(shù) 。
6. 計(jì)算屬性中除了可以使用data中的數(shù)據(jù)，也可以使用其他的計(jì)算屬性和props的內(nèi)容。

<!-- 計(jì)算屬性傳參數(shù)，return一個(gè)函數(shù)，將操作寫(xiě)在return的函數(shù)中即可 -->
<h1>{{order(2)}}</h1><script>new Vue({el:data:methods:computed:{order(){return (status)=>{console.log(status)}}}})
</script>

計(jì)算屬性跟函數(shù)的區(qū)別？(面試題)

1.計(jì)算屬性一定要返回值，函數(shù)不一定。

2.函數(shù)需要主動(dòng)調(diào)用才會(huì)執(zhí)行，計(jì)算屬性依賴(lài)的項(xiàng)變化的時(shí)候才執(zhí)行。

3.計(jì)算屬性比函數(shù)性能高，因?yàn)槭腔诰彺娴?#xff0c;不會(huì)像函數(shù)一樣每次都調(diào)用，只有依賴(lài)的項(xiàng)有變化的時(shí)候才執(zhí)行。

6.watch監(jiān)聽(tīng)器 配置項(xiàng)

監(jiān)聽(tīng)某個(gè)數(shù)據(jù)，只要該數(shù)據(jù)變了，就會(huì)執(zhí)行函數(shù)。

優(yōu)先考慮用計(jì)算屬性computed能否解決問(wèn)題，在實(shí)際工作中的watch用的還是比較少的，濫用watch可能會(huì)導(dǎo)致性能問(wèn)題

1. 函數(shù)名必須是一個(gè)已存在的在data中的數(shù)據(jù)名，函數(shù)名即是你所監(jiān)聽(tīng)的數(shù)據(jù)名。
2. 首次加載不執(zhí)行，只有在后續(xù)數(shù)據(jù)變化的時(shí)候才會(huì)運(yùn)行。
3. 檢測(cè)的數(shù)據(jù)可以是data中的，也可以是computed，還可以是props屬性 和 $route。
4. 接受兩個(gè)參數(shù)，第一個(gè)是最新的值，第二個(gè)是變化之前的值。

computed和watch的異同點(diǎn)？（面試題）

1.計(jì)算屬性是返回一個(gè)值，watch是監(jiān)聽(tīng)一個(gè)值做某件事情的。

2.計(jì)算屬性是值變化的時(shí)候重新運(yùn)算，返回一個(gè)新值；watch值變化的時(shí)候執(zhí)行函數(shù)，值變化時(shí)做事。

3.都不需要主動(dòng)調(diào)用，都是基于值變化的。

7.組件

使用組件化的原因：便于開(kāi)發(fā) ，便于復(fù)用，多次使用時(shí)不用多次復(fù)制。

組件：一段封裝了html css js的代碼。

組件的名字可以自定義，一般看到的不認(rèn)識(shí)的標(biāo)簽就是組件。

組件的兩種注冊(cè)方式

• 全局注冊(cè)：可以在任何vue實(shí)例中生效，但基本用不到，因?yàn)榛局挥靡粋€(gè)Vue實(shí)例。
• 局部注冊(cè)：在組件內(nèi)部注冊(cè)，在哪用就在注冊(cè)，用的很多。

注意：1. 對(duì)象參數(shù)中template必須要有，其他的可以沒(méi)有，html代碼使用es6的字符串?dāng)U展``來(lái)寫(xiě)。

		2.組件標(biāo)簽只能有一個(gè)根節(jié)點(diǎn)，最外層要由一個(gè)大的div包裹。3.組件名在js中是使用駝峰式，在html中改為以橫線(xiàn) `-`連接的小寫(xiě)字母。4.組件中的data必須是函數(shù)，并且必須要return一個(gè)對(duì)象，就是我們的數(shù)據(jù)對(duì)象.這是為了每次調(diào)用的時(shí)候都是自己獨(dú)立的數(shù)據(jù)而不是共享的?！靖M件(vue實(shí)例)中的data是對(duì)象，而data如果是對(duì)象的話(huà)，組件復(fù)用時(shí)使用的data數(shù)據(jù)是共用的一份，更改其中一個(gè)其他的也會(huì)受到影響?！?

//全局注冊(cè) 沒(méi)有掛載點(diǎn) 多了一個(gè)template屬性
Vue.component("組件名",{template:"html代碼"，data(){return {數(shù)據(jù) }},//data必須是函數(shù)，返回一個(gè)對(duì)象，保證每個(gè)組件使用的都是自己獨(dú)立的值。methods:{},computed:{},watch:{}
})//局部注冊(cè)  將配置項(xiàng)單獨(dú)聲明，在哪用就在哪注冊(cè) 在vue實(shí)例/其他組件中使用components:{組件名:組件配置項(xiàng)}注冊(cè)
//也可以組件套組件 在配置項(xiàng)的template中使用另一個(gè)組件，然后在里面使用components注冊(cè)，前提是要使用的另一個(gè)組件必須已經(jīng)在前面定義好了//組件配置項(xiàng)之后大部分不會(huì)改了，用const聲明
<head></head>const 組件配置項(xiàng)名/組件名 = {template: `html代碼`,data(){return {數(shù)據(jù)}},methods:{},computed{},watch:{}}new Vue({el: "#app",data: {},components: {//組件名:組件配置項(xiàng) 一般將組件名和組件配置項(xiàng)寫(xiě)成一樣head}})

<!-- 全局注冊(cè)的使用：在同一個(gè)html文件中 -->
<div id="app"><my-com></my-com><my-com></my-com></div><script>//全局注冊(cè)Vue.component("myCom", {template: `<div><h1 @click="change" :style="obj">{{msg}}</h1><a :href="url">{{info}}</a>    </div>`,data() {return {msg: "這是vue組件全局注冊(cè)方式",url: "http://www.baidu.com",info: "百度一下，你就知道",obj: { color: "red" }}},methods: {change() {this.url = "http://jd.com"this.info = "京東"}<!-- 兩個(gè)組件之間的內(nèi)容互不干預(yù)，點(diǎn)誰(shuí)改的就是誰(shuí)的，另一個(gè)組件內(nèi)的內(nèi)容不受影響 -->}})
</script><!-- 局部注冊(cè)的使用 -->
<div id="app"><!-- <mycom></mycom> --><mycom2></mycom2></div><script>//局部組件的配置項(xiàng)const mycom = {template: `<div><h1>{{msg}}</h1>    <h2>{{gender}}</h2></div>`,data() {return {sex: 1,msg: "這是局部注冊(cè)的第一個(gè)組件"}},computed: {gender() {return this.sex === 1 ? "男" : "女"}}}const mycom2 = {template: `<div><h1>{{msg}}</h1>    <h2>{{gender}}</h2><mycom></mycom></div>`,data() {return {sex: 1,msg: "這是局部注冊(cè)的第二個(gè)組件"}},computed: {gender() {return this.sex === 1 ? "男" : "女"}},components: {mycom}}new Vue({el: "#app",data: {},components: {mycom2}})
</script>

組件之間的傳值–簡(jiǎn)單場(chǎng)景下

1.父 -> 子 props 組件之間產(chǎn)生嵌套關(guān)系 如點(diǎn)擊父組件，讓子組件的顯示屬性發(fā)生變化 把父組件的數(shù)據(jù)傳給子組件，讓在子組件中顯示

2.子 -> 父 自定義事件 更改子組件的數(shù)據(jù)，父組件的內(nèi)容也發(fā)生了變化

3.同級(jí)：先子給父，再父給子

父->子、子->父?jìng)髦颠@種方法只適用于簡(jiǎn)單情況，復(fù)雜的子組件之間傳值使用vuex來(lái)實(shí)現(xiàn)。

判斷是不是父組件與子組件之間的關(guān)系：父組件中要用到子組件的標(biāo)簽<>。

組件之間傳值的三種情況：

**1.父->子：props(屬性) **

注意：子組件不允許直接修改父組件傳入的屬性，如果需要更新(更改)這個(gè)屬性，只能讓父組件重新傳。

孫子級(jí)的組件想要使用根組件的數(shù)據(jù)，要通過(guò)中間組件的傳遞，中間組件既要接收數(shù)據(jù)，又要傳出數(shù)據(jù)。

**用法：**類(lèi)似帶形參的函數(shù)定義及調(diào)用的過(guò)程（共有3步：函數(shù)定義時(shí)的形參，形參在函數(shù)中的使用，調(diào)用函數(shù)時(shí)傳遞實(shí)參）。

1.子組件內(nèi)部要接收屬性并規(guī)定屬性的使用場(chǎng)景.

2.父組件中使用子組件要給屬性傳實(shí)際的數(shù)據(jù).

父->子傳值案例

    <div id="app">    <my-com :a="msg" :b="change" :c="arr"></my-com></div> <script> const myCom={props:["a","b","c"],//在子組件中加props配置項(xiàng)，其值為數(shù)組，類(lèi)似函數(shù)定義時(shí)的形參可以有多個(gè)template:`<div><h1 @click="b">我是組件：{{a}}</h1><ul><li v-for="item in c">{{item}}</li>    </ul></div>`,//在子組件中使用定義的屬性}new Vue({el:"#app",data:{box:"welcome",msg:"我是父組件的數(shù)據(jù)",info:"哈哈",arr:[1,2,3,4]},methods:{change(){console.log(this)//this指向還是父組件}},components:{//組件名:組件配置項(xiàng)myCom}})

<!-- 父->子案例：孫子級(jí)組件使用根組件的數(shù)據(jù) 通過(guò)中間組件傳遞數(shù)據(jù)-->
<body><div id="app"><my-com :child="msg"></my-com></div><script>const myCom1 = {props: ["child"],template: `<h2>孫子級(jí)組件：{{child}}</h2>`,}const myCom = {props: ["child"],template: `<div><h1>子組件：{{child}}</h1><myCom1 :child="child"></myCom1></div>`,components: { myCom1 }}new Vue({el: "#app",data: {msg: "我是根組件的數(shù)據(jù)"},components: { myCom }})</script></body>

2.子->父：自定義事件

vue是單向數(shù)據(jù)流，只能從父->子，但由于實(shí)際需要子->父，因此解決方法時(shí)需要自定義事件。

在html中使用子組件時(shí)不能給子組件加類(lèi)、id、樣式和指令，這些都是用于實(shí)際存在的標(biāo)簽的，而我們自定義的組件并不是實(shí)際存在的，編譯后就換成了組件中的 template 中的內(nèi)容，因此不能給子組件加之前規(guī)定好的屬性和指令。但是可以加自定義的屬性和事件，就像上面的在子組件中使用 props 接收自定義屬性，像下面的使用 $emit 主動(dòng)觸發(fā)自定義事件。

自定義事件需要使用$emit("自定義事件名",參與方法的參數(shù))主動(dòng)觸發(fā)。this.$emit()用于主動(dòng)觸發(fā)綁定在本組件標(biāo)簽上的自定義事件。

子->父?jìng)髦颠^(guò)程：在子組件上標(biāo)簽綁定一個(gè)自定義事件，自定義事件的函數(shù)值是定義在父組件的methods中的，在函數(shù)里面是要有參數(shù)的，將接受的參數(shù)賦給父組件的數(shù)據(jù)；在子組件中需要$emit主動(dòng)觸發(fā)自定義事件，給子組件中的內(nèi)容綁定一個(gè)click事件，在子組件的click事件函數(shù)中主動(dòng)觸發(fā)，并把自己要傳給父組件的數(shù)據(jù)作為參數(shù)傳到父組件的自定義事件函數(shù)中。(子組件的自定義事件的函數(shù)是寫(xiě)在父組件的methods中的，類(lèi)比于<h1 @click="change"></h1>的click事件。)

子父?jìng)髦蛋咐?/p>

 <div id="app"> <h1 >我是父組件{{msg}}</h1> <child @abc="fn"></child></div> 
<script>const child={data(){return{info:"我是子組件的數(shù)據(jù)"}},template:`<h1 @click="change">我是子組件</h1>`,methods:{change(){//$emit用于主動(dòng)觸發(fā)綁定在本組件標(biāo)簽上的自定義事件,其他組件標(biāo)簽上的自定義事件是無(wú)法觸發(fā)的 //$emit(自定義事件名,參與方法的參數(shù))this.$emit("abc",this.info)}}}new Vue({el:"#app",data:{msg:""},components:{child},methods:{fn(m){this.msg=m}}})
</script> 

組件間傳值小案例–對(duì)話(huà)框顯示與關(guān)閉

點(diǎn)擊【顯示】按鈕，顯示出來(lái)對(duì)話(huà)框；再點(diǎn)擊對(duì)話(huà)框中的【關(guān)閉】按鈕，關(guān)閉對(duì)話(huà)框。使用v-show來(lái)控制對(duì)話(huà)框的顯示與隱藏。

由于是點(diǎn)擊父組件中的【顯示】按鈕讓子組件顯示，所以將控制對(duì)話(huà)框是否顯示的變量定義在父組件中，父-》子傳值 props。

當(dāng)子組件中的【關(guān)閉】按鈕點(diǎn)擊時(shí)，需要讓父組件重新把控制對(duì)話(huà)框是否顯示的變量傳過(guò)來(lái)，子-》父?jìng)髦?自定義事件。

    <div id="app"><div class="dialog"><button @click="show=true">顯示</button><modal :visible="show" @close="close"></modal></div></div><script>const modal = {props: ['visible'],template: `<div class="modal" v-show="visible"><button @click="close">關(guān)閉</button>     </div>`,methods: {close(){this.$emit("close")}}}new Vue({el: "#app",data: {show: false},components: {modal},methods:{close(){this.show=false}}})</script>

關(guān)于props

注意，屬性名在js中定義的時(shí)候如果由多個(gè)單詞組成，要采用駝峰式命名

在html 里使用的時(shí)候要改為短橫線(xiàn)連接

例如:

 props:["myAttr"]<xu-button my-atrr="屬性">我是按鈕</xu-button>

1.數(shù)組的形式

props:["type","round"],

2.對(duì)象的形式 限制屬性值的類(lèi)型

props: {//屬性名:屬性的類(lèi)型  title: String,likes: Number,isPublished: Boolean,commentIds: Array,author: Object,callback: Function,time:Date,s:Symbol,contactsPromise: Promise // or any other constructor
}

3.傳入的是布爾值的情況

<!--只傳入屬性名，沒(méi)有屬性值，說(shuō)明傳入的是布爾值true-->
<blog-post is-published></blog-post><!--此時(shí)要求屬性必須規(guī)定是布爾值類(lèi)型-->
props:{  isPublished:Boolean
}, 

4.復(fù)雜寫(xiě)法

props:{//該屬性有可能是多種類(lèi)型propB: [String, Number],// 必填的字符串propC: {type: String,required:true}, // 帶有默認(rèn)值的數(shù)字propD: {type: Number,default: 100},
}

8.插槽

插槽<slot></slot>：其實(shí)就是給組件標(biāo)簽中的內(nèi)容(可以是多個(gè)標(biāo)簽)預(yù)留的位置

普通插槽

對(duì)于普通插槽，如果組件模板中有多個(gè)插槽，那么組件中標(biāo)簽的內(nèi)容將會(huì)復(fù)制，插入到多個(gè)插槽中，多個(gè)插槽中的內(nèi)容都是一樣的。

    <div id="app" ><my-head><h1>hello</h1></my-head></div><script>var head = {template: `<div><slot></slot><h1 >{{msg}}</h1></div>`,data: function () { return { msg: "我是頭部" } },}new Vue({el:"#app",//掛載點(diǎn)components:{myHead:head}})</script>

具名插槽 v-slot

想要使用多個(gè)插槽，讓組件標(biāo)簽中的指定的內(nèi)容對(duì)應(yīng)到不同的插槽中去。在組件使用時(shí)的插槽模板中使用 v-slot:插槽名來(lái)區(qū)分不同的插槽，然后在組件內(nèi)部的模板中使用slot標(biāo)簽的name 屬性 <slot name="插槽名"></slot>。

v-slot** 只能用于**組件或 template 上，因此要將組件標(biāo)簽的內(nèi)容使用<template></template>標(biāo)簽包起來(lái)。

v-slot 簡(jiǎn)寫(xiě)為：#.

在普通插槽中也有name屬性，只是name屬性默認(rèn)為deafult.

<body><div id="app" ><my-head><!-- v-slot只能用于組件或template上 --><template v-slot:before> <!-- v-slot:可以縮寫(xiě)為# --><h1>hello</h1></template><template #after><h1>world</h1></template></my-head></div><script>var head = {template: `<div><slot name="before"></slot><h1>{{msg}}</h1><slot name="after"></slot></div>`,data: function () { return { msg: "我是頭部" } },}new Vue({el:"#app",//掛載點(diǎn)components:{myHead:head}})</script></body>

編譯作用域插槽

如果插槽模板(組件內(nèi)標(biāo)簽的插槽模板)中想使用該子組件內(nèi)部的數(shù)據(jù)，在正常情況下使用的都是根組件中的數(shù)據(jù)，如果想要使用子組件中的數(shù)據(jù)，首先需要在組件模板的插槽中定義 :屬性名="屬性值" 或 v-bind:屬性名="屬性值"

然后在組件調(diào)用的地方插槽通過(guò) #插槽名=“props”接收屬性 props代表所有屬性的集合，是一個(gè)對(duì)象。在插槽模板中使用的時(shí)候直接按照對(duì)象的格式調(diào)用即可props.屬性名。

通過(guò) #插槽名=“props”接收屬性的時(shí)候也可以直接解構(gòu)賦值 #插槽名="{屬性名}"

<body><div id="app"><mycom><template #before="props"><h1>{{props.abc}}</h1><h2>{{props.def}}</h2><!-- 如果要使用組件中的數(shù)據(jù)不多的話(huà)，也可以用解構(gòu)賦值來(lái)做 --><!-- <template #before="{abc,def}"><h1>{{abc}}</h1><h2>{{def}}</h2> --></template><template #after><p>123456</p></template><template #middle><h3>就是開(kāi)心</h3></template></mycom></div><script>const mycom = {data(){return{msg:"我是子組件的數(shù)據(jù)1",info:"我是子組件的數(shù)據(jù)2"}},//屬性名是abc。屬性值是變量msg的內(nèi)容template: `<div><h1>我是組件</h1> <slot name="before" :abc="msg" :def="info"></slot><ul><slot name="middle"></slot> <li>1</li>   <li>2</li>    </ul>  <slot name="after"></slot> </div>`}new Vue({el: "#app",components: {mycom},data:{msg:"我是父組件"}})</script></body>

9.組件的生命周期

生命周期：組件從創(chuàng)建到銷(xiāo)毀的完整過(guò)程。

生命周期(鉤子)函數(shù)：在特定的時(shí)間節(jié)點(diǎn)會(huì)自動(dòng)觸發(fā)的函數(shù)。

  //只要是組件就有生命周期，這些生命周期函數(shù)所在的地方與配置項(xiàng)同級(jí)beforeCreate(){console.log("組件創(chuàng)建之前")},created(){console.log("組件創(chuàng)建完畢")},beforeMount(){console.log("組件渲染前")},mounted(){//我們就能看到組件渲染在頁(yè)面上了，可以在頁(yè)面上看到DOM結(jié)構(gòu)了console.log("組件掛載完畢")},//1.頁(yè)面重新渲染的時(shí)候觸發(fā)，頁(yè)面視圖中沒(méi)有用到的數(shù)據(jù)發(fā)生更新時(shí)并不會(huì)觸發(fā)組件更新的鉤子函數(shù)，因?yàn)関ue是數(shù)據(jù)驅(qū)動(dòng)視圖的。//2.子組件用到的屬性渲染到了視圖中   //就以視圖是否發(fā)生更新為依據(jù)判斷是否觸發(fā)了更新beforeUpdate(){//首次不執(zhí)行，數(shù)據(jù)更新可以算是組件更新了console.log("組件更新前")},updated(){//首次不執(zhí)行console.log("組件更新后")},beforeDestroy(){//首次不執(zhí)行console.log("組件銷(xiāo)毀前")},destroyed(){//首次不執(zhí)行console.log("組件銷(xiāo)毀后")},//下面兩個(gè)是被緩存的組件特有的生命周期activated(){//組件被kepp-alive緩存后被重新激活時(shí)使用，即從詳情頁(yè)返回列表頁(yè)時(shí)}deactivated(){//緩存組件失活時(shí)使用，即從列表頁(yè)轉(zhuǎn)向詳情頁(yè)的時(shí)候}

10.動(dòng)態(tài)組件

基礎(chǔ)知識(shí)

<componet is="組件名"></component>標(biāo)簽是vue自帶的標(biāo)簽，代表的是一個(gè)組件，至于代表的是哪一個(gè)組件由它的屬性is的值來(lái)決定的，而is的值是可以以變量來(lái)變化的，從而實(shí)現(xiàn)組件的切換。

<div id="app"><component :is="title"></component><button @click="change(2)">按鈕</button></div><script>var coma = {template: `<div><h1>我是第一個(gè)組件</h1></div>`,}var coma2 = {template: `<div><h1>我是第二個(gè)組件</h1></div>`,}var coma3 = {template: `<div><h1>我是第三個(gè)組件</h1></div>`,}var app = new Vue({el: "#app",data: {tab: "mycom",title:"mycom"},components: {mycom: coma,mycom2: coma2,mycom3: coma3,},methods:{change(n){this.title="mycom"+n}}})</script>

案例：使用動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡的切換

<!-- 動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡的切換  -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>* {margin: 0;padding: 0;}.tab {float: left;width: 100px;height: 50px;background-color: gray;margin-right: 8px;line-height: 50px;text-align: center;color: #fff;}li {list-style: none;}.act {background-color: red;}.bgc {width: 424px;height: 200px;background-color: pink;}</style></head><body><!-- 作業(yè)：選項(xiàng)卡的內(nèi)容用組件來(lái)表示  動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡作業(yè) --><div id="app"><div v-for="(item,index) in list" :id="index" class="tab" @click="change(index)" :class="{'act':num===index}">{{item}}</div><div style="clear: both;"></div><component :is="mycom"></component></div><script>const tem = `<div><ul class="bgc"><li v-for="(item,index) in cont" :id="index">{{item}}</li></ul></div>`const myCom1 = {template: tem,data() {return {cont: ["我是體育新聞1", "我是體育新聞2", "我是體育新聞3", "我是體育新聞4"]}}}const myCom2 = {template: tem,data() {return {cont: ["我是科技新聞1", "我是科技新聞2"]}}}const myCom3 = {template: tem,data() {return {cont: ["我是電影新聞1", "我是電影新聞2", "我是電影新聞3"]}}}const myCom4 = {template: tem,data() {return {cont: ["我是娛樂(lè)新聞1", "我是娛樂(lè)新聞2", "我是娛樂(lè)新聞3", "我是娛樂(lè)新聞4", "我是娛樂(lè)新聞5"]}}}new Vue({el: "#app",data: {list: ["體育新聞", "科技新聞", "電影新聞", "娛樂(lè)新聞"],num: 0,mycom: "myCom1",},methods: {change(index) {this.num = indexindex++this.mycom = "myCom" + index}},components: {myCom1, myCom2, myCom3, myCom4}})</script></body></html>

11.綜合案例：使用vue實(shí)現(xiàn)購(gòu)物車(chē)

使用計(jì)算屬性較多，基本都是依賴(lài)于數(shù)組中的是否選中的狀態(tài)來(lái)操作的，寫(xiě)成計(jì)算屬性這樣只要依賴(lài)的數(shù)據(jù)發(fā)生了變化就會(huì)自動(dòng)重新調(diào)用，不用像寫(xiě)成函數(shù)那樣每次都需要主動(dòng)去調(diào)用了。

注意點(diǎn)：

1. 我們所需要的數(shù)據(jù)都是從后端返回的，然后賦值給list的，而不是我們直接在list中寫(xiě)的，這些數(shù)據(jù)只要是我們需要的都可以從后端傳過(guò)來(lái)。
2. 給數(shù)據(jù)list的每一項(xiàng)加上一個(gè)id，符合實(shí)際項(xiàng)目。
3. 在給data中的變量定義時(shí)，除了后端傳過(guò)來(lái)的數(shù)據(jù)，先盡量不要寫(xiě)其他的變量定義，可以通過(guò)計(jì)算屬性實(shí)現(xiàn)的就使用計(jì)算屬性來(lái)實(shí)現(xiàn)。方法中需要的參數(shù)是依賴(lài)于data中的數(shù)據(jù)的，而可以寫(xiě)成計(jì)算屬性來(lái)實(shí)現(xiàn)。
4. 從后端傳過(guò)來(lái)的數(shù)據(jù)中是否選中是布爾值的形式，這樣的情況時(shí)可以和后端交涉將其定為我們的圓圈圖片的路徑。如果還是布爾值的形式的話(huà)，就采用計(jì)算屬性判斷是否選中的情況來(lái)定路徑。計(jì)算屬性中想要用傳過(guò)來(lái)的參數(shù)，則要return 函數(shù)，在return的函數(shù)中寫(xiě)邏輯。直接在img的src中用三目運(yùn)算符判斷。
5. 需要知道操作的是哪個(gè)商品，需要在函數(shù)中傳參數(shù)，盡量傳index不要傳item。
6. 已選數(shù)量取決于數(shù)組中selecetd的個(gè)數(shù)，直接用計(jì)算屬性來(lái)做即可，不用單獨(dú)再在data中加一個(gè)變量表示已選數(shù)量。使用過(guò)濾函數(shù)filter()，返回的結(jié)果是一個(gè)滿(mǎn)足條件的數(shù)組。

“已選(1)” 和 “全選” 使用es6的模板字符串 `` 拼接字符，變量用 ${變量名}表示。

7. 計(jì)算總價(jià)寫(xiě)成計(jì)算屬性，不寫(xiě)成函數(shù)。因?yàn)榭們r(jià)是依賴(lài)于數(shù)組中的單價(jià)和數(shù)量的，只要它們有所變化，就會(huì)重新執(zhí)行計(jì)算總價(jià)的函數(shù)。這樣只需要在總價(jià)的地方執(zhí)行計(jì)算屬性，如果寫(xiě)成函數(shù)，其他像加減和選中圓圈會(huì)改變總價(jià)的情況時(shí)每次都得再去調(diào)用計(jì)算總價(jià)的函數(shù)。
8. 先寫(xiě)每個(gè)需要點(diǎn)擊的基本功能就行，其他的使用計(jì)算屬性逐步基本能實(shí)現(xiàn)。
9. 全選按鈕取決于數(shù)組中selected的數(shù)量，還是使用計(jì)算屬性來(lái)實(shí)現(xiàn)。使用every()，每一項(xiàng)的selected都是true時(shí)是選中狀態(tài)，否則就是未選中狀態(tài)。
10. 結(jié)算按鈕的灰色狀態(tài)，使用some()函數(shù)，只要數(shù)組中有selected是true的就變?yōu)檎！?/li>

11.該案例中使用計(jì)算屬性比較多是因?yàn)閿?shù)據(jù)之間的關(guān)聯(lián)性較強(qiáng)，基本都是取決于是否選中的狀態(tài)。這些計(jì)算屬性寫(xiě)成函數(shù)也能實(shí)現(xiàn)，但是性能肯定是沒(méi)有計(jì)算屬性好的 。

12. 如果我們要做的操作時(shí)想要改變data中的數(shù)據(jù)的值，使用的時(shí)methods方法；如果我們要做的操作所需要的值是依賴(lài)于data中的數(shù)據(jù)，使用的是computed計(jì)算屬性。

arr.filter((item)=>{return 條件
})
//返回的是一個(gè)滿(mǎn)足條件的新數(shù)組

arr.every((item)=>{return 條件
})
//返回的是布爾值，數(shù)組中的每一項(xiàng)都滿(mǎn)足條件時(shí)返回true，否則返回false 

arr.some((item)=>{return 條件
})
//返回的是布爾值，只要數(shù)組中有滿(mǎn)足條件的就返回true,否則返回flase

老師寫(xiě)的：計(jì)算屬性依賴(lài)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>table {width: 500px;margin: 0 auto;border-collapse: collapse;text-align: center;height: 50px;}td {border: 1px solid;}</style></head><body><div id="app"><table><!-- 表頭行 --><tr><td>選擇</td><td>名稱(chēng)</td><td>價(jià)格</td><td>數(shù)量</td><td>操作</td><td>刪除</td></tr><!-- 商品行 --><tr v-for="(item,index) in list" :key="item.id"><td><img :src="check(item)" @click="select(index)"></td><td>{{item.name}}</td><td>{{item.price}}</td><td>{{item.count}}</td><td><button @click="add(index)">+</button><button @click="sub(index)">-</button></td><td><img src="images/delete.png" @click="remove(index)"></td></tr></table><table><tr><td><img :src="totalSelect" @click="sel"><span>{{total}}</span></td><td>總計(jì){{price}}元</td><td><button :disabled="deal">結(jié)算</button></td></tr></table></div><script>// 要修改data中的數(shù)據(jù)用方法，依賴(lài)data中的數(shù)據(jù)做之后的操作用計(jì)算屬性new Vue({el: " #app", data: {list: [{ id: '2001', name: "iPhone14", price: 10000, count: 1, selected: false },{ id: '2002', name: "粉底液", price: 300, count: 1, selected: false },{ id: '2003', name: "ps5", price: 5000, count: 1, selected: false },{ id: '2004', name: "鍵盤(pán)", price: 400, count: 1, selected: false }],},computed: {check() {return (item) => {return item.selected ? "images/selected.png" : "images/unselected.png"}},//4 已選數(shù)量  依賴(lài)于數(shù)組中selected的數(shù)量 使用計(jì)算屬性//使用filtet篩選函數(shù) 篩選出selected為true的項(xiàng)組成新數(shù)組total() {let len = this.list.filter((item) => {return item.selected == true}).lengthreturn len === this.list.length ? "全選" : `已選(${len})個(gè)`},//5 全選圓圈按鈕 是否切換成勾取決于selected的數(shù)量totalSelect() {return this.list.every((item => {return item.selected == true})) ? "images/selected.png" : "images/unselected.png"},//6 計(jì)算總價(jià)//使用filter函數(shù)過(guò)濾出elected為true的項(xiàng)組成新數(shù)組，再對(duì)新數(shù)組的價(jià)格和數(shù)量做操作price() {let arr = this.list.filter((item) => {return item.selected == true})let total = 0;//總價(jià)for (let i = 0; i < arr.length; i++) {total += arr[i].price * arr[i].count}return total},//7 結(jié)算按鈕 取決于selected的數(shù)量，只要有selected為true的就改變屬性，否則不變deal() {return this.list.some((item => {return item.selected == true})) ? false : true}},methods: {//1 選擇圓圈的切換select(index) {this.list[index].selected = !this.list[index].selected},//2 加減按鈕add(index) {this.list[index].count++},sub(index) {if (this.list[index].count > 1) {this.list[index].count--}},//3 刪除按鈕remove(index) {this.list.splice(index, 1)},//8 點(diǎn)擊全選按鈕 要改變數(shù)組中的selected值//先通過(guò)判斷原來(lái)是否全選中，如果是則改為全部未選中//否則改為全部選中//不能簡(jiǎn)單的將selected取反sel() {let len = this.list.filter((item) => {return item.selected}).lengthif (len == this.list.length) {for (let i = 0; i < this.list.length; i++) {this.list[i].selected = false}} else {for (let i = 0; i < this.list.length; i++) {this.list[i].selected = true}}}}})</script></body></html>

自己寫(xiě)的：方法主動(dòng)調(diào)用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>#app {width: 800px;margin: 100px auto;}.product {border: 1px solid;padding: 20px;}.pro_name {font-weight: bold;}.pro_price {color: red;font-size: 20px;}.total {margin-top: 100px;}.deal {width: 80px;height: 30px;}</style></head><body><div id="app"><div v-for="(item,index) in list" :id="index" class="product"><img :src="proSelect(item)" @click="select(item)"><span class="pro_name">{{item.name}}</span><span class="pro_price">￥{{item.price}}</span><button @click="decCount(item)">-</button><span>{{item.count}}</span><button @click="addCount(item)">+</button><img src="images/delete.png" @click="deletePro(index)"></div><div class="total"><img :src="totalSrc" @click="totalSelect"><span>{{allSelect}}</span><span>￥{{totalPrice}}</span><button class="deal" :disabled="dis">結(jié)算</button></div></div><script>new Vue({el: "#app",data: {list: [{ name: "iPhone14", price: 10000, count: 1, selected: false },{ name: "粉底液", price: 300, count: 1, selected: false },{ name: "ps5", price: 5000, count: 1, selected: false },{ name: "鍵盤(pán)", price: 400, count: 1, selected: false }],totalSrc: "images/unselected.png",//全選圓圈totalCount: 0,//已選商品數(shù)量totalPrice: 0,//商品總價(jià)dis: true,//結(jié)算按鈕不可用},methods: {//1 商品數(shù)量加減：//如果該商品已選中，點(diǎn)擊加減按鈕后，商品數(shù)量、總價(jià)發(fā)生變化//如果該商品未選中，點(diǎn)擊加減按鈕后，商品數(shù)量發(fā)生變化。decCount(item) {if (item.count > 1) {item.count--}if (item.selected) {this.price()}},addCount(item) {item.count++if (item.selected) {this.price()}},//2 商品是否選中的圓圈//如果原來(lái)圓圈未選中，點(diǎn)擊之后：選中按鈕、已選數(shù)量、總價(jià)發(fā)生變化//如果原來(lái)的圓圈選中，點(diǎn)擊之后：選中按鈕、已選數(shù)量、總價(jià)發(fā)生變化//如果點(diǎn)擊之后選中的圓圈數(shù)量等于商品數(shù)量：全選按鈕選中，修改完善之后可以使用計(jì)算屬性來(lái)實(shí)現(xiàn)//只要有商品選中，結(jié)算按鈕恢復(fù)狀態(tài)select(item) {let proNum = this.list.length;//商品數(shù)量item.selected ? this.totalCount-- : this.totalCount++item.selected = !item.selectedthis.price()this.totalSrc = this.totalCount === proNum ? "images/selected.png" : "images/unselected.png"if (this.totalCount > 0) {this.dis = false}},//3 計(jì)算總價(jià):：找到選中的商品，總價(jià)=單價(jià)*數(shù)量//計(jì)算總價(jià)的功能最好使用計(jì)算屬性來(lái)實(shí)現(xiàn)。price() {let total = 0;//總價(jià)for (let i = 0; i < this.list.length; i++) {if (this.list[i].selected) {total += this.list[i].count * this.list[i].price}}this.totalPrice = total},//4 刪除按鈕//都要做的操作是：刪除該條商品記錄//如果刪除的是選中的商品：這一條商品記錄消失、已選商品數(shù)量、總價(jià)發(fā)生變化//如果刪除的是未選中的商品：這一條商品記錄消失、判斷是否是否全選了商品//注意：刪除操作和其他操作的執(zhí)行順序deletePro(index) {if (this.list[index].selected) {this.totalCount--}this.list.splice(index, 1)this.price()//判斷刪除后是否全選let proNum = this.list.length;//商品數(shù)量this.totalSrc = this.totalCount === proNum ? "images/selected.png" : "images/unselected.png"},//5 全選按鈕//先判斷原來(lái)的選中狀態(tài)的數(shù)量//如果原來(lái)就是全部選中：全選按鈕、商品選中按鈕，總價(jià)變?yōu)?，已選數(shù)量，結(jié)算按鈕不可點(diǎn)擊//如果原來(lái)不是全部選中：全選按鈕、商品選中按鈕，總價(jià)發(fā)生變化，已選數(shù)量，結(jié)算按鈕可點(diǎn)擊totalSelect() {let proNum = this.list.length;//商品數(shù)量//原來(lái)已經(jīng)全部選中if (this.totalCount === proNum) {for (let i = 0; i < this.list.length; i++) {this.list[i].selected = false}this.totalSrc = "images/unselected.png"this.totalPrice = 0this.dis = truethis.totalCount = 0} else {for (let i = 0; i < this.list.length; i++) {this.list[i].selected = true}this.totalSrc = "images/selected.png"this.price()this.dis = falsethis.totalCount = proNum}}},computed: {//計(jì)算屬性：后臺(tái)傳過(guò)來(lái)的是是否選中，而我們需要渲染的是選中和未選中的圖片，proSelect() {return function (item) {return item.selected ? "images/selected.png" : "images/unselected.png"}},//全部選中時(shí)，文本由“已選幾個(gè)”變?yōu)椤叭x”allSelect() {let num = this.list.length;//商品總數(shù)量return this.totalCount === num ? "全選" : "已選(" + this.totalCount + ")"}}})</script></body></html>

12.Vue腳手架

下載node.js：vue/react是依賴(lài)于node環(huán)境的，也能用于寫(xiě)后端。在官網(wǎng)上下載長(zhǎng)期支持版本，一直點(diǎn)擊下一步安裝即可。

檢驗(yàn)node是否安裝完成：搜索cmd打開(kāi)命令提示符，輸入node -v ，能顯示出版本號(hào)則表示安裝成功。輸入npm -v能顯示出版本號(hào)則表示可以使用npm。

npm：包管理工具，想要下載什么包直接用npm下載不用再自己找了。包：文件夾。

下載包的方法：npm install 包名，

不用再像以前一樣引入vue文件了，新建一個(gè)“腳手架”的文件夾，在腳手架的文件夾里，在上面的路徑中輸入cmd就直接跳轉(zhuǎn)到了腳手架文件夾所在的路徑的命令提示符，輸入npm install vue就會(huì)自動(dòng)下載相應(yīng)的包到腳手架的文件夾下。

什么是腳手架？

Vue腳手架是Vue官方提供的標(biāo)準(zhǔn)化開(kāi)發(fā)工具(開(kāi)發(fā)平臺(tái)),它提供命令行和UI界面,方便創(chuàng)建vue工程、配置第三方依賴(lài)、編譯vue工程。

如果沒(méi)有腳手架，我們要如何搭建項(xiàng)目？超級(jí)麻煩，幸好我們現(xiàn)在可以使用腳手架直接安裝搭建項(xiàng)目，簡(jiǎn)單又方便

• 通過(guò)npm init初始化項(xiàng)目，生成項(xiàng)目配置文件package.json，包名：cli，其他的內(nèi)容直接回車(chē)即可。
• 安裝webpack和腳手架
  • npm install webpack webpack-cli -D
• 配置ES6/7/8轉(zhuǎn)ES5代碼
  • npm install babel-loader @babel/core @babel/preset-env -D
• 創(chuàng)建webpack.config.js文件，配置webpack
• 安裝html-webpack-plugin依賴(lài)
  • npm install html-webpack-plugin -D
• 安裝vue-loader
  • npm install vue-loader
• 安裝 vue-template-compiler
  • npm install vue-template-compiler
• 安裝 cache-loader 用于緩存loader編譯的結(jié)果
  • npm install cache-loader
• 安裝less loader 安裝sass-loader 安裝style-loader file-loader url-loader postcss-loader autoprefixer
• 安裝webpack-dev-server
• 安裝 vue-router vuex axios
• 配置webpack…

腳手架的安裝：在腳手架文件夾下的命令提示符中輸入：

npm install -g @vue/cli -g 表示全局安裝，可以在任意文件夾下運(yùn)行，否則只能在當(dāng)前文件夾下運(yùn)行驗(yàn)證腳手架是否成功安裝：在腳手架文件夾下的cmd中輸入vue/cli --version查看腳手架的版本號(hào)

利用腳手架創(chuàng)建項(xiàng)目并進(jìn)行配置方法：在腳手架的文件夾下的cmd中輸入以下

vue create 項(xiàng)目名字(用英文不要中文)手動(dòng)選擇風(fēng)格Manually select features：*代表選中，上下鍵切換項(xiàng)，空格切換*選中，我們需要選中：Babel(es6轉(zhuǎn)碼成es5)、Router、CSS Pre-processors、Linter/Formatter代碼審查。(現(xiàn)在沒(méi)裝的之后還可以裝)。
像TS(vue3用)、vuex(之后用)可以再用的時(shí)候再裝，方法之后再講
之后安裝的方法：npm install vuex.
忘記之前是否已經(jīng)安裝過(guò)：在package.json中查看依賴(lài)是否有。選擇vue版本:2.xUser history mode for router?Y  默認(rèn)使用的是Hash mode，但我們現(xiàn)在要使用history模式比較好看。Pick a CSS pre-processor預(yù)處理器：LessPick a linter/formatter config代碼審查工具:ESLint with error prevention onlyPick additional lint features什么時(shí)候進(jìn)行代碼風(fēng)格檢查:Lint on saveWhere do you prefer placing config for Babel在哪個(gè)地方去存一下配置文件：in package.jsonSave this as a preset for future project?N等待安裝...直到 Successfully created project mypro-------------從下面是打開(kāi)項(xiàng)目
Get started with the following commands:如果是緊跟著上面的步驟則使用下面的(1)進(jìn)入mypro文件夾下，否則直接打開(kāi)mypro文件夾里在里面的地址欄輸入cmd轉(zhuǎn)到mypro文件夾下。
（1）cd mypro  轉(zhuǎn)到mypro目錄下或直接到mypro的目錄中cmd
（2）等待安裝...直到 Successfully created project mypro  運(yùn)行服務(wù)器必須是在項(xiàng)目mypro的文件夾里生成地址：
直接在瀏覽器中輸入地址進(jìn)入到項(xiàng)目中不要關(guān)閉命令行，否則就會(huì)關(guān)閉服務(wù)器或者直接將我們的mypro文件夾拖動(dòng)用vscode打開(kāi)，在終端中打開(kāi)直接輸入 npm run serve

項(xiàng)目文件解讀

**node_modules:**項(xiàng)目依賴(lài)的核心模塊，該文件夾一定不要?jiǎng)?#xff0c;且該文件夾很大，一般傳輸項(xiàng)目時(shí)不壓縮發(fā)送該文件夾。----------一定不要修改

**public：**存放靜態(tài)文件。-----------一般情況下也不需要修改

• favicon.ico：里面存放的是地址欄上面的圖標(biāo)。

• index.html：項(xiàng)目中唯一的html文件，里面沒(méi)有什么內(nèi)容，只是提供一個(gè)掛載點(diǎn)。vue是一個(gè)單頁(yè)面應(yīng)用SPA。

src：最重要的文件，我們要編寫(xiě)的代碼基本都位于src目錄下。

• **main.js:**是項(xiàng)目的入口文件。之后的項(xiàng)目中就只有js文件了，在項(xiàng)目中只需要引入這一個(gè)main.js文件就行了，其他的js文件都會(huì)通過(guò)不同的渠道導(dǎo)入到main.js中來(lái)，否則js文件就會(huì)不生效。該main.js文件在唯一的html文件中掛載，沒(méi)有在html文件中引入，是底層自動(dòng)實(shí)現(xiàn)的。----------一般是不需要更改的在該文件中有創(chuàng)建vue實(shí)例：

import Vue from 'vue' //引入我們的vue文件（包）,只要是沒(méi)有./路徑的，引入的就是node_modules中的核心模塊
import App from './App.vue' //引入App.vue組件 ./代表當(dāng)前目錄
import router from './router' //如果直接寫(xiě)的是文件夾的名字，默認(rèn)引入的是該文件夾下面的index.js文件 等同于import router from './router/index.js'
Vue.config.productionTip = false //關(guān)閉生產(chǎn)環(huán)境的錯(cuò)誤提示,不然在用戶(hù)使用的時(shí)候發(fā)生Bug會(huì)出現(xiàn)提示
new Vue({router,render: h => h(App)
}).$mount('#app')//該main.js文件在唯一的html文件中掛載，沒(méi)有在html文件中引入，是底層自動(dòng)實(shí)現(xiàn)的。

與以往學(xué)習(xí)的vue實(shí)例的不同點(diǎn)：1、沒(méi)有使用el:"#app"掛載點(diǎn)：$mount('#app')也是掛載點(diǎn)的寫(xiě)法，二者的實(shí)現(xiàn)效果相同。區(qū)別：原來(lái)是配置項(xiàng)的形式，現(xiàn)在是主動(dòng)方法可以主動(dòng)調(diào)用。2、router：vue路由，路由也是vue的配置項(xiàng)，之前也有只是沒(méi)講而已。router:router3、沒(méi)有data、methods：根實(shí)例只是用于創(chuàng)建實(shí)例，不用于處理邏輯，渲染數(shù)據(jù)寫(xiě)邏輯不在這寫(xiě)，用組件。4、需要用到組件 App.vue，但沒(méi)有注冊(cè)組件：render函數(shù)接收App組件。關(guān)于render函數(shù)：接收vue組件，創(chuàng)建元素，渲染到頁(yè)面中， 把App組件渲染出來(lái)，App組件是項(xiàng)目中最大的組件。render: h => h(App)的原理等同于 :h=>render{return h(App)}等同于 render:function(h){return h(App)}等同于render:function(createElement){return createElement(App)}

• **App.vue：**單文件組件，在里面可以寫(xiě)組件所需的html頁(yè)面、樣式和js邏輯。要記得默認(rèn)導(dǎo)出，否則main.js引入就失敗了。安裝了Vue VSCode Snippets插件之后快捷創(chuàng)建模塊：vbase-css

<!-- 生成的模板 -->
<template><div></div></template><script>export default{//這里是組件中的data、methods、computed等}
</script><style scoped></style>

• assets文件夾：一般用來(lái)放靜態(tài)圖片資源、css3字體等。
• components文件夾：里面默認(rèn)的.vue文件組件可以刪除。一般用來(lái)存放公共布局組件（像側(cè)邊欄、頂部導(dǎo)航、尾部等頁(yè)面都有的）。
• router文件夾：一般用來(lái)存放路由相關(guān)的文件，如果之前沒(méi)有安裝路由則該文件夾就不會(huì)存在了。
• views文件夾：里面默認(rèn)的.vue文件組件可以刪除。創(chuàng)建的新頁(yè)面一般都放在里面（像經(jīng)常切換的頁(yè)面的功能組件）

**.gitignore：**git上傳需要忽略的文件格式。編輯器帶的配置不要上傳到倉(cāng)庫(kù)。

**babel.config.js:**主要用于在當(dāng)前和較舊的瀏覽器或環(huán)境中將ES6代碼轉(zhuǎn)化為向后兼容的版本。---------不需要更改

jsconfig.json: -jsconfig.json文件指定根目錄和JavaScript服務(wù)提供的功能選項(xiàng)。

**package-lock.json:**鎖定安裝模塊的版本號(hào)。在安裝依賴(lài)的時(shí)候避免安裝的是不同的版本導(dǎo)致的問(wèn)題。

**package.json:**模塊基本信息，依賴(lài)的模塊，名稱(chēng)，版本號(hào)。-----不用自己改

生產(chǎn)環(huán)境（上線(xiàn)時(shí)的環(huán)境）、開(kāi)發(fā)環(huán)境（程序員開(kāi)發(fā)過(guò)程中的使用的）、 測(cè)試環(huán)境（測(cè)試用的）。

生產(chǎn)依賴(lài)（項(xiàng)目上線(xiàn)時(shí)還需要的東西）、開(kāi)發(fā)依賴(lài)（開(kāi)發(fā)過(guò)程中使用，但在上線(xiàn)的時(shí)候就不用了）

調(diào)試代碼時(shí)不發(fā)node_modules文件夾，直接在終端執(zhí)行npm install 就會(huì)依據(jù)package.json安裝相應(yīng)的依賴(lài)，安裝的速度是很快的，在網(wǎng)上或公司中拿到的項(xiàng)目基本都是沒(méi)有node_modules文件夾需要自己安裝的。

package.json文件中的 “scripts"中定義了一系列的命令，像下面中的serve如果改為了"dev”，則啟動(dòng)項(xiàng)目的命令就變?yōu)榱?npm run dev，實(shí)際上是讓npm 幫助我們?nèi)ミ\(yùn)行vue-cli-service serve，這個(gè)是可以根據(jù)公司做修改的。

**README.md:**對(duì)項(xiàng)目的主要信息進(jìn)行描述，使用說(shuō)明。

**vue.config.js:**vue的其他配置，與webpack相關(guān)的。關(guān)于請(qǐng)求代理的部分就寫(xiě)在這里。

//vue.config.js文件
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,//跨域的解決方法：請(qǐng)求代理的配置devServer: {proxy: {"/api": {target: "https://api.binstd.com/recipe/search",  //每次需要更改的地方changeOrigin: true,//允許跨域pathRewrite: {'^/api': ''   //請(qǐng)求的時(shí)候使用這個(gè)api就可以}}}}// devServer：請(qǐng)求本地/開(kāi)發(fā)服務(wù)器// proxy：/?pr?ksi/ 代理// target：存放用來(lái)想請(qǐng)求的路徑地址// pathRewrite：路徑重寫(xiě)// '^/api' ：^代表以什么開(kāi)頭，以/api開(kāi)頭，重寫(xiě)為空，因?yàn)樵谡嬲l(fā)送請(qǐng)求的時(shí)候路徑中是不存在/api的// 用 /api來(lái)代替想要請(qǐng)求的地址，
})

13.單文件組件App.vue

單文件組件：一個(gè)文件就是一個(gè)組件，都是以.vue結(jié)尾的，允許正常的編寫(xiě)html,支持模塊化的樣式。自動(dòng)刷新

如果沒(méi)有單文件組件的話(huà)：

1.多個(gè)組件寫(xiě)在一個(gè)頁(yè)面中，亂

2.沒(méi)有html提示，沒(méi)有語(yǔ)法高亮

3.樣式的模塊化很明顯被遺漏了

views/pages視圖文件夾里面一般用來(lái)存放創(chuàng)建的.vue新頁(yè)面一–像經(jīng)常切換的頁(yè)面的功能組件）；components文件夾一般用來(lái)存放公共布局組件(像側(cè)邊欄、頂部導(dǎo)航、尾部等頁(yè)面都有的）；router文件夾一般是存放路由相關(guān)的文件。

單文件組件使用的注意點(diǎn)：

1、要記得默認(rèn)導(dǎo)出。

2、在要使用的頁(yè)面中要導(dǎo)入，相同路徑下要加"./"

3、在導(dǎo)入的文件中要注冊(cè)要使用的組件。

4、導(dǎo)入時(shí)的組件名和文件名都要求是多個(gè)單詞組成的，并且是大駝峰式的寫(xiě)法，但是在html中使用組件時(shí)改為“-”。默認(rèn)導(dǎo)出的文件在導(dǎo)入時(shí)的文件名可以是任意的。

5、樣式組件化生效：在style標(biāo)簽中加scoped<style scoped></style>表示樣式只在當(dāng)前組件中生效。

scoped是因?yàn)樵诓煌捻?yè)面生成不同的隨機(jī)值，

使用過(guò)程步驟：

導(dǎo)出/其他子組件：1、多個(gè)單詞的大駝峰式的命名；2、默認(rèn)導(dǎo)出(快捷鍵創(chuàng)建的模板中帶有自動(dòng)導(dǎo)出)；

APP.vue引入/在需要該子組件的組件中：1、導(dǎo)入(由于是默認(rèn)導(dǎo)出，文件名可以是任意的，多個(gè)單詞組成的大駝峰式命名)（注意：①引入文件的路徑的格式：②當(dāng)前路徑下要加’./‘；③文件名不加引號(hào)；④導(dǎo)入多個(gè)組件時(shí)，每次導(dǎo)入的語(yǔ)句后要加’;'標(biāo)點(diǎn)符號(hào)）；2、注冊(cè)(組件名就是引入的文件名）；3、在html中使用子組件(字母之間用‘-’代替)；

<!-- 子組件導(dǎo)出 -->
<template><div><h1>{{msg}}</h1></div></template><script>export default {data(){return {msg:'我是Info子組件'}}}
</script><style scoped>h1{color: yellow;}
</style>

<!-- App.vue文件導(dǎo)入 -->
<template><div><h1>{{msg}}</h1><!-- 3 使用 --><my-info></my-info></div></template><script>//1 導(dǎo)入import MyInfo from './views/MyInfo.vue'export default {data(){return {msg:"我是App根組件"}},//2 注冊(cè)components:{MyInfo}}
</script><style scoped>h1{color: blue;}
</style>

重新啟動(dòng)項(xiàng)目的方法：在終端控制臺(tái)中輸入ctrl+c，Y，再重新啟動(dòng)服務(wù)器npm run serve.