1、介紹vue

MVP和MVVM模式！！！

mvp模式，其中m是模型是ajax請求數據， v是視圖層（html），p是控制器，就是使用jq來實現業(yè)務邏輯相關操作(DOM操作很多)

MVVM模式，其中M是new實例里面相關操作，v是視圖層，vm即vue自己進行操作轉化！

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

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

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

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

})

//vue全局實例化

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

    }，
    method：{

    }
})

</script>

2、vue的實例化

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

computed中的get和set函數！！！

類名跟樣式表達式

：class=“{active：isActive}” 這時候，是通過isActive來控制active類名是否要顯示

：class=“[actived]” 這個時候activde的值是通過data里面的值來控制的

樣式表達式

：style=“styleObejt” styleObject的值是通過data來賦值==》styleObject：{color：#fff；}

key值標識唯一性

vue虛擬dom中，會有自帶緩存復用機制，如果它檢測到頁面上相同的東西沒有發(fā)生變化，它就會進行有效的復用！

例如：用戶名的時候input的輸入值是小明，當你把用戶名切換為密碼是，input上的值還是小明，這是因為input被復用了

當給下面的兩個input加key值，那么這時候input中的元素就不會被有效地復用！

v-for指令

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

數組操作

在vue中，對數值進行時不能直接通過下標來增加（刪除）數組，通過這種方式增加數組（刪除），數據上是變了，但是頁面上不會變。

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

在vue中如果想操作數組的同時，頁面跟著變化。有兩種方法。

第一種是使用數組中的7種編譯方法來操作數組

第二種是直接改變list數據的指定空間來改變

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

對象操作

第一點：遍歷對象的時候，直接往對象里面加值，這時候頁面也是沒有跟著變的，同樣可以改變對象的引用==》數據指向新的引用對象

第二點：用vue中的set方法方法來改變對象（第一個參數是key，第二個參數是name）和數組（第一個參數是下標，第二個參數是對應的值）

對象：

使用vue實例化方法的$set方法！！！！第一個是key，第二個參數是name

3、組件的使用

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

第二點：使用組件時的一些小細節(jié)用法

知識點1：使用table的時候，使用組件會有一個小bug，在渲染的時候table標簽下面只能是<tbody></tbody>下面只能是<tr></tr>,所以要是直接用<row>組件，在頁面渲染出來的<tr>標簽會出現在table外面！這時候在<tr>標簽上是使用is=“row”進行組件渲染符合H5規(guī)范，同樣的ul li標簽也適應

知識點2：在組件中使用data，當在跟組件中使用data的時候，data可以是一個對象的形式，因為在根組件中，數據只被調取一次，而在子組件中，數據有可能被調用多次，

這時候，不能data只能用函數，為每個數據都存儲不同的空間。

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


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

知識點3：

在vue中，如果遇到復雜的操作需要使用dom操作時，可以使用$refs引用屬性來獲取dom元素

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

在組件中使用ref來引用不同的子組件，這是ref指向的是這個組件

知識點4：父子組件傳值

父組件向子組件傳值都是通過屬性的形式傳值的（但是頁面渲染的時候，屬性沒有渲染出來）

<counter count="0"></counter> //傳值的時候，如果count前面沒有加“ ： ” 號，那么這時候傳的0是字符串類型

<counter :count="0"></counter> //傳值的時候，如果count前面有加“ ： ” 號，那么這時候雙引號里面的值是一個js表達式，這時候count傳0的是一個數字類型

單項數據流，子組件只能使用父組件傳過來的值，而不能直接對該屬性值進行直接改變，如果真的要改變，可以在子組件的data里另取一個變量進行賦值修改

父組件向子組件傳count值

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

知識點5：組件參數驗證，在子組件接收父組件傳過來的時，props可以對這些值進行一些校驗，除了使用自帶的基本校驗方式，我們還可以自定義validator進行自定義校驗！！！

注意：當用props屬性接收的時候，改屬性不會被渲染出來，如果是沒有用props屬性接收，那么就是非props屬性，

這時候頁面會報錯，子組件沒辦法用到content的值，而且這時候子組件渲染成<div content="hell"></div> content變成了子組件的自定義屬性。

知識點6：給組件綁定原生事件

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

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

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

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

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

})

知識點8：插槽（slot）

父組件向子組件優(yōu)雅傳dom值，使用插槽slot，當子組件中使用插槽slot時，父組件要是有傳值，那么solt上的默認值，就不會被顯示出來，插槽直接渲染父組件傳過來的值，如果沒有，默認值就會被顯示！

沒有給slot取名字的話，slot默認就是父組件插入的所有內容。取名字的話就會對應名字插件進去

知識點9：動態(tài)組件切換（v-once）

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

總結父組件跟子組件之間的相互通訊

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

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

}

子組件通過props的方式從父級接收數據：

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

}

}

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

<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的動畫

知識點1：動畫原理

首先，為需要動畫的標簽外層加一個<transition name=“fade”></transition>,然后可以給其設置一個名字，如果沒有設置名字，默認是V

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

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

知識點2：使用@keyframes（css3動畫）和為動畫自定義命名

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

知識點3：animate動畫庫

我們現在的應用場景是點擊按鈕的時候，動畫才會執(zhí)行，如果想頁面一加載就有動畫效果，我們可以給transition增加appear屬性并且設置appear-active-class=“animated swing”

知識點4：使用animated動畫庫跟自定義動畫并且設置動畫時長

type="transition"來指定動畫時長是以哪個動畫為準，這邊指的是以transition動畫時長為準！也可以通過設置：duration來設置自定義時間

