1、介紹vue

MVP和MVVM模式！！！

mvp模式，其中m是模型是ajax請(qǐng)求數(shù)據(jù)， v是視圖層（html），p是控制器，就是使用jq來(lái)實(shí)現(xiàn)業(yè)務(wù)邏輯相關(guān)操作(DOM操作很多)

MVVM模式，其中M是new實(shí)例里面相關(guān)操作，v是視圖層，vm即vue自己進(jìn)行操作轉(zhuǎn)化！

首先使用vue（mvvm模式）可以通過(guò)兩種方式，

第一種：是直接通過(guò)引入vue.js的形式，那么這時(shí)候的vue直接寫在<script></script>里面，這時(shí)候的vue是全局注冊(cè)作為全局變量！我們進(jìn)行全局注冊(cè)組件的時(shí)候，可以直接引用，如果是進(jìn)行

<div id="app">
  {{ message }}     =======》》》》V層
   <todo-item></todo-item>
</div>

<script>
//vue中全局注冊(cè)組件
Vue.component("TodoItem",{
   props:['content'],
   template:"<li>{{content}}</li>",

})

//vue全局實(shí)例化

var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'，  =======》》》》M層
      content:"測(cè)試全局組件"

    }，
    method：{

    }
})

</script>

2、vue的實(shí)例化

3、vue中的基本語(yǔ)法
計(jì)算屬性（computed）、方法（methods）、事件監(jiān)聽(tīng)（watch）
computed屬性，會(huì)有一個(gè)緩存機(jī)制，計(jì)算頁(yè)面重新加載，只要計(jì)算的屬性沒(méi)有發(fā)生改變，就不會(huì)重復(fù)執(zhí)行computed，而方法methods中，只要頁(yè)面有重新加載就會(huì)被重復(fù)執(zhí)行，
對(duì)于監(jiān)聽(tīng)事件（watch），需要監(jiān)聽(tīng)的屬性有發(fā)生變化時(shí)才會(huì)執(zhí)行！！也既有緩存機(jī)制，但是相比代碼量會(huì)比computed多！！

computed中的get和set函數(shù)！！！

類名跟樣式表達(dá)式

：class=“{active：isActive}” 這時(shí)候，是通過(guò)isActive來(lái)控制active類名是否要顯示

：class=“[actived]” 這個(gè)時(shí)候activde的值是通過(guò)data里面的值來(lái)控制的

樣式表達(dá)式

：style=“styleObejt” styleObject的值是通過(guò)data來(lái)賦值==》styleObject：{color：#fff；}

key值標(biāo)識(shí)唯一性

vue虛擬dom中，會(huì)有自帶緩存復(fù)用機(jī)制，如果它檢測(cè)到頁(yè)面上相同的東西沒(méi)有發(fā)生變化，它就會(huì)進(jìn)行有效的復(fù)用！

例如：用戶名的時(shí)候input的輸入值是小明，當(dāng)你把用戶名切換為密碼是，input上的值還是小明，這是因?yàn)閕nput被復(fù)用了

當(dāng)給下面的兩個(gè)input加key值，那么這時(shí)候input中的元素就不會(huì)被有效地復(fù)用！

v-for指令

使用該指令的時(shí)候，設(shè)置key值是不要使用index來(lái)賦值，而是使用后端提供的id，這樣可以保證唯一性跟提高性能

數(shù)組操作

在vue中，對(duì)數(shù)值進(jìn)行時(shí)不能直接通過(guò)下標(biāo)來(lái)增加（刪除）數(shù)組，通過(guò)這種方式增加數(shù)組（刪除），數(shù)據(jù)上是變了，但是頁(yè)面上不會(huì)變。

例如list[4]={"id":4,name:"55"}這時(shí)候頁(yè)面上的list元素還是只有三個(gè)！

在vue中如果想操作數(shù)組的同時(shí)，頁(yè)面跟著變化。有兩種方法。

第一種是使用數(shù)組中的7種編譯方法來(lái)操作數(shù)組

第二種是直接改變list數(shù)據(jù)的指定空間來(lái)改變

在列表渲染中使用包裹占位符template，來(lái)包裹需要循環(huán)的列表，這時(shí)候template不會(huì)被頁(yè)面渲染出來(lái)！！

