Vue.js特性：漸進(jìn)式技術(shù)棧

1. 輕量級(jí)的框架
2. 雙向數(shù)據(jù)綁定
3. 指令
4. 插件化

Vue實(shí)例書寫模板：

new Vue({
  el: '#app',
  template: '<h1>hello {{msg}}</h1>',
  data: {
    msg: 'world'
  }
})

• 訪問Vue實(shí)例的屬性：
  變量名.$Vue屬性名
• 訪問 Vue 實(shí)例 data 元素的屬性：
  變量名.屬性名

生命周期鉤子

有很多拓劝，具體查看官方文檔扁誓，經(jīng)常使用的有：

• created：實(shí)例創(chuàng)建后抑月，未掛載卓箫， $el 還不可用
• mounted：掛在到實(shí)例后調(diào)用（相當(dāng)于 jQuery 的 $(document).ready() ）
• beforeDestory：實(shí)例銷毀前調(diào)用淑倾，用于解綁監(jiān)聽事件

用法/插值表達(dá)式

{{}}中還可以使用 JS 表達(dá)式進(jìn)行簡(jiǎn)單的運(yùn)算或三元運(yùn)算
注：文本插值的形式鸥鹉，其中不能書寫表達(dá)式撑帖，支持單個(gè)表達(dá)式（var a=6; 是多行表達(dá)式筐眷，var a; a=6;）,不能使用流控制（如：if 等铐炫，使用三元運(yùn)算符）

過濾器（使用管道符‘|’）

語(yǔ)法：{{ data | filter1 | filter2 }} （可以多次過濾）
用于格式化文本（字母大小寫垒手，貨幣位號(hào)符，時(shí)間等）
注：還可以傳參 {{ data | formatData(a,b) }} 其中第一個(gè)參數(shù)和第二個(gè)參數(shù)倒信，分別對(duì)應(yīng)實(shí)例中過濾器的第二科贬、三個(gè)參數(shù)，實(shí)例中的第一個(gè)參數(shù)必須是 data 中數(shù)據(jù)（ Vue 實(shí)例的 filter 屬性）

指令和事件：快速完成 DOM 操作、循環(huán)渲染榜掌、顯示和隱藏

• v-text='' ：解析文本和 {{}} 作用一樣
• v-html='' ：解析html
• v-bind:屬性名='' ：動(dòng)態(tài)更新HTML元素上的屬性优妙，如 id ，class 等
• v-on:動(dòng)作名='函數(shù)名'：綁定事件監(jiān)聽器
  函數(shù)名：方法名寫在 Vue 實(shí)例中的 methods 屬性內(nèi)憎账，函數(shù)形式套硼，函數(shù)內(nèi)的 this 指向的是當(dāng)前 Vue 實(shí)例本身，可以直接使用 this.xxx 形式訪問或者修改數(shù)據(jù)胞皱。注：當(dāng)函數(shù)中還有函數(shù)時(shí)邪意，就要使用箭頭函數(shù)，要不然無法訪問當(dāng)前 Vue 實(shí)例

Vue 中用到的所有方法都定義到 methods 中

語(yǔ)法糖

在不影響功能的前提下反砌，使用簡(jiǎn)潔方法實(shí)現(xiàn)同樣效果
v-bind: ====> : （冒號(hào)）
v-on: ====> @

計(jì)算屬性

• 遇到復(fù)雜邏輯時(shí)雾鬼，最后返回一個(gè)結(jié)果，還可以依賴多個(gè) Vue 實(shí)例的數(shù)據(jù)：只要其中任意數(shù)據(jù)變化宴树，計(jì)算屬性就會(huì)重新執(zhí)行策菜，視圖也會(huì)更新
• getter和setter：每個(gè)計(jì)算屬性都會(huì)有這兩個(gè)方法，默認(rèn)使用 getter 方法酒贬， setter 手動(dòng)修改計(jì)算屬性的值時(shí)觸發(fā)
• 計(jì)算屬性還可以用于動(dòng)態(tài)設(shè)置元素的樣式名稱 class 和內(nèi)聯(lián)樣式 style

小技巧：

1. 計(jì)算屬性可以依賴其它計(jì)算屬性
2. 不僅可以依賴當(dāng)前 Vue 實(shí)例做入，還可以依賴其它 Vue 實(shí)例

• 計(jì)算屬性緩存：計(jì)算屬性都可以調(diào)用 methods 中的方法實(shí)現(xiàn)，如： {{函數(shù)名()}}
  • 頁(yè)面方法：如果調(diào)用方法同衣，只要頁(yè)面重新渲染，會(huì)重新執(zhí)行
  • 計(jì)算屬性：不管是否渲染壶运，所依賴數(shù)據(jù)未發(fā)生變化耐齐，就永遠(yuǎn)不變

