第一章

Vue概述

what? Vue是實(shí)現(xiàn)UI層的漸進(jìn)式j(luò)s框架驻债，核心庫關(guān)注視圖層乳规，簡(jiǎn)單的ui構(gòu)建，復(fù)雜的路由控制合呐、網(wǎng)絡(luò)通信...

? ? ? Vue.js（讀音 /vju?/暮的，類似于view）是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是淌实，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)冻辩。Vue 的核心庫只關(guān)注視圖層，它不僅易于上手翩伪，還便于與第三方庫或既有項(xiàng)目整合。另一方面谈息，當(dāng)與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫結(jié)合使用時(shí)缘屹，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用程序提供驅(qū)動(dòng)，是輕量級(jí)的 MVVM 框架

從最簡(jiǎn)單的數(shù)據(jù)處理侠仇，到數(shù)據(jù)交互轻姿，到DOM操作犁珠，到路由處理等，VueJS都有完整的解決方案

why? ?①?Vue借鑒了Angular指令和React組件的優(yōu)勢(shì)開發(fā)出來的

? ? ? ② Vue漸進(jìn)式的框架互亮，學(xué)習(xí)曲線比較緩和犁享，官方提供了全套的技術(shù)支持

? ? ? ③ Vue 效率比較高，代碼組織非常輕松

? ? ? ④ 單文件(以 .vue 結(jié)尾)豹休，其中包含了一個(gè)組件所需要用到的html/css/js

? ? ? ⑤ Vue是個(gè)人開發(fā)者開發(fā)的框架炊昆，比公司開發(fā)的框架發(fā)布版本、解決問題的速度更快

? ? ? ⑥ 支持jsx威根、js凤巨、ES6、typescript洛搀，支持的語法比較多

? ? ? ⑦ vue2.0引入了Virtual DOM(虛擬DOM)敢茁，頁面更新效率更高，速度更快

where? 可以做 ui 視圖層留美、實(shí)現(xiàn)SPA彰檬、也可以加入路由、網(wǎng)絡(luò)谎砾、狀態(tài)管理等逢倍，有非常多的官方工具

? ? ? ?IE9及更高版本才支持

問題: Vue和jQuery之間的區(qū)別?

Vue是聲明式，是通過描述狀態(tài)與視圖之間的映射關(guān)系棺榔，然后通過這樣的一個(gè)映射關(guān)系來操作DOM瓶堕，或者說是用這樣的映射關(guān)系來生成一個(gè)DOM節(jié)點(diǎn)插入到頁面中去

jQuery是命令式，使用jQuery操作DOM去局部更新視圖症歇，做到局部渲染郎笆，命令式就是想做什么就直接去調(diào)用方法直接做，簡(jiǎn)單直接

在邏輯上忘晤，Vue只有一個(gè)行為: 就是狀態(tài)宛蚓，而jQuery是兩個(gè)行為:?狀態(tài)+DOM，Vue可以讓開發(fā)者把關(guān)注點(diǎn)只放在狀態(tài)的維護(hù)上设塔，不需要關(guān)系操作DOM凄吏，降低了代碼維護(hù)的復(fù)雜度

https://cn.vuejs.org ? ? ? ? ? ? ? ? ? ? ? ? //官方教程

https://github.com/vuejs/vue-cli? ? ? ? ? ?? //用CLI搭建vue腳手架

https://github.com/vuejs/vue-devtools ? ? ?? //vue調(diào)試工具

? 下載倉庫→npm install下載依賴→npm run build編譯→Chrome→更多工具→擴(kuò)展程序

? →將shells/chrome文件夾拖過去，在F12(開發(fā)者工具)中看到Vue即可(chrome文件夾不能刪)

https://router.vuejs.org/zh-cn ? ? ? ? ? ? ? //路由手冊(cè)

https://github.com/pagekit/vue-resource ? ? ?//vue-resource文檔

https://github.com/vuejs/awesome-vue? ? ? ? ?//Vue的其它庫

how?

搭建Vue開發(fā)環(huán)境

方式1? 借助于vue-cli(Vue的腳手架工具闰蛔，30kB的gzipped)

npm install webpack -g ? ? ? ? ? ? ?//全局安裝webpack