對(duì)象操作

第一點(diǎn)：遍歷對(duì)象的時(shí)候，直接往對(duì)象里面加值，這時(shí)候頁(yè)面也是沒(méi)有跟著變的，同樣可以改變對(duì)象的引用==》數(shù)據(jù)指向新的引用對(duì)象

第二點(diǎn)：用vue中的set方法方法來(lái)改變對(duì)象（第一個(gè)參數(shù)是key，第二個(gè)參數(shù)是name）和數(shù)組（第一個(gè)參數(shù)是下標(biāo)，第二個(gè)參數(shù)是對(duì)應(yīng)的值）

對(duì)象：

使用vue實(shí)例化方法的$set方法！！！！第一個(gè)是key，第二個(gè)參數(shù)是name

3、組件的使用

第一點(diǎn)：全局組件跟局部組件，和子組件與父組件之間的傳值

第二點(diǎn)：使用組件時(shí)的一些小細(xì)節(jié)用法

知識(shí)點(diǎn)1：使用table的時(shí)候，使用組件會(huì)有一個(gè)小bug，在渲染的時(shí)候table標(biāo)簽下面只能是<tbody></tbody>下面只能是<tr></tr>,所以要是直接用<row>組件，在頁(yè)面渲染出來(lái)的<tr>標(biāo)簽會(huì)出現(xiàn)在table外面！這時(shí)候在<tr>標(biāo)簽上是使用is=“row”進(jìn)行組件渲染符合H5規(guī)范，同樣的ul li標(biāo)簽也適應(yīng)

知識(shí)點(diǎn)2：在組件中使用data，當(dāng)在跟組件中使用data的時(shí)候，data可以是一個(gè)對(duì)象的形式，因?yàn)樵诟M件中，數(shù)據(jù)只被調(diào)取一次，而在子組件中，數(shù)據(jù)有可能被調(diào)用多次，

這時(shí)候，不能data只能用函數(shù)，為每個(gè)數(shù)據(jù)都存儲(chǔ)不同的空間。

Vue.component("row",{
       data:function(){
               return {
                       content:'this is content'
               }
       }， //在子組件中data必須以函數(shù)的形式并且以return的方式返回?cái)?shù)據(jù)
       template:'<tr><td>{{content}}</td></tr>'
})


var vm = new Vue({
      el:"#app",
      data:{}  //在根組件中是允許以對(duì)象的形式這樣寫的
})

知識(shí)點(diǎn)3：

在vue中，如果遇到復(fù)雜的操作需要使用dom操作時(shí)，可以使用$refs引用屬性來(lái)獲取dom元素

<div ref="hello">測(cè)試下ref</div> ===>>>>alert(this.$refs.hello.innerHTML) //測(cè)試下ref

在組件中使用ref來(lái)引用不同的子組件，這是ref指向的是這個(gè)組件

知識(shí)點(diǎn)4：父子組件傳值

父組件向子組件傳值都是通過(guò)屬性的形式傳值的（但是頁(yè)面渲染的時(shí)候，屬性沒(méi)有渲染出來(lái)）

<counter count="0"></counter> //傳值的時(shí)候，如果count前面沒(méi)有加“ ： ” 號(hào)，那么這時(shí)候傳的0是字符串類型

<counter :count="0"></counter> //傳值的時(shí)候，如果count前面有加“ ： ” 號(hào)，那么這時(shí)候雙引號(hào)里面的值是一個(gè)js表達(dá)式，這時(shí)候count傳0的是一個(gè)數(shù)字類型

單項(xiàng)數(shù)據(jù)流，子組件只能使用父組件傳過(guò)來(lái)的值，而不能直接對(duì)該屬性值進(jìn)行直接改變，如果真的要改變，可以在子組件的data里另取一個(gè)變量進(jìn)行賦值修改

父組件向子組件傳count值

子組件接收到后count值后，還需要對(duì)count的值進(jìn)行，修改，這時(shí)候把count值賦予新變量number，然后在子組件的data里面對(duì)number進(jìn)行修改

知識(shí)點(diǎn)5：組件參數(shù)驗(yàn)證，在子組件接收父組件傳過(guò)來(lái)的時(shí)，props可以對(duì)這些值進(jìn)行一些校驗(yàn)，除了使用自帶的基本校驗(yàn)方式，我們還可以自定義validator進(jìn)行自定義校驗(yàn)！！！