計(jì)算屬性依賴緩存，當(dāng)遍歷大數(shù)組和做大量計(jì)算時(shí)蒋情，應(yīng)當(dāng)使用計(jì)算屬性

v-bind綁定class和style

• 綁定class
  1. 對(duì)象語(yǔ)法： v-bind:class="{ '類名':data屬性名 }"
     對(duì)象的鍵是類名埠况，值時(shí)布爾值（true：類名存在；false：類名不存在）當(dāng)表達(dá)式過長(zhǎng)或邏輯復(fù)雜時(shí)棵癣，還可以綁定計(jì)算屬性
  2. 數(shù)組語(yǔ)法：當(dāng)需要多個(gè) class 時(shí)辕翰，可以使用數(shù)組語(yǔ)法。數(shù)組成員為 data 屬性對(duì)應(yīng)類名
  3. 數(shù)組語(yǔ)法狈谊、對(duì)象語(yǔ)法混用：第一個(gè)成員是對(duì)象喜命，第二個(gè)成員是數(shù)組，如：:class="[{ active:isActive },errorClass]"
• 綁定內(nèi)聯(lián)樣式： v-bind:style 方法與 class 類似（對(duì)象語(yǔ)法河劝、數(shù)組語(yǔ)法）
  對(duì)象語(yǔ)法：鍵代表 style 屬性壁榕，值代表屬性對(duì)應(yīng)的 data 屬性
  注意：CSS 屬性名稱使用駝峰命名或短橫線分隔命名
  切記：Vue 中要是大寫字母都會(huì)轉(zhuǎn)換為 “-” 加小寫，如：dsfADbcG ====> dsf-a-dbc-g
  使用： style 時(shí)赎瞎，Vue.js 會(huì)自動(dòng)給特殊的 CSS 屬性名稱增加前綴牌里，比如：transform 無需再添加前綴

Vue.js內(nèi)置指令

基本指令

• v-cloack： 一般與 display:none 進(jìn)行結(jié)合使用
  作用：解決頁(yè)面初始化慢導(dǎo)致的閃動(dòng)問題
• v-once： 只渲染一次，后續(xù)都不會(huì)再重新渲染

條件渲染指令

• v-if务甥、v-else-if牡辽、v-else：用法為連著出現(xiàn)在三個(gè)標(biāo)簽內(nèi)喳篇，哪個(gè)滿足條件顯示哪個(gè)，后接布爾值态辛，如：

<p v-if='6>3'>1</p>
<p v-else-if='3<6'>2</p>
<p v-else>3</p>
//此時(shí)頁(yè)面顯示1

• v-show：知識(shí)改變 CSS 屬性 display 后接布爾值（true：顯示麸澜；false：消失）
  注：v-if 和 v-show 的區(qū)別
  • v-if：實(shí)時(shí)渲染：頁(yè)面顯示渲染，不顯示移除
  • v-show：永遠(yuǎn)存在頁(yè)面中因妙，只是改變 CSS 的 display 值
• v-for：列表渲染痰憎。遍歷多個(gè)對(duì)象；遍歷一個(gè)對(duì)象的多個(gè)屬性

注：當(dāng) Vue 在渲染頁(yè)面時(shí)攀涵，出于效率考慮铣耘，會(huì)服用已有元素，只會(huì)渲染了變化的元素
解決方法：加 key 以故，唯一蜗细。提供 key 值決定是否復(fù)用該元素
Vue檢測(cè)不到數(shù)組的變動(dòng)：1. 改變數(shù)組指定項(xiàng) Vue.set( app.arr, 1, "car") 2. 改變數(shù)組長(zhǎng)度 app.arr.splice(1)

方法和事件

如果方法中帶有參數(shù)，調(diào)用沒加括號(hào)怒详，默認(rèn)傳入原生事件 event
所以：方法中有參數(shù)時(shí)炉媒，調(diào)用加括號(hào)

修飾符

• stop：阻止事件冒泡。如： v-on:click.stop=''
• prevent：阻止默認(rèn)事件昆烁，誰(shuí)的默認(rèn)事件給誰(shuí)加
• self：只是作用在元素本身吊骤，而非子元素時(shí)調(diào)用
• one：只執(zhí)行一次的方法

監(jiān)聽鍵盤事件 @key.13='' ===> 指定的 keyCode

v-model：用于表單類元素上雙向綁定事件

input 和 textarea
注：所顯示的值只依賴于所綁定的數(shù)據(jù)，不再關(guān)心初始化時(shí)的 value