npm install --global vue-cli ? ? ?? //全局安裝 vue-cli

vue -V ? ? ? ?? //查詢安裝的vue的版本

vue list ? ? ? ?//顯示可用的模板

vue init webpack(模板名)? myapp(項(xiàng)目名) ? ? ?? //創(chuàng)建一個(gè)基于 webpack 模板的完整項(xiàng)目

初始化設(shè)置:

Target directory exists. Continue? (Y/n)直接回車默認(rèn)會(huì)下載 vue2.0模板(可能需要連代理)

Project name (vue-test) ? ?直接回車默認(rèn)

Project description (A Vue.js project) ?? 直接回車默認(rèn)

Use ESLint to lint your code ? ? ?是否使用ESLink檢查代碼(可選N)

Author ?寫上自己的名字

cd 項(xiàng)目名 ? ? ? ? ? //切換到項(xiàng)目

npm install ? ? ? ? //安裝項(xiàng)目依賴(自動(dòng)安裝package.json中指定的文件到node_modules文件夾中)

npm run dev ? ? ? ? //運(yùn)行,調(diào)試模式(已自動(dòng)設(shè)置熱更新痕钢，在src中開發(fā)會(huì)自動(dòng)更新)

npm run build ? ? ? //發(fā)布,發(fā)布模式(編譯、打包)

在手機(jī)上查看vue.js項(xiàng)目:

①?修改config/index.js文件

? ?module.exports = {

? ? ?dev: {

? ? ? ?host: '0.0.0.0'? ? //原為: host: 'localhost'

? ? ?}

? ?}

②?查看本機(jī)ip(在命令行輸入ipconfig)

③ 將項(xiàng)目url中的localhost修改為此ip即可在手機(jī)端查看此項(xiàng)目(手機(jī)和電腦需要在同一局域網(wǎng)下)

import Vue from 'vue'

import VueRouter from 'vue-router'

import VueResource from 'vue-resource' ? ?//這三個(gè)都要在單文件的main.js中引入注冊(cè)才能使用

主目錄:

index.html ? ?? 首頁序六，可自由修改(可設(shè)置視口任连、引入zepto、md5例诀、echarts等,發(fā)布時(shí)會(huì)被單獨(dú)分開)

package.json ?? 可修改name随抠、版本裁着、描述、作者拱她，項(xiàng)目配置文件,指定項(xiàng)目的依賴

README.md ? ? ? 描述文件二驰，可修改

config ? ? ? ?? 配置，啟動(dòng)相關(guān),里面的index.js可修改

node_modules ?? 項(xiàng)目依賴的包

static ? ? ? ? ?放置靜態(tài)資源的文件夾(圖片秉沼、js桶雀、css文件等)

build/webpack.base.conf.js ?? 基礎(chǔ)配置文件，配置別名alias('@':resolve('src')氧猬，將@解析為src)

dist ? ? ? ? ?? 發(fā)布的文件目錄背犯，即webpack編譯輸出的目錄

src文件夾 ? ? ? 主要在此開發(fā)(開發(fā)目錄)

? main.js ? ? ? 入口文件，初始化vue實(shí)例并設(shè)置需要使用的插件(比如less盅抚、css,發(fā)布時(shí)不會(huì)被分開)

? ? ? ? ? ? ? ? ? 比如: require('./assets/css/adapter.less'); ?會(huì)被合成壓縮為一個(gè)文件

? App.vue ? ? ? 主組件漠魏，所有頁面都是在App.vue下進(jìn)行切換的，可以將所有的路由看作它的子組件

? router ? ? ? ?配置路由組件

?components??功能組件妄均，用來與用戶交互

mockServer ?? 模擬后端服務(wù)柱锹，即用webpack開發(fā)時(shí)模擬調(diào)用的后端服務(wù)（用nodejs服務(wù)模擬）

libs ? ? ? ?? 放置公共的文件，如js丰包、css禁熏、img、font等

通常一個(gè)前端項(xiàng)目會(huì)分有一個(gè) src 目錄和 dist 目錄邑彪，src放置源碼瞧毙，dist放置編譯后的代碼

static存放第三方靜態(tài)文件

src/main.js:全局配置