注意：當(dāng)用props屬性接收的時(shí)候，改屬性不會(huì)被渲染出來(lái)，如果是沒(méi)有用props屬性接收，那么就是非props屬性，

這時(shí)候頁(yè)面會(huì)報(bào)錯(cuò)，子組件沒(méi)辦法用到content的值，而且這時(shí)候子組件渲染成<div content="hell"></div> content變成了子組件的自定義屬性。

知識(shí)點(diǎn)6：給組件綁定原生事件

給組件綁定的事件都是自定義事件，這種事件只能從過(guò)子組件來(lái)觸發(fā)，如果想直接觸發(fā)原生事件可以在事件中加native！！

知識(shí)點(diǎn)7：非父子組件間傳值（Bus/總線/發(fā)布訂閱模式/觀察者模式）

Vue.prototype.bus = new Vue() ====>>>>表示把bus屬性掛載在vue是，這樣每個(gè)有用到VUE實(shí)例的地方都有bus屬性，而bus屬性又是一個(gè)new vue實(shí)例，所以也擁有vue的相關(guān)屬性！！！

觸發(fā)方：this.bus.$emit=('change',this.content)

接收方：this.bus.$on=('change',function(msg){

})

知識(shí)點(diǎn)8：插槽（slot）

父組件向子組件優(yōu)雅傳dom值，使用插槽slot，當(dāng)子組件中使用插槽slot時(shí)，父組件要是有傳值，那么solt上的默認(rèn)值，就不會(huì)被顯示出來(lái)，插槽直接渲染父組件傳過(guò)來(lái)的值，如果沒(méi)有，默認(rèn)值就會(huì)被顯示！

沒(méi)有給slot取名字的話，slot默認(rèn)就是父組件插入的所有內(nèi)容。取名字的話就會(huì)對(duì)應(yīng)名字插件進(jìn)去

知識(shí)點(diǎn)9：動(dòng)態(tài)組件切換（v-once）

應(yīng)用場(chǎng)景，例如我們想要通過(guò)點(diǎn)擊一個(gè)按鈕，實(shí)現(xiàn)不同組件的切換，這時(shí)候，我們可以使用兩種方法來(lái)實(shí)現(xiàn)，一種是使用componet的is屬性，一種是通過(guò)v-if，當(dāng)我們使用v-if進(jìn)行組件切換時(shí)，會(huì)對(duì)另一個(gè)組件進(jìn)行銷毀，然后切換到的時(shí)候再進(jìn)行創(chuàng)建，但是對(duì)于頻繁需要切換的靜態(tài)組件很好耗性能，我們可以加v-once，當(dāng)這個(gè)v-once組件被第一次切換的時(shí)候，就會(huì)被存在內(nèi)存里面，第二次使用的時(shí)候，就會(huì)被拿出來(lái)，在使用靜態(tài)頁(yè)組件切換時(shí)使用可以提高性能！！！

總結(jié)父組件跟子組件之間的相互通訊

<v-select :selectType="selectType"></v-select>
父組件傳值給子組件

export default {
data (){
return {
selectType:true;
}
}

}

子組件通過(guò)props的方式從父級(jí)接收數(shù)據(jù)：

props:{
selectType:{
type:Boolean,
default(){
return false;
}

}

}

在父級(jí)中：title是在子級(jí)中要用的名字，如果fff前面有：那么后面的tit就是個(gè)變量，在data中要去定義。如果沒(méi)有那么就是普通字符串。

<header :title="tit">

子組件傳值給父組件

子組件：<div class="sureBtn" @click="suremit"></div>

method:{

suremit:function(){

this.$emit('addShop',this.select,this.num);

}

}

父組件：

<v-select @addShop="sureAddShop"></v-select>

method:{

sureAddShop:function(key,num){}

}

4、vue中css的動(dòng)畫

知識(shí)點(diǎn)1：動(dòng)畫原理

首先，為需要?jiǎng)赢嫷臉?biāo)簽外層加一個(gè)<transition name=“fade”></transition>,然后可以給其設(shè)置一個(gè)名字，如果沒(méi)有設(shè)置名字，默認(rèn)是V