• 單選按鈕：
  1. 單個(gè)單選按鈕静尼，直接用 v-bind 綁定一個(gè)布爾值（用 v-model 不行）
  2. 如果是組合使用白粉，就用 v-model 來配合 value 使用，綁定選中的單選框的 value 值鼠渺，此處綁定的初始值 value 隨便給
• 復(fù)選框：
  1. 單個(gè)復(fù)選框：直接用布爾值鸭巴，可以用 v-model 和 v-bind
  2. 多個(gè)復(fù)選框：如果是組合使用就用 v-model 配合 value 使用， v-model 綁定一個(gè)數(shù)組拦盹，如果綁定的是字符串鹃祖，則會(huì)轉(zhuǎn)為 true 、 false 普舆，與其綁定的復(fù)選框的 checked 屬性相對(duì)應(yīng)恬口。
• 下拉框：
  1. 單選：綁定的 value 值初始化可以為數(shù)組、字符串沼侣，有 value 則匹配 value 值楷兽，無則匹配 text 值
  2. 多選：就需要 v-model 配合 value 使用， v-model 綁定一個(gè)數(shù)組华临，與復(fù)選框類似
  3. v-model 一定是綁定在 select 標(biāo)簽上

總結(jié)：

• 單選：初始化最好給定字符串芯杀， v-model 綁定靜態(tài)字符串或布爾值
• 多選：初始化最好給定一個(gè)數(shù)組

修飾符

• lazy： v-model 與 input 綁定時(shí)，默認(rèn)同步數(shù)據(jù)，加 lazy 可使其失去焦點(diǎn)或回車后更新
• number：將輸入的字符串轉(zhuǎn)化為 number 類型
• trim：自動(dòng)過濾首尾空格

組件

作用：提高代碼復(fù)用性（掛載都用變量名標(biāo)簽）

1. 全局注冊(cè)：優(yōu)點(diǎn)：所有實(shí)例都可以用揭厚；缺點(diǎn)：權(quán)限大却特，容錯(cuò)率低

Vue.component('變量',{
 template: '組件'
})

2. 局部注冊(cè)：在 Vue 實(shí)例中定義

new Vue({
  el: '#app',
  components: {
    '變量名': {
      template: '組件'
    }
  }
})

3. Vue 組件模板在某些 html 標(biāo)簽中受限，如：<table>

<table><tbody is='變量名'></tbody></table>

注意：1. 必須使用小寫字母加 ‘-’ 形式命名筛圆；2. template 中內(nèi)容必須被一個(gè) DOM 元素包裹裂明，可嵌套；3. 在組件定義中太援，除了 template 闽晦，還可以有 data、computed提岔、methods仙蛉；4. 其中 data 在組件中必須是一個(gè)方法

父組件向子組件傳遞數(shù)據(jù)

1. 在子組件中使用 props 從父組件接收參數(shù)。注：在 props 定義的屬性碱蒙，都可以在組件中直接使用
2. props 來自父組件荠瘪，而組件中 data return 的數(shù)據(jù)是子組件自己的，作用域是組件本身赛惩，可以在 template哀墓、computed、methods使用
3. props 的值有兩種：一種是字符串?dāng)?shù)組喷兼；一種是對(duì)象
4. 可以使用 v-bind 動(dòng)態(tài)綁定父組件內(nèi)容
   v-bind 使用與否向子組件傳遞數(shù)據(jù)區(qū)別：使用 v-bind：會(huì)將后邊內(nèi)容轉(zhuǎn)化為可轉(zhuǎn)化的類型篮绰；不使用 v-bind：傳遞數(shù)據(jù)時(shí)，默認(rèn)字符串

單向數(shù)據(jù)流：通過 props 傳遞數(shù)據(jù)單向季惯，子傳父不行

目的：解耦吠各。避免子組件修改父組件狀態(tài)
兩種情景：

• 父組件傳遞初始值進(jìn)來，子將其作為初始值保存起來星瘾，在自己作用域下隨意使用（在 data 中再申明數(shù)據(jù)，應(yīng)用父 props ）
• props 作為需要被轉(zhuǎn)變的原始值傳入（使用計(jì)算屬性進(jìn)行重算）

命名規(guī)則：Vue中使用駝峰

1. 在組件中的 html 必須使用短橫線命名
2. 在組件中惧辈，父組件給子組件數(shù)據(jù)琳状，必須短橫線。在 template 中盒齿，必須使用駝峰命名
3. 在組件中的 data 中念逞，用 this.xxx 引用時(shí)，只能是駝峰命名

子組件給父組件傳遞數(shù)據(jù)