Vue.config.devtools=true; ?? //是否允許vue-devtools檢查代碼,方便調(diào)試

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//開發(fā)版本默認(rèn)為true，生產(chǎn)版本默認(rèn)為false

Vue.config.productionTip=false; ? ? ?? //是否需要vue啟動(dòng)時(shí)生成生產(chǎn)提示

build/webpack.prod.conf.js:?或config/index.js:

將 productionSourceMap: true, 改為false寄症，不輸出.map文件

npm install less less-loader --save ? ? //安裝less及其依賴項(xiàng)

方式2? 直接引入 vue.js 文件到項(xiàng)目工程中

________________________________________________________________________________________________

一宙彪、vue編譯打包后，css的引用路徑錯(cuò)誤:

1有巧、在webpack.prod.conf.js文件里的output里面添加: publicPath: './'

2释漆、在utils.js文件里添加:

? return ExtractTextPlugin.extract({

? ? use: loaders,

? ? fallback: 'vue-style-loader',

? ? publicPath: '../../',

? })

3、在config/index.js文件里篮迎，添加: assetsPublicPath: './'

二男图、使用Object.freeze()可以凍結(jié)一個(gè)對(duì)象，凍結(jié)后不能向?qū)ο筇砑有碌膶傩蕴鸪鳎荒苄薷囊延袑傩缘闹笛钒剩琕ue遇到這類對(duì)象時(shí)，不會(huì)為對(duì)象加上getter岂傲、setter等數(shù)據(jù)劫持的方法难裆，可以節(jié)省瀏覽器CPU開銷，比較適合展示類的場(chǎng)景

三譬胎、v-else指令必須緊跟在v-if或者v-else-if元素的后面差牛，否則它將不會(huì)被識(shí)別，當(dāng)v-if與v-for一起使用時(shí)堰乔，v-for具有比v-if更高的優(yōu)先級(jí)

所以當(dāng)循環(huán)的集合是為空時(shí)偏化，v-if后面的v-else不會(huì)被識(shí)別

解決: 可以將一個(gè)<template>元素當(dāng)做不可見的包裹元素，并在上面使用v-if進(jìn)行渲染分組镐侯，最終的渲染結(jié)果將不包含<template>元素

<template v-if="list!=null && list.length>0">

? <div v-for="item in list"></div>

</template>

<div v-else></div>

注意: v-show不支持template元素

四侦讨、判斷輸入框是否只讀

<input :name="item.ename" type="text" :readonly="item.readonly==1" />

五韵卤、綁定內(nèi)聯(lián)樣式

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

六沈条、去掉元素與元素之間的空格

在vue-loader中: vue:{?preserveWhitespace:false }

七蜡歹、問題: vue-loader會(huì)對(duì)style scoped中的每個(gè)選擇器添加一個(gè)自定義屬性月而，但掛載實(shí)例外的元素?zé)o法添加自定義屬性，導(dǎo)致選擇器無效

? ? 解決: 在<style type="text/css" scoped></style>外添加一個(gè)<style></style>寫對(duì)應(yīng)樣式

_______________________________________________________________________________________________

使用vue

1憨攒、vue基本用法

new Vue({

?el:"#example", ? ? ? ? //將實(shí)例與該選擇器對(duì)應(yīng)的元素綁定在一起(數(shù)據(jù)、組件會(huì)加載在其中)

? ? ? ? ? ? ? ? ? ? ? ? ?? 也可用class:'.example'包晰、標(biāo)簽:'div'炕吸，vue2.0不允許掛在到body/html上

?data:{ },? ? ? ? ? ? ? //初始化數(shù)據(jù)(所有的變量都要在 data 對(duì)象中初始化)

?methods:{ }, ? ? ? ?? //方法函數(shù) 都要放在 methods 對(duì)象中

? ? ? ? ? 方法里的this指new Vue的返回值,this.變量名赫模，可獲取/修改變量(data/methods...的成員)

?directives:{ } ? ? ? ?//指令放在directives中

})

2瀑罗、vue自帶指令

循環(huán)遍歷: ————— 遍歷得到的數(shù)據(jù)雏掠，后代元素可以直接使用乡话，使用v-for的元素會(huì)遍歷出現(xiàn)多次