顯示的狀態(tài)流程，默認(rèn)第一幀是fade-enter，然后下一幀的時(shí)候fade-enter就會(huì)被銷毀，然后fade-enter-active是從第一幀開(kāi)始就存在，知道結(jié)束才銷毀，所以可以用該屬性監(jiān)聽(tīng)某個(gè)屬性的變化，從而使用transition進(jìn)行動(dòng)畫過(guò)度效果

隱藏狀態(tài)流程，默認(rèn)第一幀是fade-leave（動(dòng)畫第一瞬間就存在，所以從顯示到隱藏狀態(tài)這個(gè)轉(zhuǎn)態(tài)就已經(jīng)有了），下一幀fade-leave銷毀，fade-leave-to創(chuàng)建，而fade-leave-active從開(kāi)始到結(jié)束一直存在

知識(shí)點(diǎn)2：使用@keyframes（css3動(dòng)畫）和為動(dòng)畫自定義命名

自定義命名 enter-active-class=“active” ！！！

知識(shí)點(diǎn)3：animate動(dòng)畫庫(kù)

我們現(xiàn)在的應(yīng)用場(chǎng)景是點(diǎn)擊按鈕的時(shí)候，動(dòng)畫才會(huì)執(zhí)行，如果想頁(yè)面一加載就有動(dòng)畫效果，我們可以給transition增加appear屬性并且設(shè)置appear-active-class=“animated swing”

知識(shí)點(diǎn)4：使用animated動(dòng)畫庫(kù)跟自定義動(dòng)畫并且設(shè)置動(dòng)畫時(shí)長(zhǎng)

type="transition"來(lái)指定動(dòng)畫時(shí)長(zhǎng)是以哪個(gè)動(dòng)畫為準(zhǔn)，這邊指的是以transition動(dòng)畫時(shí)長(zhǎng)為準(zhǔn)！也可以通過(guò)設(shè)置：duration來(lái)設(shè)置自定義時(shí)間

4、vue中js的動(dòng)畫與velocity.js結(jié)合

通過(guò)js來(lái)寫動(dòng)畫效果

velocity.js實(shí)現(xiàn)動(dòng)畫

知識(shí)點(diǎn)5：多元素和多組件的切換(狀態(tài)過(guò)度Tween.js)

多元素的切換，使用mode設(shè)置多個(gè)元素過(guò)度（組件）效果，設(shè)置key解除緩存效果，出現(xiàn)動(dòng)畫效果

當(dāng)多個(gè)元素是用v-for循環(huán)出來(lái)的時(shí)候，可以使用<transition-group></transition-group>來(lái)包裹v-for循環(huán)元素！！！

動(dòng)畫封裝

<fade :show="show"></fade>

6、去哪兒項(xiàng)目實(shí)戰(zhàn)

知識(shí)點(diǎn)1：單頁(yè)應(yīng)用跟多頁(yè)應(yīng)用

多頁(yè)應(yīng)用：頁(yè)面的切換是通過(guò)請(qǐng)求不同的html頁(yè)面，首頁(yè)加載比較快，利于seo，缺點(diǎn)是切換頁(yè)面比較慢！

單頁(yè)應(yīng)用：頁(yè)面之前的切換是通過(guò)js來(lái)控制渲染，始終都是在同一個(gè)頁(yè)面，優(yōu)點(diǎn)是不同頁(yè)面之間切換速度快，缺點(diǎn)是首頁(yè)加載比較慢，不利于seo優(yōu)化！！！

知識(shí)點(diǎn)2：路徑引用問(wèn)題(webpack.base.config.js)

在vue中@符號(hào)表示的是src目錄下的文件

我們可以在webpack.base.config.js下面進(jìn)行路徑配置 ，在'styles': resolve('src/assets/styles'),設(shè)置完，需要重啟服務(wù)器

知識(shí)點(diǎn)3：static文件夾的用法

static文件下的東西是用來(lái)放靜態(tài)的東西，是vue中唯一一個(gè)不需要打包編譯就可以被外部訪問(wèn)的文件夾（通過(guò)相應(yīng)的路徑訪問(wèn)http://localhost:8088/static/mock/index.json），這里我們可以放模擬的數(shù)據(jù)！！！！