子組件通過 $emit() 發(fā)布訂閱模式边翁，父組件訂閱該模式：$emit('fn',參數(shù)1) 參數(shù)1傳入父組件函數(shù)
$emit() 的代碼 實(shí)際上會(huì)傳一個(gè) input 事件翎承， input 后的參數(shù)就是傳遞給 v-model 綁定的屬性值
v-model其實(shí)是一個(gè)語(yǔ)法糖：1. v-bind 綁定一個(gè) value 元素；2. v-on 指令給當(dāng)前元素綁定 input 事件
要使用 v-model 必須：1. 接收一個(gè) value 屬性符匾；2. 在有新的 value 觸發(fā) input 事件

非父組件通信：可以使用一個(gè)空 Vue 實(shí)例作為中轉(zhuǎn)

父： var bus=new Vue()
子A： bus.$emit('變量名',x) 觸發(fā)A事件
子B： bus.$on('變量名',function(){}) 子B創(chuàng)建的鉤子監(jiān)聽

父鏈：this.$parent
子鏈：通過給子組件添加 ref 屬性增加索引 ref='a' 叨咖。this.$refs.c

自定義指令

與組件相同，分為全局注冊(cè)和局部注冊(cè)（組件中使用 directives ）

提供的鉤子函數(shù)：

• bind：只調(diào)用一次，指令第一次綁定到元素時(shí)
• inserted：綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用
• update：綁定元素所在模板更新時(shí)調(diào)用甸各，不管綁定值是否變化
• componentUpdated：完成一次更新周期調(diào)用
• unbind：解綁垛贤，只調(diào)用一次

鉤子函數(shù)的參數(shù)：

• el：指令所綁定元素
• binding：一個(gè)對(duì)象包含以下屬性：name：指令名；value：指令綁定值趣倾；oldValue：指令綁定的前一個(gè)值聘惦；expression：綁定值的字符串形式；arg：傳給指令的參數(shù)儒恋；modifiers：包含修飾符的對(duì)象
• vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)
• oldVnode：上一個(gè)虛擬節(jié)點(diǎn)善绎，僅在 update 和 componentUpdated 鉤子中可用

render函數(shù)

template 可以在 DOM 結(jié)構(gòu)中的 <script> 內(nèi)，在 JS 文件中 component 使用 template: '#id' 引入诫尽。 注： template 下只允許有一個(gè)子節(jié)點(diǎn)

• 在 render 函數(shù)的方法中禀酱，參數(shù)必須是 createElement ，類型為 Function
• render 函數(shù)：在該函數(shù)中 return 的是 createElement 函數(shù)
• 在 createElement 函數(shù)中第一個(gè)參數(shù)（必選）可以是 string箱锐、Object比勉、Function
  • string： html 標(biāo)簽
  • object：一個(gè)含有數(shù)據(jù)選項(xiàng)的對(duì)象 { template : '<p></p>' }
  • function：方法返回含有數(shù)據(jù)選項(xiàng)的對(duì)象
• 第二個(gè)參數(shù)可選：數(shù)據(jù)對(duì)象，只能是 Object 驹止『屏可以有 class:{類名:true} 、 style:{} 臊恋、attrs:{id:'id名'} 衣洁、domProps:{innerHTML:'<span></span>'} （用來寫原生的 DOM 屬性）
• 第三個(gè)參數(shù)可選： string 或 array