v-for = "臨時(shí)變量名 in 集合"? ? ? ? ? ? ? ? ? ? ? ? ? //集合可以是對(duì)象或數(shù)組

v-for = "(value值, key下標(biāo)或?qū)傩? in 集合"

? ? <li v-for="tmp in list">

? ? ? <p>{{tmp}}</p>

? ? </li>

:key="key"可為遍歷的每個(gè)元素綁定唯一的key屬性，當(dāng)數(shù)據(jù)變化時(shí)闸婴，可重用之前的元素，提高渲染效率

選擇 ?v-if ? ?v-else-if ?? v-else ?? 添加分支處理不同的選擇結(jié)果溺欧，添加/移除在DOM樹上

? ? ? v-show ? ?控制元素的顯示/隱藏(不移除)

<divv-cloak>{{msg}}</div> ? ? ? ? ? 可以隱藏未編譯的標(biāo)簽直到實(shí)例準(zhǔn)備完畢再編譯

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?需要與css配合使用:?[v-cloak]{?display:none;?}

<div v-once><p>{{msg}}</p></div>

? ? ? 只渲染元素和組件一次姐刁，隨后的重新渲染聂使，元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過

綁定 ? ?v-bind? 將變量的值，綁定到組件的某一個(gè)屬性上(如href/width/height...)

<img v-bind:src="'../img/'+imgName" /> ? ? ?? //用字符串拼接,將變量綁定到屬性上

<imgv-bind:src="nowImage" /> ? ? ? ? //直接寫變量屎蜓，綁定到屬性上

<a?:href="urlName">天貓</a> ? ? ? ? //簡(jiǎn)寫炬转，省略v-bind(冒號(hào)不省略)

<img src="../img/1.jpg" /> ? ? ? ? ? ? ? ?//不帶變量可以不用綁定

<img v-bind:src="'../img/'+imgName" /> ? ?//綁定常量算灸，需要在引號(hào)內(nèi)加單引號(hào)

<img v-bind:src="nowImage" /> ? ? ? ? ? ? //綁定變量扼劈，直接放在引號(hào)內(nèi)即可

<button?v-on:click="handleClick">clickMe</button> ?? //為元素綁定事件處理函數(shù),不傳參可不加()

<button@click="handleClick">clickMe</button> ? ? ? //簡(jiǎn)寫菲驴，將 ?v-on: ?換成@

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?也可以將函數(shù)改為其它操作(如賦值)

Vue.js 為 v-on 提供了事件修飾符荐吵，通過由點(diǎn)(.)表示的指令后綴來調(diào)用修飾符

<a v-on:click.stop="doThis"></a> ? ? ? ? ? ? ?? 阻止單擊事件冒泡

<form v-on:submit.prevent="onSubmit"></form> ?? 提交事件不再重載頁面

<form v-on:submit.prevent></form> ? ? ? ? ? 只有修飾符

<div v-on:click.capture="doThis">...</div>? 添加事件偵聽器時(shí)使用事件捕獲模式

<div v-on:click.self="doThat">...</div> ? ? 只當(dāng)事件在該元素本身(而不是子元素)觸發(fā)時(shí)觸發(fā)回調(diào)

<a v-on:click.once="doThis"></a> ? ? ? ? ? 點(diǎn)擊事件將只會(huì)觸發(fā)一次

<a v-on:click.stop.prevent="doThat"></a> ? ?修飾符可以串聯(lián)

注: 使用修飾符時(shí)，順序很重要先煎，相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生

? ? 所以贼涩，用@click.prevent.self會(huì)阻止所有的點(diǎn)擊薯蝎，而@click.self.prevent只會(huì)阻止元素上的點(diǎn)擊

methods: {? ? //在 methods 對(duì)象中定義事件的方法

? handleClick: function(e){? ? ? ? ? //@click="handleClick"不需要傳參

? ? console.log(this.name)? ? ? ? ? ?// this 指向當(dāng)前 Vue 實(shí)例

? ? console.log(e.target.tagName)? ? // e 指向當(dāng)前的原生DOM元素

?}

}

vue可以給class或style屬性綁定對(duì)象或數(shù)組良风，且可以與普通的class屬性共存