知識(shí)點(diǎn)4：步驟記錄

gitignore文件===》用來(lái)增加提交不提交到git倉(cāng)庫(kù)里

知識(shí)點(diǎn)5：<keep-alive>（提高網(wǎng)站性能）

使用<keep-alive>包裹在<router-view>來(lái)緩存路由，減少每次切換路由的時(shí)候，都請(qǐng)求ajax，但是使用這個(gè)緩存路由的時(shí)候，數(shù)據(jù)發(fā)送改變時(shí)也不會(huì)被重新請(qǐng)求路由，這時(shí)候需要用到keep-alive提供的方法

activated因?yàn)橹挥性撋芷诤瘮?shù)會(huì)被執(zhí)行，在里面判斷前后數(shù)據(jù)有沒(méi)有變，有再重新執(zhí)行！！

我們可以通過(guò)2中方法來(lái)使用<keep-alive></keep-alive>來(lái)選擇緩存不同的路由頁(yè)面

方法一：使用<keep-alive>內(nèi)封裝的include和exclude兩種方法

<keep-alive include="test-keep-alive">
  <!-- 將緩存name為test-keep-alive的組件 -->
  <component></component>
</keep-alive>
 
<keep-alive include="a,b">
  <!-- 將緩存name為a或者b的組件，結(jié)合動(dòng)態(tài)組件使用 -->
  <component :is="view"></component>
</keep-alive>
 
<!-- 使用正則表達(dá)式，需使用v-bind -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
 
<!-- 動(dòng)態(tài)判斷 -->
<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>
 
<keep-alive exclude="test-keep-alive">
  <!-- 將不緩存name為test-keep-alive的組件 -->
  <component></component>
</keep-alive>

方法二：動(dòng)態(tài)配置路由，在router里面的index.js設(shè)置

然后在然后在app.vue文件下修改一下keep-alive組件的用法

知識(shí)點(diǎn)6：activated方法和deactivated生命周期鉤子（activated和deactivated將會(huì)在<keep-alive>樹內(nèi)的所有嵌套組件中觸發(fā)）

keep-alive會(huì)緩存組件，是的每次切換路由的時(shí)候，頁(yè)面都不會(huì)重新請(qǐng)求ajax，而是直接用緩存里面的數(shù)據(jù)，如果這時(shí)候我們的數(shù)據(jù)發(fā)送變化需要重新請(qǐng)求ajax的時(shí)候，就需要用到keep-alive提供的activated函數(shù)（頁(yè)面重新顯示的時(shí)候會(huì)被執(zhí)行，可利用前后兩次的數(shù)據(jù)是否變化來(lái)判斷是否重新執(zhí)行ajax）

activated：keep-alive 組件激活時(shí)調(diào)用（頁(yè)面進(jìn)入或顯示時(shí)失效被執(zhí)行）

deactivated：keep-alive 組件停用時(shí)調(diào)用（頁(yè)面離開(kāi)或隱藏時(shí)失效被執(zhí)行）

注意一點(diǎn)：activated,deactivated這兩個(gè)生命周期函數(shù)一定是要在使用了keep-alive組件后才會(huì)有的，否則則不存在！！！

知識(shí)點(diǎn)7：打包編譯

知識(shí)點(diǎn)1：打包編譯上線，cnpm run build 命令編譯，然后提交dist 文件里面的index跟static文件。到服務(wù)端。然后就可以直接用localhost/的后端方式來(lái)打開(kāi)！！！

知識(shí)點(diǎn)改變提交給服務(wù)端的路徑，這時(shí)候需要修改config里面的配置，例如project文件里面

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/project',    //把路徑修改為需要更改的路徑

然后重新執(zhí)行命令cnpm run build然后在生成的dist文件修改問(wèn)project！

這時(shí)候就可以通過(guò)localhost/project來(lái)訪問(wèn)網(wǎng)站！！！

知識(shí)點(diǎn)8、異步組件調(diào)用提高網(wǎng)站加載速度從而提高性能

當(dāng)路由中是調(diào)用組件名時(shí)，頁(yè)面在加載的時(shí)候會(huì)默認(rèn)一次性把所有的組件頁(yè)面都加載出來(lái)，導(dǎo)致在打開(kāi)首頁(yè)的時(shí)候，其它所有頁(yè)面一起被加載出來(lái)，從而打開(kāi)速度緩慢！