//createElement函數(shù)的三個(gè)參數(shù)
createElement(
  // {String | Object | Function}
  // 一個(gè) HTML 標(biāo)簽字符串，組件選項(xiàng)對(duì)象抖仅，或者
  // 解析上述任何一種的一個(gè) async 異步函數(shù)坊夫。必需參數(shù)。
  'div',

  // {Object}
  // 一個(gè)包含模板相關(guān)屬性的數(shù)據(jù)對(duì)象
  // 你可以在 template 中使用這些特性撤卢』吩洌可選參數(shù)。
  {
    // (詳情見下一節(jié))
  },

  // {String | Array}
  // 子虛擬節(jié)點(diǎn) (VNodes)放吩，由 `createElement()` 構(gòu)建而成智听，
  // 也可以使用字符串來生成“文本虛擬節(jié)點(diǎn)”《勺希可選參數(shù)到推。
  [
    '先寫一些文字',
    createElement('h1', '一則頭條'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

this.$slots在render函數(shù)中

• 第三個(gè)參數(shù)就是 vnode
• var header=this.$slots.header
• createElement('header',header) 'header' 標(biāo)簽；header 第三個(gè)參數(shù)惕澎，數(shù)組

注意：render函數(shù)中第二個(gè)參數(shù)莉测，綁定監(jiān)聽事件時(shí)

return createElement('input',{
  on:{
    input:function(event){
      var a=this //此時(shí)的this指的是window
    }
  }
})

所以要在 render 函數(shù)中指定 Vue 實(shí)例，如：

render:function(createElement){
  var self=this //此時(shí)的 this 就是 Vue 實(shí)例
}

作用域插槽在 render 函數(shù)

scope 最好寫在 template 標(biāo)簽
scope 后邊是 render 函數(shù)傳來的數(shù)據(jù)

return createElement('div',this.$scopedSlots.default({
  text:'我是子組件數(shù)據(jù)' // scope后的數(shù)據(jù)
}))

函數(shù)化組件

標(biāo)記組件為 functional唧喉，當(dāng)該值為 true 時(shí)捣卤，意味它是無狀態(tài) (沒有響應(yīng)式數(shù)據(jù))忍抽，無實(shí)例 (沒有 this 上下文)。
此時(shí)腌零， context 轉(zhuǎn)變梯找，作為 render 函數(shù)的第二個(gè)參數(shù)，this.$slots.default 更新為 context.children益涧，之后 this.level 更新為 context.props.level 锈锤。

vue-router

1. 安裝 npm install --save vue-router
2. 引用 import router from 'vue-router' 使用 Vue.use(router)
3. 配置路由文件，在 Vue 實(shí)例中注入

//配置路由文件
new Vue({
  router : [{
    path : '/', //跳轉(zhuǎn)路徑
    component : //跳轉(zhuǎn)組件
  }]
})

//在 Vue 實(shí)例中注入
new Vue({
  el : '#app',
  router : router,
  component : { App },
  template : '<App></App>'
})

4. 確定視圖加載位置 <router-view></router-view>

vue-router 路由跳轉(zhuǎn)

<router-link to='/'><router-link>

vue-router 傳參數(shù)

1. 必須在路由內(nèi)添加路由的 name
2. 必須在 path 后添加 :/+傳遞的參數(shù)（配置路由文件）

<router-link :to="{
  name : xxx,
  params : { msg: yyy }
}"></router-link>

讀取參數(shù)： $route.params.xxx
方式：====/helloworld/xxx

<router-link :to="{
  path : '/helloworld',
  query : { msg: yyy }
}"></router-link>

方式：====/helloworld?name=xxx&msg=yyy （不常用）

Axios

1. 安裝 npm install axios
2. 引入加載 import axios from 'axios'
3. 將 axios 全局掛載到 Vue 原型 import Vue from 'vue' Vue.prototype.$http=axios
4. 發(fā)請(qǐng)求 this.$http.get('xxx').then(function(res){}).catch(function(err){console.log(err)})

兩種傳參形式：

• axios.get( '/user' , { params : { ID : 1234 } } )
• axios.get( '/user' , { ID : 1234 } ) （只有一個(gè)參數(shù)時(shí)）或 axios.get('xxxxx?page=1&limit=15')

Axios之POST

post 傳遞數(shù)據(jù)兩種格式：

• form-data?page=1&limit=15
• x-www-form-urlencoded{page:1,limit:10}

在 axios 中闲询， post 請(qǐng)求接收的參數(shù)必須是 form-data
qs 插件------- qs.stringify

Vuex之store

用來管理狀態(tài)久免，共享數(shù)據(jù)，在各個(gè)組件之間管理外部狀態(tài)

1. 引入 Vuex 扭弧，并 use 方法使用
2. 創(chuàng)建狀態(tài)倉(cāng)庫(kù)（store阎姥，state不能改）

var store=new Vuex.Store({
  state:{xxx:xxx},//狀態(tài)
  mutations:{}
})

3. 直接通過 this.$store.state.xxx 拿到全局狀態(tài)

Vuex相關(guān)操作

View ====> actions（非必須，可添加異步）====> mutations ====> state ====> View

• 在 store 倉(cāng)庫(kù)中使用 mutations:{a:function(state){}}
  調(diào)用： this.$store.commit(xxx) 此處 xxx 是 mutations 中定義的方法名
• store 中定義 actions:{b:function(context){context.commit('a')}} （可有可無鸽捻，可添加異步）
  調(diào)用： this.$store.dispatch(xxx)
• store 中定義 getters:{c:function(state){return xxxx}}
  調(diào)用：this.$store.getters.xxxx （判斷狀態(tài)）

注意： actions 提交的是 mutations 呼巴，而不是直接變更狀態(tài)； actions 可以包含異步操作御蒲，但 mutation 只能同步操作

mixin

優(yōu)先使用組件本身的屬性