<div class="static" v-bind:class="{active: isActive, 'text-danger': hasError}"></div>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //active和'text-danger'的值為真時(shí)會(huì)添加class，否則會(huì)移除

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //isActive/hasError也可換成Boolean類型結(jié)果的表達(dá)式

<div v-bind:class="classObject"></div> ?? //也可以綁定數(shù)據(jù)里的一個(gè)對(duì)象(對(duì)象的屬性作為類名)

data: { ? ? ?? //要在data中初始化變量為Boolean類型歪脏，當(dāng)變量變化時(shí)钞艇，class會(huì)隨之變化

? isActive: true,

? hasError: false,

? classObject: {

? ? active: true,

? ? 'text-danger': false

? }

}

可以為select指定默認(rèn)的option:

在option上綁定 :selected="sel.id == item.id"?返回true或false來指定默認(rèn)值

在Vue 2.0中，為自定義組件綁定原生事件必須使用 .native 修飾符:

<my-component @click.native="handleClick">Click Me</my-component>

數(shù)據(jù)綁定:

用雙花括號(hào)包裹變量可將數(shù)據(jù)顯示在視圖上豪硅，比如 ?<p>{{msg變量}}</p>

v-model是雙向數(shù)據(jù)綁定的指令哩照，可將視圖中用戶操作的結(jié)果綁定到數(shù)據(jù)上

? <input type="text" v-model="uName"/>

? <h1>{{uName}}</h1>

v-model 的修飾符:

.lazy

在默認(rèn)情況下，v-model 在 input(輸入后,立即觸發(fā),無延遲) 事件中同步輸入框的值與數(shù)據(jù)懒浮，但你可以添加一個(gè)修飾符 lazy飘弧，從而轉(zhuǎn)變?yōu)樵?change(失焦時(shí)觸發(fā),有延遲) 事件中同步

<input v-model.lazy="msg"/> ? ? ?? //"change"取代"input"事件，進(jìn)行更新

.number

如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為 Number 類型(如果原值的轉(zhuǎn)換結(jié)果為 NaN 則返回原值)砚著，可以添加一個(gè)修飾符 number 給 v-model 來處理輸入值

<input v-model.number="age" type="number"> ? ? ? ? ? ? ?//輸入字符串轉(zhuǎn)為數(shù)字

這很有用次伶，因?yàn)樵趖ype="number"時(shí)，HTML中輸入的值也總是會(huì)返回字符串類型

.trim

如果要自動(dòng)過濾用戶輸入的首尾空格稽穆，可以添加 trim 修飾符到 v-model 上過濾輸入

<input v-model.trim="msg"> ? ? ? ? ? ?//過濾掉首尾的空格

_______________________________________________________________________________________________

3冠王、vue自定義指令

自定義指令:? 在vue的實(shí)例中，指定一個(gè)directives 屬性舌镶，對(duì)應(yīng)的值是一個(gè)對(duì)象柱彻，在對(duì)象中創(chuàng)建指令、指定指令的鉤子函數(shù)

每一個(gè)指令對(duì)應(yīng)著都有自己的鉤子函數(shù)（bind綁定餐胀、update更新绒疗、unbind解綁...），會(huì)在指令的調(diào)用過程中骂澄，在合適的階段自動(dòng)執(zhí)行

new Vue({

directives:{

? change指令名:{? ? ? ? ? ? //創(chuàng)建指令

? ? bind: function(){ }, ? ? ?//綁定時(shí)調(diào)用吓蘑，只調(diào)用一次

? ? inserted: function(){ }, ?//被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用

? ? update: function(){ }, ? ?//被綁定元素所在的模板更新時(shí)調(diào)用,不論綁定值是否變化

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? (指令不會(huì)自動(dòng)發(fā)起更新，要用方法發(fā)起)

? ? componentUpdated: function(){ }, ?//被綁定元素所在模板完成一次更新周期時(shí)調(diào)用

? ? unbind: function(){ }, ?? //解綁時(shí)調(diào)用，只調(diào)用一次

?}

}?})

<pv-change>指令</p> ? ? ? ? //使用指令

鉤子函數(shù)被賦予了以下參數(shù):