方法一：在router文件下index。js修改

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'  //@表示src目錄下的文件
import City from '@/pages/city/City'
import Detail from '@/pages/detail/Detail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },{

修改為//改為箭頭函數(shù)異步加載組件

export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: () => import('@/pages/home/Home') //改為箭頭函數(shù)異步加載組件
}

方法二：在引用組件的時(shí)候用箭頭函數(shù)

components：{

header：（）=>import('./components/Header')

}

文件打包編譯后會(huì)生成下面三個(gè)文件，用后端網(wǎng)址打開(kāi)時(shí)會(huì)有以下三個(gè)文件

異步組件調(diào)用拆分后，app.js被拆分成一個(gè)個(gè)js文件

注意：當(dāng)app.js文件特別大的時(shí)候，使用異步組件，對(duì)app.js進(jìn)行拆分，拆分后每次切換到前面沒(méi)有加載過(guò)的頁(yè)面都相當(dāng)于是一次http請(qǐng)求（有加載過(guò)的話，有緩存不需要重新加載），所以當(dāng)app.js不是很大的時(shí)候，不推薦進(jìn)行異步組件拆分，直接在進(jìn)首頁(yè)的時(shí)候都加載！！！

知識(shí)點(diǎn)9、字體圖標(biāo)的使用

如何使用字體圖標(biāo)

首先打開(kāi)iconfont官網(wǎng)，選擇相應(yīng)的圖標(biāo)添加購(gòu)物車，然后加入我的項(xiàng)目，然后下載到本地。解壓，然后選擇如下文件放在自己的目錄下，然后修改iconfont.css下面相應(yīng)的路徑。

然后在需要用到字體圖標(biāo)的地方使用

iconfont.css路徑修改

調(diào)用文件

<span class="iconfont"></span>  //編碼在iconfont我的項(xiàng)目對(duì)應(yīng)圖標(biāo)那邊復(fù)制

如何新增字體圖標(biāo)

把新增的字體圖標(biāo)添加到項(xiàng)目后，然后下載到本地，替換四個(gè)字體文件，樣式文件不需要替換，但是必須修改下舊的iconfont.css里面的base64位路徑修改為最新下載下來(lái)的iconfont.css里面的base64位圖片位置！！

2.在vue中，如果某個(gè)函數(shù)需要用到ajax返回的data值，那這時(shí)候，不能通過(guò)在created或者mounted來(lái)獲取數(shù)據(jù)然后調(diào)用函數(shù)，需要在請(qǐng)求成功時(shí)，直接調(diào)用傳數(shù)據(jù)！

3.箭頭函數(shù)的使用

在vue中使用cs6語(yǔ)法，直接使用箭頭函數(shù)，那么函數(shù)所指的作用域直接指向最外層，不用通過(guò)_this=this來(lái)指向最外層！！！res是函數(shù)里面的參數(shù)即是返回的結(jié)果！！！

4.過(guò)濾器的使用

過(guò)濾器的使用中，如果沒(méi)有帶參數(shù)，只需要寫函數(shù)名即可，默認(rèn)第一個(gè)參數(shù)是val值。{{title | ratefilter}},要是用使用參數(shù)則需要用函數(shù)的形式來(lái)調(diào)用過(guò)濾器{{title | ratefilter（“元”）}}

5.需要item中的item.check字段，vue中如何來(lái)判斷一個(gè)ajax字段是否存在，如何給vue中設(shè)置需要的字段！！

使用typeof判斷一個(gè)字段是否存在，使用vue.$set來(lái)為item.check增加字段，同時(shí)如果點(diǎn)擊事件的時(shí)候要改變列表item中的某個(gè)值也需要使用this.$emit！！！但是如果是在forEach()里面可以直接賦值！！

如果列表是用v-for循環(huán)出來(lái)的，那么在進(jìn)行選中判斷的時(shí)候，可以使用索引來(lái)控制元素有沒(méi)有被選中！！其中列表中的每一項(xiàng)使用forEach來(lái)循環(huán)相應(yīng)的值，如果不是循環(huán)出來(lái)的列表，可以通過(guò)控制變量來(lái)實(shí)現(xiàn)選中操作!!!!!