4、vue中js的動畫與velocity.js結合

通過js來寫動畫效果

velocity.js實現動畫

知識點5：多元素和多組件的切換(狀態(tài)過度Tween.js)

多元素的切換，使用mode設置多個元素過度（組件）效果，設置key解除緩存效果，出現動畫效果

當多個元素是用v-for循環(huán)出來的時候，可以使用<transition-group></transition-group>來包裹v-for循環(huán)元素！！！

動畫封裝

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

6、去哪兒項目實戰(zhàn)

知識點1：單頁應用跟多頁應用

多頁應用：頁面的切換是通過請求不同的html頁面，首頁加載比較快，利于seo，缺點是切換頁面比較慢！

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

知識點2：路徑引用問題(webpack.base.config.js)

在vue中@符號表示的是src目錄下的文件

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

知識點3：static文件夾的用法

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

知識點4：步驟記錄

gitignore文件===》用來增加提交不提交到git倉庫里

知識點5：<keep-alive>（提高網站性能）

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

activated因為只有該生命周期函數會被執(zhí)行，在里面判斷前后數據有沒有變，有再重新執(zhí)行！！

我們可以通過2中方法來使用<keep-alive></keep-alive>來選擇緩存不同的路由頁面

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

<keep-alive include="test-keep-alive">
  <!-- 將緩存name為test-keep-alive的組件 -->
  <component></component>
</keep-alive>
 
<keep-alive include="a,b">
  <!-- 將緩存name為a或者b的組件，結合動態(tài)組件使用 -->
  <component :is="view"></component>
</keep-alive>
 
<!-- 使用正則表達式，需使用v-bind -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
 
<!-- 動態(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>

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

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

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

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

activated：keep-alive 組件激活時調用（頁面進入或顯示時失效被執(zhí)行）

deactivated：keep-alive 組件停用時調用（頁面離開或隱藏時失效被執(zhí)行）

注意一點：activated,deactivated這兩個生命周期函數一定是要在使用了keep-alive組件后才會有的，否則則不存在！！！

知識點7：打包編譯

知識點1：打包編譯上線，cnpm run build 命令編譯，然后提交dist 文件里面的index跟static文件。到服務端。然后就可以直接用localhost/的后端方式來打開！！！

知識點改變提交給服務端的路徑，這時候需要修改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文件修改問project！

這時候就可以通過localhost/project來訪問網站！！！

知識點8、異步組件調用提高網站加載速度從而提高性能

當路由中是調用組件名時，頁面在加載的時候會默認一次性把所有的組件頁面都加載出來，導致在打開首頁的時候，其它所有頁面一起被加載出來，從而打開速度緩慢！

方法一：在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
    },{

修改為//改為箭頭函數異步加載組件

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

方法二：在引用組件的時候用箭頭函數

components：{

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

}

文件打包編譯后會生成下面三個文件，用后端網址打開時會有以下三個文件

異步組件調用拆分后，app.js被拆分成一個個js文件

注意：當app.js文件特別大的時候，使用異步組件，對app.js進行拆分，拆分后每次切換到前面沒有加載過的頁面都相當于是一次http請求（有加載過的話，有緩存不需要重新加載），所以當app.js不是很大的時候，不推薦進行異步組件拆分，直接在進首頁的時候都加載！！！

知識點9、字體圖標的使用

如何使用字體圖標

首先打開iconfont官網，選擇相應的圖標添加購物車，然后加入我的項目，然后下載到本地。解壓，然后選擇如下文件放在自己的目錄下，然后修改iconfont.css下面相應的路徑。

然后在需要用到字體圖標的地方使用

iconfont.css路徑修改

調用文件

<span class="iconfont"></span>  //編碼在iconfont我的項目對應圖標那邊復制

如何新增字體圖標

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

2.在vue中，如果某個函數需要用到ajax返回的data值，那這時候，不能通過在created或者mounted來獲取數據然后調用函數，需要在請求成功時，直接調用傳數據！

3.箭頭函數的使用

在vue中使用cs6語法，直接使用箭頭函數，那么函數所指的作用域直接指向最外層，不用通過_this=this來指向最外層！！！res是函數里面的參數即是返回的結果！！！

4.過濾器的使用

過濾器的使用中，如果沒有帶參數，只需要寫函數名即可，默認第一個參數是val值。{{title | ratefilter}},要是用使用參數則需要用函數的形式來調用過濾器{{title | ratefilter（“元”）}}

5.需要item中的item.check字段，vue中如何來判斷一個ajax字段是否存在，如何給vue中設置需要的字段！！

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

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

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

forEach（）循環(huán)

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

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

6.@click事件里面可以直接使用簡單表達式操作，但是在使用vue的過程中，如是在視圖html命令上進行操作元素，不用使用this來指定作用域進行操作，因為在指令里面默認作用域就是當前元素，使用指令會導致出錯！只有在vue實例函數里面，才能使用this進行作用域指定！！！

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

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

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

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

實例1：@click.self.prevent

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

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

點擊div3，會alert3,alert1,跳轉到/#。只阻止了alert(2)。因為會先判斷self，點擊到div3，不是self（即div2自身的點擊），所以不會執(zhí)行click事件，就不會執(zhí)行 阻止默認事件和alert(2) ，所以可以跳轉！！！！

實例2：@click.prevent.self

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

點擊div3，會alert3,alert1。不但阻止了alert(2)，還阻止了a的默認跳轉。

因為點擊的時候會先prevent，阻止默認事件，阻止了跳轉;然后判斷是否是self，因為點擊到的是div3，所以不是self，阻止了alert(2)。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。