el:? 指令所綁定的元素磨镶，可以用來直接操作 DOM

binding:? 一個(gè)對(duì)象溃蔫，包含以下屬性:

? name:? 指令名，不包括 v- 前綴

? value:指令的綁定值琳猫， 例如? v-my-directive="1 + 1", value 的值是2

? oldValue: 指令綁定的前一個(gè)值伟叛，僅在update和componentUpdated鉤子中可用,無論值是否改變都可用

? expression: 綁定值的字符串形式。例如 v-my-directive="1 + 1"脐嫂，expression 的值是"1 + 1"

? arg:? 傳給指令的參數(shù)统刮。例如? v-my-directive:foo，arg 的值是"foo"

? modifiers:? 一個(gè)包含修飾符的對(duì)象账千。例如? v-my-directive.foo.bar侥蒙，修飾符對(duì)象 modifiers 的值是{ foo: true,bar: true }

_______________________________________________________________________________________________

4、過濾器

vue2.0以后的版本匀奏，官方?jīng)]有提供任何的過濾器鞭衩，但有創(chuàng)建過濾器的接口

① 方案1: 創(chuàng)建自定義過濾器

過濾器的本質(zhì)其實(shí)就是方法，可以處理輸入娃善，返回輸出結(jié)果论衍，用來實(shí)現(xiàn)數(shù)據(jù)的篩選、過濾聚磺、格式化

在Vue實(shí)例的filters屬性中創(chuàng)建過濾器:

new Vue({

filters:{

? filterName過濾器名: function(value,arg1,arg2...){ ? ? ?? //value指在|前傳過來的參數(shù)

? ?return處理后的數(shù)據(jù)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? arg: 過濾器調(diào)用時(shí)坯台，()中的參數(shù)

? }

}?})

使用:?過濾器通過管道符號(hào)?|進(jìn)行調(diào)用，支持多重過濾

<p>{{ price|currency過濾器}}</p> ? ? ? ? ? ? ? ? ? ? //不傳參時(shí)不加()

<p>{{ price|currency過濾器('￥','@'...)}}</p> ? ? ?? //在()中可傳多個(gè)參數(shù)

② 方案2: 借助第三方的過慮器

https://github.com/wy-ei/vue-filter? ? ? ? //基于Vue2.0的過濾器的庫

引入對(duì)應(yīng)的js文件即可使用

_______________________________________________________________________________________________

5瘫寝、Vue 的計(jì)算屬性捂人、監(jiān)聽屬性

計(jì)算屬性定義的是一些方法，任何的計(jì)算屬性都可以在methods中定義一個(gè)相同的函數(shù)來替代它矢沿，兩種方式最終的結(jié)果是相同的

但不同的是計(jì)算屬性是基于它的依賴緩存的滥搭，計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新取值

也就是說只要 message 沒有發(fā)生改變，多次訪問'計(jì)算屬性中的方法'會(huì)立即返回之前的計(jì)算結(jié)果捣鲸，而不必再次執(zhí)行函數(shù)

計(jì)算屬性的優(yōu)勢(shì):

① 讓更新更高效瑟匆，可以處理復(fù)雜的業(yè)務(wù)邏輯

② 讓代碼維護(hù)更方便

計(jì)算屬性的創(chuàng)建:

new Vue({

computed:{

? handle方法: function(){?}

}?})

使用:

<p>{{handle方法名}}</p>

監(jiān)聽屬性:

new Vue({

watch:{

? kw: function(newValue,oldValue){ ? ?//kw: 要監(jiān)聽的變量名，需要初始化

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? newValue是改變后的值栽惶，oldValue改變前的值

? },

? a: {

? ? handler: function(newVal, oldVal){ ... },? ? //當(dāng)數(shù)據(jù)變化時(shí)執(zhí)行的回調(diào)函數(shù)

? ? immediate: true? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //創(chuàng)建組件時(shí)立即執(zhí)行一次回調(diào)函數(shù)

? },

}})

使用:

<input type="text" v-model="kw變量名"/> ? ? ? ?//雙向數(shù)據(jù)綁定

_______________________________________________________________________________________________

6愁溜、vue實(shí)例的生命周期

React的組件的生命周期:? mount ? ?update ?? unmount