循環(huán)出來(lái)的列表，控制選中方式！！！

forEach（）循環(huán)

循環(huán)出來(lái)的列表樣式控制

不是循環(huán)出來(lái)的列表選中方式控制

6.@click事件里面可以直接使用簡(jiǎn)單表達(dá)式操作，但是在使用vue的過(guò)程中，如是在視圖html命令上進(jìn)行操作元素，不用使用this來(lái)指定作用域進(jìn)行操作，因?yàn)樵谥噶罾锩婺J(rèn)作用域就是當(dāng)前元素，使用指令會(huì)導(dǎo)致出錯(cuò)！只有在vue實(shí)例函數(shù)里面，才能使用this進(jìn)行作用域指定！！！

7.vue中事件處理之事件修飾符@click.prevent.self和@click.self.prevent區(qū)別（事件執(zhí)行的過(guò)程中，根據(jù)冒泡事件從最里層開(kāi)始觸發(fā)到最外層依次執(zhí)行）！！！

@click.prevent事件表示，阻止默認(rèn)事件例如a標(biāo)簽中<a href="www.baidu.com" @click.prevent ="abc"> 這個(gè)時(shí)候a鏈接就不會(huì)跳轉(zhuǎn)，而是會(huì)執(zhí)行abc函數(shù)！！！！@click.prevent.self事件表示，會(huì)阻止所有的點(diǎn)擊。

所以這兩個(gè)的區(qū)別是@click.self.prevent只會(huì)阻止自身的點(diǎn)擊事件，而不會(huì)阻止默認(rèn)事件（跳轉(zhuǎn)事件）。而@click.prevent.self都會(huì)阻止

@click.self.prevent事件表示只會(huì)阻止對(duì)元素自身的點(diǎn)擊。就是只當(dāng)在 event.target 即點(diǎn)擊當(dāng)前元素時(shí)觸發(fā)處理函數(shù)，即如果事件不是自身元素觸發(fā)時(shí)，而是內(nèi)部元素點(diǎn)擊冒泡觸發(fā)時(shí)，改元素的點(diǎn)擊事件不會(huì)被執(zhí)行！！

實(shí)例1：@click.self.prevent

<div class="div1" @click="alertf(1)">我是第一個(gè)div
     <a class="div2" href="www.baidu.com" @click.self.prevent="alertf(2)">我是第一個(gè)div2
          <div class="div3" @click="alertf(3)">我是第一個(gè)div3</div>
     </a>
</div>

上面的代碼中，只有點(diǎn)擊div2的時(shí)候alertf(2)才會(huì)被觸發(fā)同時(shí)阻止默認(rèn)跳轉(zhuǎn)事件，觸發(fā)完冒泡觸發(fā)div1的點(diǎn)擊事件alertf(1)，然后div3的點(diǎn)擊事件alertf(3)不會(huì)被觸發(fā)！！！

點(diǎn)擊div3，會(huì)alert3,alert1,跳轉(zhuǎn)到/#。只阻止了alert(2)。因?yàn)闀?huì)先判斷self，點(diǎn)擊到div3，不是self（即div2自身的點(diǎn)擊），所以不會(huì)執(zhí)行click事件，就不會(huì)執(zhí)行 阻止默認(rèn)事件和alert(2) ，所以可以跳轉(zhuǎn)！！！！

實(shí)例2：@click.prevent.self

<div class="div1" @click="alertf(1)">我是第一個(gè)div
     <a class="div2" href="www.baidu.com" @click.self.prevent="alertf(2)">我是第一個(gè)div2
          <div class="div3" @click="alertf(3)">我是第一個(gè)div3</div>
     </a>
</div>

點(diǎn)擊div3，會(huì)alert3,alert1。不但阻止了alert(2)，還阻止了a的默認(rèn)跳轉(zhuǎn)。

因?yàn)辄c(diǎn)擊的時(shí)候會(huì)先prevent，阻止默認(rèn)事件，阻止了跳轉(zhuǎn);然后判斷是否是self，因?yàn)辄c(diǎn)擊到的是div3，所以不是self，阻止了alert(2)。

總結(jié)

以上是生活随笔為你收集整理的vue的学习(常用功能)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。