Vue的實(shí)例的生命周期: ?? create ? mount ? ? update ?? destroy

每個(gè)Vue實(shí)例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程,在這個(gè)過程中,實(shí)例會(huì)調(diào)用一些生命周期鉤子函數(shù)

create:

beforeCreate ? 組件實(shí)例(*.vue頁面)剛被創(chuàng)建，組件屬性計(jì)算之前外厂，如data屬性等

created ? ? ?? 組件實(shí)例創(chuàng)建完成冕象，屬性已綁定，但DOM還未生成汁蝶，el屬性還不存在,掛載階段未開始

mount:

beforeMount ? ?模板編譯/掛載之前

mounted ? ? ? ?模板編譯/掛載之后(不保證組件已在document中)

update:

beforeUpdate ? 組件更新之前(虛擬DOM重新渲染之前)

updated ? ? ? ?組件更新之后

destroy:

beforeDestroy ?組件銷毀前調(diào)用(實(shí)例仍然可用)

destroyed ? ? ?組件銷毀后調(diào)用(調(diào)用后,Vue實(shí)例的所有東西都被解綁,所有事件被移除,子實(shí)例被銷毀)

使用方法:

new Vue({

? el: "#example",

? data: {

? ? msg: 1

? },

?mounted: function(){ ? ? ? ?//在生命周期函數(shù)中操作數(shù)據(jù)

? ? setInterval(()=>{

? ? ? this.msg++;

? ? ? console.log(this.msg);

? ? },0)

}?})

注意: mounted不保證所有的子組件都已掛載到DOM上渐扮，可用this.$nextTick來確保整個(gè)視圖都渲染完畢

mounted: function(){

?this.$nextTick(function(){

? ? //在整個(gè)視圖都已渲染完畢后運(yùn)行的代碼

? })

}

_______________________________________________________________________________________________

7论悴、組件的創(chuàng)建和使用 (分為局部組件和全局組件)

創(chuàng)建組件的方式: ?①局部組件 ?②全局組件 ?③jsx ?④使用ES6生成一個(gè).vue結(jié)尾的文件

注意: ?組件的命名、使用建議使用烤串的寫法墓律，字母要求都是小寫膀估，不能出現(xiàn)大寫字母，不能是標(biāo)簽名

① 局部組件的創(chuàng)建:

new Vue({

components:{

? '組件名': {

? ?template: '<p>局部組件<p>'

? }

} })

使用:

<my-component></my-component> ? ? ?? //與普通的html標(biāo)簽用法一樣

② 全局組件的創(chuàng)建:

Vue.component('組件名',{ ?? //使用Vue.component方法耻讽，創(chuàng)建在new Vue({ })之前

?template: `<ul> ? ? ? ? ? ? //組件只能有一個(gè)頂層標(biāo)簽

? <li>全局組件</li>

? <全局組件></全局組件> ? ? ? //組件的嵌套察纯，全局組件可以在任意一個(gè)組件(全局/局部)中使用

? </ul>`

});

全局組件的使用方法與局部組件一樣

全局組件和局部組件的區(qū)別:

全局組件可以用在任意一個(gè)組件中，可以構(gòu)造更復(fù)雜的全局組件

局部組件只能夠用在 vue 實(shí)例所綁定的元素視圖中

③?通過jsx的語法去指定模板 (必須在命令行創(chuàng)建的模板中才可以针肥，因?yàn)闀?huì)有對(duì)應(yīng)的依賴)

④ 直接創(chuàng)建一個(gè)以 .vue 結(jié)尾的文件（通過命令行創(chuàng)建的模板默認(rèn)的方式）

第二章*****************************************************************************************

注意: 若在創(chuàng)建的全局組件中饼记，需要初始化或者聲明數(shù)據(jù)，指定data屬性慰枕，該屬性對(duì)應(yīng)的值是一個(gè)方法具则，該方法需要返回一個(gè)對(duì)象

Vue.component("全局組件",{

? data:function(){ ? ? ? ? ?? //data屬性對(duì)應(yīng)的值是一個(gè)方法

? ? return { msg: ""} ? ? ?? //返回一個(gè)對(duì)象

? }

});

相當(dāng)于:

new Vue({

? el: "#example",

? data: {?msg: ""?} ? ? ? ? ? //相當(dāng)于 在vue實(shí)例中初始化數(shù)據(jù)

})

字符串里的內(nèi)容若要換行，建議使用模板字符串

_______________________________________________________________________________________________

組件通信: 2種方式

1捺僻、父向子傳遞數(shù)據(jù)(通過屬性)

Vue.component('father',{

? data:function(){

? ? return {value:""} ? ? ? ? ? ? //初始化數(shù)據(jù)

? },

? template: `<son v-bind:msg屬性="value"></son>` ?? //①?父組件調(diào)用子組件時(shí),為其指定屬性,

? ? ? ? ? ? `<son msg屬性="字符串"></son>`? ? ? ? ? ? ? 值為父組件的數(shù)據(jù) 或 字符串

})

Vue.component('son',{

?props: ['msg屬性'], ? ? ? ? ?? //② 子組件指定props屬性，對(duì)應(yīng)的值是數(shù)組崇裁，

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?數(shù)組中的字符串是從父組件傳遞過來的屬性名稱

? template: '<h1>{{msg}}</h1>' ?? //子組件可以使用'傳遞過來的屬性的值'匕坯，

})? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 與'在data屬性中定義的變量'用法一致

2、子向父?jìng)鬟f數(shù)據(jù)(通過事件)

Vue.component('father',{

? methods:{

? ? resMsg方法名: function(msg接收到的值){?}??//父通過方法接收值拔稳，msg就是從子傳來的值

? },

? template: `<son@toF自定義事件="resMsg方法名"></son>`? //① 在父中為子用v-on綁定自定義事件

})

Vue.component('son',{

? methods:{

? ? handleClick:function(){? ? ?? //③ 在方法內(nèi)調(diào)用this.$emit()方法葛峻，通過自定義事件向父?jìng)髦?/p>

? ? ??this.$emit('toF自定義事件','100要傳的值'); ? ?//傳變量時(shí),前加this.

? ? }

? },

? template:`<button @click="handleClick">向父?jìng)髦?lt;/button>` ?? //② 點(diǎn)擊觸發(fā)事件，調(diào)用方法

})

_______________________________________________________________________________________________

3巴比、父子通信（不僅可以傳屬性的值术奖，還可以傳方法）

優(yōu)點(diǎn): ?只需要設(shè)置接收方即可，發(fā)送方不需要額外設(shè)置轻绞，方便

缺點(diǎn): ?耦合度太高

父向子傳遞數(shù)據(jù)采记，子接受數(shù)據(jù)($parent):

在子組件中，通過'this.$parent'政勃，找到父組件唧龄，讀取父組件的屬性/方法

Vue.component('parent',{ ? ? ?? //父組件不需要額外設(shè)置

? template: `<son></son>`

})

Vue.component('son',{

? methods:{

? ? handleClick:function(){

? ? ?this.$parent.父的屬性/方法? ?//this.$parent: 子找到父組件的實(shí)例,讀取其屬性/方法

? ? }

? },

? template: `<button @click="handleClick"></button>` ? ?//調(diào)用方法，找到父的實(shí)例

})

子向父?jìng)鬟f數(shù)據(jù)奸远，父接收數(shù)據(jù)($refs):

ref(reference,引用既棺、參考)，給子組件指定一個(gè)ref屬性懒叛，在父組件中通過'this.$refs.指定的屬性名'找到子組件

Vue.component('parent',{

? methods:{

? ? handleClick:function(){

? ? ?this.$refs.son指定的屬性名.子的屬性/方法? ?//② this.refs.son: 父找到子組件的實(shí)例

? ? }

? },

? template: `<div>

? ? <sonref='指定的屬性名'></son> ? ? ?? //① 給子組件指定一個(gè)ref屬性

? ? <button @click="handleClick"></button> ? ?//調(diào)用方法丸冕，找到子的實(shí)例

? </div>`

})

Vue.component('son',{ ? ? ? ? ? ?//子組件不需要額外設(shè)置

? data:function(){

? ? return {?msg:'你好' } ? ? ?? //父可接收子的屬性/方法

? },

? template: `<any></any>`

})