# 傳智播客vue 學(xué)習(xí)## 1. 什么是 Vue.js* Vue 開發(fā)手機(jī) APP 需要借助于 Weex* Vue.js 是一套構(gòu)建用戶界面的框架， **只關(guān)注視圖層**， 它不僅易于上手杜漠，還便于與第三方庫或既有項(xiàng)目的整合栓霜。* 前端主要工作主要負(fù)責(zé)MVC 中的 V 這一層；主要工作是和界面打交道捅厂，來制作前端頁面效果避乏。### 為什么要學(xué)習(xí)流行框架* 提高開發(fā)效率* 提高效率 原生 JS -> jQuery 之類的類庫 -> 前端模板引擎 -> angular.js / vue.js （能夠減少我們不必要的 DOM 操作爷耀，提高渲染效率；雙向數(shù)據(jù)綁定的概念【通過框架提供的指令拍皮，我們前端程序員只需要關(guān)心數(shù)據(jù)的業(yè)務(wù)邏輯歹叮，不再關(guān)心 DOM 是如何渲染的】）* 在 Vue 中，一個(gè)核心的概念就是讓用戶不再操作 DOM 元素铆帽，解放用戶的雙手盗胀，讓程序員更多的時(shí)間去關(guān)注業(yè)務(wù)邏輯。（去關(guān)注 MVC 的C層）## 2. 框架和庫的區(qū)別* 框架：提供了一整套解決方案锄贼；對項(xiàng)目的侵入性較大票灰，如果想要更換框架，則需要重新架構(gòu)整個(gè)項(xiàng)目宅荤。* node 中的 express* 庫（插件）： 提供某個(gè)小功能屑迂，對項(xiàng)目的入侵性較小，如果某個(gè)庫無法完成某些需求冯键，可以很容易切換到其他庫實(shí)現(xiàn)需求惹盼。## 3. 后端 MVC 與 前端中的 MVVM 之間的區(qū)別* MVC 是后端的分層開發(fā)概念。（M 主要是CRUD惫确，數(shù)據(jù)）（v就是視圖層）（c 就是業(yè)務(wù)邏輯層手报，路由，登錄 啊改化、注銷）* MVVM 是== 前端視圖層 ==的概念掩蛤，主要關(guān)注于 視圖層分離，也就是說：MVVM 把前端的視圖層陈肛，分為三個(gè)部分：Model揍鸟， View， VM ViewModel* MVVM 主要把每個(gè)頁面分成了 M句旱、V和VM阳藻。其中，VM 是 MVVM 思想的核心谈撒；因?yàn)閂M 是 M 和 V 之間的調(diào)度者腥泥。* MVC 是后臺(tái)對整個(gè)項(xiàng)目結(jié)構(gòu)歸類，MVVM 只是前端的視圖層啃匿。* MVVM 中的 M 保存著每個(gè)頁面中單獨(dú)的數(shù)據(jù)蛔外，（后臺(tái)返回的數(shù)據(jù)）。V就是每個(gè)頁面中的HTML 結(jié)構(gòu)。 VM 它是一個(gè)調(diào)度者冒萄，分割了M和V，每當(dāng)V層想要獲取或者保存數(shù)據(jù)的時(shí)候橙数，都要由VM做中間件的處理尊流。* 前端頁面中的使用，MVVM 的思想灯帮，主要是為了讓我們方便開發(fā)崖技，因?yàn)?MVVM 提供了數(shù)據(jù)的雙向綁定；注意：數(shù)據(jù)的雙向綁定是由MV 提供 的钟哥。* 三大框架都適合做單頁面應(yīng)用### 配置webpack babel* 安裝 npm i babel-loader babel-core babel-preset-es2015 babel-plugin-transform-runtime -D* rules: [ // 第三方匹配規(guī)則? { test: /\.js|jsx$/,use: 'babel-loader', exclude: /node_modules/ }//千萬別忘記添加 exclude 排除項(xiàng)? ],# Vue 語法## 1. vue 的基本代碼* 本次學(xué)習(xí) vue 版本為 2.4.0* 在頁面導(dǎo)入 vue 包 ```html```* 創(chuàng)建一個(gè) Vue 的實(shí)例 當(dāng)我們導(dǎo)入 vue 之后迎献，在瀏覽器的內(nèi)存中，就會(huì)多了一個(gè) Vue 構(gòu)造函數(shù)腻贰。 ```javascript
{{ msg }}
? ? ? ? ? // 2. 創(chuàng)建一個(gè)Vue 實(shí)例
? ? ? ? ? //? 當(dāng)我們導(dǎo)入包之后吁恍，在瀏覽器的內(nèi)存中，就多了一個(gè) Vue 構(gòu)造函數(shù)
? ? ? ? ? // 注意： 我們 new 出來的 vm 對象播演，就是我們的 MVVM 中的 VM 調(diào)度者
? ? ? ? ? var vm = new Vue({
? ? ? ? ? ? ? el: "#app",? // 表示我們 new 的這個(gè) Vue 實(shí)例冀瓦，要控制在頁面上的哪個(gè)區(qū)域
? ? ? ? ? ? ? // 這里的 data 就是 MVVM 中的 M，專門用來保存每個(gè)頁面的數(shù)據(jù)
? ? ? ? ? ? ? data: {? ? //data 屬性中写烤，存放著是 el 中要用到的數(shù)據(jù),不用再操作DOM 根據(jù)提供的指令直接操作
? ? ? ? ? ? ? ? ? msg: 'hello Vue' // Vue 不提倡我們手動(dòng)去操作 DOM 元素
? ? ? ? ? ? ? }
? ? ? ? ? })
? ? ? ```## 2. 單文件方式啟動(dòng)* 單文件就是以`*.vue` 結(jié)尾的文件翼闽，最終通過 webpack 也會(huì)編譯成為 `*.js` 在瀏覽器中運(yùn)行。* 內(nèi)容：++1. template 中只能有一個(gè)根節(jié)點(diǎn) 2.x（例如下面只能寫一個(gè) div）2. script 中 按照 export default {配置} 來寫3. style 中可以設(shè)置scoped 屬性洲炊，讓其只在 template 中生效### 以單文件的方式啟動(dòng)配置好 webpack 之后安裝 vue 相關(guān)的感局。* webpack 找人來理解你的單文件代碼? * vue-loader ,vue-template-compiler, 代碼中依賴 vue,? ? 依賴關(guān)系（和安裝順序沒關(guān)系），先加載暂衡，再解析询微，再依賴vue? * 安裝 npm i vue -S? * npm i vue-loader vue-template-compiler -D#### 使用1. 引入 vue? ? import Vue from 'vue';2. 創(chuàng)建一個(gè) Vue 實(shí)例，一般一個(gè)項(xiàng)目狂巢，大多數(shù)就是一個(gè) vue 實(shí)例來完成顯示拓提。? ```javascript? import Vue from 'vue'? import App from './app.vue'? ? ? // 創(chuàng)建一個(gè)Vue的實(shí)例，一般一個(gè)項(xiàng)目只有一個(gè)Vue實(shí)例來完成顯示? new Vue({? ? ? el: "#app",? // 目的地? ? ? render(creater) {? // 渲染的內(nèi)容? ? ? ? ? return create(App)? ? ? }? })? ```? Vue 模塊化開發(fā)? 創(chuàng)建一個(gè) app.vue 文件? ```javascript? export default {
? ? ? // 配置
? ? ? // 類似于 $scope.xxx = 'aaa'
? ? ? data() {
? ? ? ? ? return {
? ? ? ? ? ? ? txt: 'hello world',
? ? ? ? ? ? ? list: [{name: 'aaa'},{name: 'bbb'}]
? ? ? ? ? }
? ? ? }
? }
? ```? * 注意： 每一個(gè) 第三方模塊都有一個(gè) package.json 文件隧膘，其中 main 屬性后面對應(yīng)的是入口文件代态。## 3. 項(xiàng)目結(jié)構(gòu)* src 下存放著人可以看懂的代碼，具備一定的功能劃分疹吃，MVC* dist 存放著上線的代碼蹦疑，（減少請求、混淆代碼）萨驶，機(jī)器能看懂* 兩個(gè)命令? * webpack 立即讀取 配置文件歉摧，生成到 dist 目錄下? * Webpack-dev-server 運(yùn)行 src 下的代碼，虛擬出 build.js 測試* 拿到項(xiàng)目 npm i,? npm i --production? 不會(huì)安裝開發(fā)環(huán)境的依賴## 4. vue 組件化* angular 模塊化， 雙向數(shù)據(jù)綁定（臟檢測： 一個(gè)數(shù)組（$watch）叁温，更改之后檢測一大堆再悼，效率較差）* vue 組件化? 組件： 組合起來的一個(gè)部件? * 頭部： 頁面、樣式膝但、 動(dòng)態(tài)效果? * 代碼： template? style? script? * 雙向數(shù)據(jù)流（基于ES5中的 defineProperty 來實(shí)現(xiàn)的冲九，監(jiān)聽），IE9才支持## 5. 雙向數(shù)據(jù)流1. js 內(nèi)存屬性發(fā)生改變跟束，影響頁面的變化2. 頁面的改變影響Js內(nèi)存屬性的改變## 6. 常用指令* v-text 是元素的 inner-Text 只能在雙標(biāo)簽中使用（單標(biāo)簽一般用 value 屬性）* v-html 是元素的 innerHTML莺奸， 不能包含 {{xxx}} 表達(dá)式* v-if? 元素是否移除或者插入* v-show 元素是否顯示或隱藏* v-model 雙向數(shù)據(jù)綁定? 一般使用在 input 標(biāo)簽中? 使用不需要再給 input 標(biāo)簽再給 value 值，value 只能給字符串冀宴，不能給變量灭贷。? v-model 能給 select 標(biāo)簽選中變量指定的 option? 注意： v-model 相當(dāng)于綁定表單元素的 value 屬性* v-bind 給元素某屬性賦值? 例： v-bind:value='text' 這種綁定是單向的? 綁定之后可以傳遞變量來實(shí)現(xiàn)屬性的綁定。v-bind 會(huì)把后面綁定的屬性當(dāng)做變量來執(zhí)行略贮，符合 js 語法的都可以直接寫甚疟。* V-cloak 這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯。和 CSS 規(guī)則如?`[v-cloak] { display: none }`?一起用時(shí)逃延，這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢古拴。? v-cloak 當(dāng)做一個(gè)class一樣的屬性來使用。 在樣式中使用像元素屬性一樣使用真友，直接用[]包圍黄痪。避免閃爍。* ```? [v-cloak] {? ? display: none;? }
? ? {{ message }}
```v-bind 是單向數(shù)據(jù)綁定（內(nèi)存js 改變影響頁面）盔然，v-model 雙向數(shù)據(jù)綁定### class 結(jié)合 v-bind 使用* 需要根據(jù)可變表達(dá)式的結(jié)果來給 class 賦值桅打，就需要用到 v-bind:class="xxx"? ```javascript? export default {
? ? ? data() {
? ? ? ? ? return {
? ? ? ? ? ? ? isRed: true
? ? ? ? ? }
? ? ? }
? }
? ? ? ? .red {
? ? ? ? ? background: red;
? ? ? }
? ? ? .green {
? ? ? ? ? background: green;
? ? ? }
? ```
aaaaaa
可以簡寫，并且傳遞對象? 變量是直接在字符串中使用愈案，class 是在字符串中加 字符串? V-bind:? 可以簡寫為 :* v-bind:屬性名=“表達(dá)式”挺尾，最終表達(dá)式運(yùn)算結(jié)束的結(jié)果賦值給該屬性名? * 引號里面可以放變量，也可以放字符串站绪，字符串需要引號遭铺，把它當(dāng)成一個(gè) js? 區(qū)域即可。? ? 加引號表示一個(gè)字符串恢准，不加引號表示一個(gè)變量? * 多個(gè)樣式：返回對象（樣式做key,true或false做為值）? ? 對象的 key 可以加引號魂挂，也可以不加引號* 使用數(shù)組傳值的形式? :class="['red', 'green']"注意： 傳遞多個(gè)class 的時(shí)候，不能夠像 HTML 中直接并排寫馁筐，需要使用數(shù)組或者對象的形式涂召。單個(gè)class 即可以直接寫。### 內(nèi)聯(lián)樣式1. 直接在元素上通過 :style 的形式敏沉，書寫樣式對象? ```html
```? 采用了 : 就代表這是一個(gè)js 區(qū)域果正，因此 font-size 這樣的 - 的樣式需要加引號慌烧，也可以使用 fontSize 這樣的 JS 樣式書寫方式2. 直接使用 html 的內(nèi)聯(lián)樣式? 直接使用3. 在 data 中寫一個(gè)對象帜消，對象中防止它的樣式4. 放一個(gè)數(shù)組产禾，數(shù)組中傳遞一個(gè)一個(gè)的樣式對象（data中定義好的）倡缠，注意與 class 的區(qū)別。class 中的對象是在 style 標(biāo)簽中定義的迫皱，行內(nèi)樣式的對象是在 data 中定義的對象歉闰。### 6.1 事件* 綁定事件： v-on:事件? 例如： v-on:click? 事件后面加變量或者函數(shù)等任何表達(dá)式? 事件能夠?qū)崟r(shí)監(jiān)測頁面，頁面會(huì)根據(jù)綁定變量的變化而變化? 簡寫：@事件名=“表達(dá)式||函數(shù)名”? * 函數(shù)如果沒有參數(shù)舍杜，可以省略括號 @click="fn"? * 綁定函數(shù)? 事件后面可以直接綁定函數(shù)。 v-on:click="fn()"? 在方法中使用當(dāng)前模塊的變量需要加 this 來調(diào)用* 函數(shù)寫在 methods 中? 聲明組件內(nèi)函數(shù)赵辕，在 export default 這個(gè)對象的根屬性加上 methods 屬性既绩，其是一個(gè)對象? * key 是函數(shù)名 值是函數(shù)體? 在 export default 這個(gè)對象的跟屬性加上 data 屬性，其是一個(gè)函數(shù)还惠，返回一個(gè)對象? * 對象 的屬性使我們初始化的變量的名稱#### 6.1.1 事件修飾符* 在事件處理程序中調(diào)用?`event.preventDefault()`?或?`event.stopPropagation()`?是非常常見的需求事件修飾符：* .stop 阻止冒泡? 一定要明確 冒泡 行為是從里到外饲握，阻止之后外層盒子綁定的事件將不再執(zhí)行，不再有委托特性蚕键。* .prevent 阻止默認(rèn)事件? 比如說 a 標(biāo)簽的點(diǎn)擊觸發(fā)事件,救欧，能夠阻止a 標(biāo)簽的跳轉(zhuǎn)* .capture 添加事件偵聽器時(shí)使用事件捕獲模式? 與冒泡觸發(fā)事件相反。從外向里觸發(fā)事件锣光。* .self 只當(dāng)事件在該元素本身（比如不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào)? 防止事件委托笆怠。.self 與 .stop 的區(qū)別就是 .self 是給最外層的盒子加的修飾符，.stop 是 給子元素添加的修飾符誊爹。.self 并不能阻止從它本身向外冒泡的性質(zhì)蹬刷。* .once 事件只觸發(fā)一次事件修飾符可以鏈?zhǔn)秸{(diào)用，例如 .prevent.once频丘，once 是作用于 前面的事件的办成，阻止默認(rèn)事件只執(zhí)行一次。使用：?@click.stop * v-for 的使用? 可以使用操作數(shù)組 （item,index）? 可以使用 操作對象 （value, key, index）? 使用：? 數(shù)組： v-for="(value, index) in arr" :key="index"? 對象：? v-for="(value, key, index) in obj" :key="index"? 數(shù)字：迭代數(shù)字? v-for="i in 10" 也需要key? 需要綁定 key ,key 的值可以為 number 也可以為 string 不能為對象? :key="index"? 注意： key 的值最好用 value 中一項(xiàng)搂漠，防止出錯(cuò)總結(jié)：1. v- 指令后面加字符串迂卢，字符串中加js變量或者語句* data 中的數(shù)據(jù)既可以使用v-text 類似有意義的綁定，也可以在 {{}} 中直接使用桐汤。2. 凡是在 template 中使用 當(dāng)前模塊的變量而克，不需要加this? ? 在script中使用當(dāng)前模塊的變量，需要加 this3. 沒有加 v- 的指令需要使用 v-bind: 來綁定4. 實(shí)例化的 Vue 對象會(huì)實(shí)時(shí)監(jiān)聽自身 data 的變化怔毛，只要數(shù)據(jù)發(fā)生改變拍摇，就會(huì)自動(dòng)把最新的數(shù)據(jù)，從 data 中同步到頁面上馆截。好好處就是 只關(guān)心數(shù)據(jù)充活，不需要操作 DOM 蜂莉，關(guān)心 DOM 的改變。5. v-if? 直接不會(huì)創(chuàng)建出該元素? v-show 只是會(huì)隱藏該元素? v-if 有較高的切換性能消耗? v-show 有較高的初始渲染消耗### 6.2 eval() 方法的再次登場* 計(jì)算字符串中的值混卵，并返回（若果有的話）* 字符串中是表達(dá)式映穗，不是語句### 6.3 array 又添加方法啦* arr.map 方法，能夠遍歷數(shù)組中的每個(gè)元素幕随，做出相應(yīng)的處理蚁滋。參數(shù)為function(item,key)和forEach 相同* arr.some 方法，找到符合條件的元素就結(jié)束赘淮。參數(shù)相同辕录，都是用 return 來結(jié)束* arr.forEach() 方法，只是遍歷數(shù)組梢卸，不會(huì)對本數(shù)組進(jìn)行操作走诞，可以用外面的數(shù)組來進(jìn)行對比操作* arrfilter() 方法，過濾吊不符合的元素蛤高，并返回新數(shù)組## 7. SPA（單頁面應(yīng)用）組件的使用* 使用組件的組件就是父組件* 被使用的組件就是子組件單頁面中使用組件：（在導(dǎo)出的對象中）```javascriptcomponents: {? ? // 組件名(在末班中使用的)：組件對象}```組件對象需要在script 標(biāo)簽中使用 import 引入* 單頁面樣式的使用? 如果希望該樣式只在當(dāng)前組件有效蚣旱，可以給 style 加一個(gè) scoped 屬性* 父子組件的使用（父傳子）? * 父和子，使用的父戴陡，被使用的是子? * 父需要聲明子組件塞绿，引入子組件對象，聲明方式如下? ```javascript? components: {? ? ? // 組件名(在末班中使用的)：組件對象? }? ```? 需要先引入一下恤批。? 注意引入的組件名稱不能夠使用 - 來連接* 全局組件异吻，使用更為方便，不需要聲明喜庞，直接使用涧黄，需要在 main.js (index.js) 中引入? 在 main.js (index.js) 中引入一次，使用 vue.component('組件名', 組件對象)赋荆；? 注冊一個(gè)組件笋妥，第一個(gè)參數(shù)是名稱，在 template 中使用窄潭，第二個(gè)參數(shù)是實(shí)際的對象春宣，顯示成什么內(nèi)容，具備什么功能? ```javascript? import Vue from "vue"? import App from "./components/app.vue"? import Headervue from "./components/header.vue"? import Bodyvue from "./components/body.vue"? import Footervue from "./components/footer.vue"? ? Vue.component("Headervue", Headervue);? Vue.component("Bodyvue", Bodyvue);? Vue.component("Footervue", Footervue);? ? new Vue({? ? ? el:"#app",? ? ? render(creater) {? ? ? ? ? return creater(App)? ? ? }? })? ```? 直接就可以全局使用了嫉你。* 接受父組件值參數(shù)的設(shè)置? 例子：props: ['text1']? ?是一個(gè)數(shù)組月帝，可以接受很多數(shù)據(jù)。== 接受組件在實(shí)例化過程中傳遞的參數(shù)幽污。 ==? ?組件在作為標(biāo)簽使用的時(shí)候要定義一個(gè) text1 = 'aaa'? 的屬性嚷辅。? 可以通過使用 v-bind:text="name" 的形式，來讓 text 能夠被賦值變量距误。? 在js 中獲取props 中的值簸搞，直接使用 this.text 來獲取扁位，和獲取 data 中的數(shù)據(jù)是一樣的。 ### 7.1 父傳子* 父組件通過子組件的屬性將值進(jìn)行傳遞? 方式有2：常量趁俊， 變量* 子組件需要聲明? 根屬性 props: ["prop1", 'prop2']? 在頁面中直接使用 {{prop1}}注意： 1. 組件 當(dāng)標(biāo)簽使用的時(shí)候域仇，不能再給標(biāo)簽中加?xùn)|西了（加了也不頂用），而且都是雙閉合標(biāo)簽2. 只有帶 v- 的屬性可以傳遞變量寺擂，其他自定義的只能傳遞字符串暇务，當(dāng)做傳入的值≌恚可以使用 v-bind:text=""的形式來綁定垦细，這樣之后就可以直接傳遞變量。3. 子組件的形式是一下傳遞一個(gè)子組件對象挡逼，全局組件的形式是一個(gè)一個(gè)傳入組件對象括改，因此一個(gè)加 s 一個(gè)不加 s## 8. 如何查看 vue 文檔* 全局 API 和 配置? 通過Vue. 能夠調(diào)用的* 實(shí)例方法/事件? 實(shí)例：組件內(nèi)的 this 和 new Vue()? ? 只要能調(diào)用 this，就是一個(gè)實(shí)例* 選項(xiàng)/數(shù)據(jù)? options/類別 和實(shí)例相關(guān)挚瘟，就是實(shí)例中的export 導(dǎo)出的那部分的key和new Vue 中傳遞的參數(shù)* 全局的 API 是在 index.js 文件中添加叹谁，然后所有的 組件 中都能使用的? 全局API 對應(yīng)的局部選項(xiàng)饲梭，是在每個(gè)組件中乘盖，為當(dāng)前組件添加的## 9. 子向父組件通信（vuebus）（擴(kuò)展）* 父與子組件之間的通信可以通過? 實(shí)例.$on('自定義事件名稱', function(){})? 實(shí)例.$amit('事件名稱', '參數(shù)')? 使用$amit 能夠出發(fā) $on 中自定義的事件? 使用一個(gè)中間的模塊，中間模塊 new 一個(gè) Vue 對象憔涉，兩個(gè)組件分別引入這個(gè) Vue 對象订框，調(diào)用這兩個(gè)方法，可以實(shí)現(xiàn)通信兜叨。************在 vue 中不會(huì)提及 DOM 元素的操作穿扳，只要涉及直接操作 DOM 元素，都應(yīng)該用 vue 來實(shí)現(xiàn)## 10. 過濾器* vue 允許你自定義過濾器国旷，可被用于一些常見的文本格式化矛物。過濾器可以用在這兩個(gè)地方，mustachc插值{{}}和 v-bind 表達(dá)式跪但。過濾器應(yīng)該被添加在 js 表達(dá)式的尾部履羞，有管道 符指示。? 例： {{ name | nameope }}* 定義一個(gè)過濾器? Vue.filter('過濾器名稱', function(data) {})? function 中第一個(gè)參數(shù)為管道符前面的值屡久。? ```javascript? Vue.filter('msgFormat', function(msg) {? ? ? return msg.replace('aaa', 'bbb')? })? ```? ```javascript? Vue.filter('msgFormat', function(msg, arg1, arg2) {? ? ? return msg.replace('aaa', arg1+arg2)? })? ```? 也可以傳遞多個(gè)參數(shù)忆首， {{ name | nameope(arg1, arg2) }}? 過濾器可以被多次調(diào)用? {{ name | nameope(arg1, arg2) } | test }* 過濾器調(diào)用規(guī)則? 先調(diào)用私有的過濾器，然后調(diào)用全局的過濾器（如果名稱相同）* es6 中的 自動(dòng)填充 字符串方法? .padStart(2, '0')? 以 0 填充為長度為 2 的字符串? .padEnd(2, '0')## 11. 按鍵修飾符* vue 提供了觸發(fā)事件的按鍵修飾符被环，比如在能夠輸入鍵值的情況下? - `.enter`? - `.tab`? - `.delete` (捕獲“刪除”和“退格”鍵)? - `.esc`? - `.space`? - `.up`? - `.down`? - `.left`? - `.right`? 使用： @kendown.enter = 'fn'? 也可以 @keyup.13 = 'fn'? ,? 直接綁定按鍵的代碼糙及。? 也可以通過全局對象來設(shè)置(只能全局啦)，config 只能通過全局設(shè)置? ```javascript? Vue.config.keyCodes = {? ? v: 86,? ? f1: 112,? ? // camelCase 不可用? ? mediaPlayPause: 179,? ? // 取而代之的是 kebab-case 且用雙引號括起來? ? "media-play-pause": 179,? ? up: [38, 87]? }? ```## 12. 自定義指令* 全局定義? 使用 Vue.directive() 定義全局的指令? v-focus? 其中： 參數(shù)1：指令的名稱筛欢，注意浸锨，在定義的時(shí)候唇聘，指令的名稱前面，不需要加 v- 前綴揣钦，在調(diào)用的時(shí)候雳灾，必須在 指令名稱前 加上 v- 前綴來進(jìn)行調(diào)用? 參數(shù)二： 是一個(gè)對象，這個(gè)對象身上冯凹，有一些指令相關(guān)的函數(shù)谎亩，這些函數(shù)可以在特定的階段，執(zhí)行相關(guān)的操作? 常用到的鉤子函數(shù)：? ```javascript? Vue.directive('focus', {? ? bind: function(el) {? // 每當(dāng)指令綁到這個(gè)元素上的時(shí)候宇姚，會(huì)立即執(zhí)行這個(gè) bind 函數(shù)匈庭，只執(zhí)行一次? ? ? // 注意： 在每個(gè)函數(shù)中，第一個(gè)參數(shù)永遠(yuǎn)是 el 浑劳，表示 被綁定了 指令的那個(gè)元素阱持，這個(gè) el 參數(shù)是一個(gè) 原生 的 js 對象，可以使用 js 原生 DOM 方法? ? ? // 在元素剛綁定了指定的時(shí)候魔熏，還沒有綁定到 DOM樹 中去衷咽，調(diào)用 focus 方法沒有作用? el.focus()? ? ? },? ? ? inserted: function(el) { // 當(dāng)元素插入到 DOM 樹種的時(shí)候，會(huì)執(zhí)行 inserted 函數(shù)[觸發(fā)一次]? ? ? el.focus()? },? ? ? updated: function (el) {? // 當(dāng)VNnode 更新的時(shí)候蒜绽，會(huì)執(zhí)行 updated 镶骗，可能會(huì)觸發(fā)多次? ? ? ? ? ? ? ? }? })? ? ```? 頁面刷新獲取焦點(diǎn)，必須使用 inserted 來綁定自定義指令躲雅，只有綁定它之后鼎姊，元素才會(huì)插入DOM 樹? 應(yīng)用：? 直接添加屬性? v-focus? 后面不用加值。?修改樣式的自定義指令相赁，可以使用 bind 來綁定方法相寇。注意：1.? 一般行為的自定義指令，需要 js 操作DOM 需要使用 inserted 的方式自定義指令钮科。不能再內(nèi)存中操作唤衫。?需要在頁面中操作。要不然綁定不上方法绵脯。2. 樣式的操作會(huì)先加載完DOM 才會(huì)加載樣式佳励，因此可以使用 bind 的形式來 自定義樣式，在內(nèi)存中就會(huì)操作桨嫁。? 樣式植兰，只要通過指令綁定給了元素，不管這個(gè)元素有沒有被插入到頁面中去璃吧，這個(gè)元素肯定有一個(gè)內(nèi)聯(lián)的樣式楣导，將來元素肯定會(huì)渲染到頁面中去。* 鉤子函數(shù)的參數(shù)（看文檔畜挨，教程里面）? 自定義指令之后筒繁，指令需要執(zhí)行的函數(shù)中的參數(shù)? 第一個(gè)參數(shù)為 el 噩凹，當(dāng)前綁定的元素? 第二個(gè)參數(shù)為一個(gè) 對象 binding? 包含很多屬性：? ?常用的有 name (指令名稱)? ?value(計(jì)算之后的值)? ?expression(把指令中的表達(dá)式拿到，原封不動(dòng))? ?比如說一個(gè) 字符串 'blue'毡咏，? v-color="'blue'"? ?value 拿到的值為 blue 類型為 字符串? ?expression 拿到的為 'blue'? 字符串中的字符串* 如果你可能只想在?`bind`?和?`update`?時(shí)觸發(fā)相同行為驮宴，可以簡寫，省去對象的書寫呕缭，直接寫函數(shù)? ```javascript? Vue.directive('color-swatch', function (el, binding) {? ? el.style.backgroundColor = binding.value? })? ```? 相當(dāng)于把函數(shù)寫到 bind 和 update 中去了堵泽。注意： 唯一一個(gè)直接操作 DOM 的# Vue 生命周期* 生命周期： 從Vue 實(shí)例的創(chuàng)建、運(yùn)行恢总、到銷毀期間迎罗，總是伴隨著各種各樣的事件，這些事件片仿，統(tǒng)稱為生命周期Ｎ瓢病（說白了就是各種事件）* 生命周期鉤子：就是生命周期事件的別名? 生命周期鉤子=生命周期函數(shù)=生命周期事件? 1. var vm = new Vue({}) 2. init 表示初始化一個(gè) Vue 空的實(shí)例對象，這時(shí)候這個(gè)對象身上砂豌，只有默認(rèn)的一些生命周期函數(shù)和默認(rèn)的事件厢岂，其他的東西都未被創(chuàng)建3. 在 beforeCreate 生命周期函數(shù)執(zhí)行的時(shí)候，data 和 methods 中的 數(shù)據(jù)都還是沒有初始化? 在實(shí)例化對象中有一個(gè) beforeCreate（） 函數(shù)阳距，在執(zhí)行這個(gè)函數(shù)的時(shí)候塔粒，打印 data 或者是 methods 都顯示undefined，這個(gè)函數(shù)會(huì)自動(dòng)的被調(diào)用4. 在 created() 方法中娄涩，data 和 methods 中的數(shù)據(jù)都已經(jīng)加載好了窗怒，可以直接調(diào)用映跟。? 如果要調(diào)用 methods 中的方法和操作data 中的數(shù)據(jù)蓄拣，最早能在 created 方法中調(diào)用5. 是否存在 template 選項(xiàng)，編譯 template 模板? 判斷是否存在 el 選線的時(shí)候努隙，表示 Vue 開始編譯模板球恤，吧 Vue 代碼中的那些指令進(jìn)行執(zhí)行， 最終荸镊，在內(nèi)存中生成一個(gè)編譯好的最終模板字符串咽斧，然后把這個(gè)模板字符串，渲染為 內(nèi)存中的 DOM 躬存，此時(shí)只是在內(nèi)存中张惹，渲染好了模板，并沒有把 模板掛在到真正的頁面當(dāng)中去岭洲。 6. 第三個(gè)生命周期函數(shù) beforeMount （在嵌入前）宛逗，表示模板在內(nèi)存中編輯完成了，但是尚未吧 模板 渲染到頁面中盾剩。? 執(zhí)行 beforeMount 雷激，打印頁面上元素的值替蔬，還無法打印出? 使用 document.getElementById()7. 第四個(gè)生命周期函數(shù)，mounted() 表示內(nèi)存中的模板屎暇，已經(jīng)真實(shí)的掛載到頁面中承桥，用戶已經(jīng)可以看到渲染好的頁面了「浚可以獲取到? mounted 是實(shí)例創(chuàng)建期間的最后一個(gè)生命周期函數(shù)凶异，當(dāng)執(zhí)行完 mounted 就表示，實(shí)例已經(jīng)被完全創(chuàng)建好了挤巡，此時(shí)唠帝，如果沒有其他的操作的話，這個(gè)實(shí)例就存放在內(nèi)存中玄柏。? 如果要通過某些插件操作 DOM 襟衰，最好在 mounted 方法中進(jìn)行。? 只要執(zhí)行完了 mounted 粪摘，就表示整個(gè) Vue 實(shí)例已經(jīng)初始化完畢了瀑晒，此時(shí)，組件已經(jīng)脫離了創(chuàng)建階段徘意；進(jìn)入了運(yùn)行階段8. 接下來的圈是組件運(yùn)行階段的生命周期函數(shù)苔悦，只有兩個(gè) beforeUpdate 和 updated 9. 當(dāng) data changes 時(shí)，beforeUpdate 會(huì)觸發(fā)椎咧，這倆事件玖详，會(huì)根據(jù) data 數(shù)據(jù)的改變，有選擇性的 觸發(fā) 0次 到 多次? 這時(shí)候表示我們的界面還沒有被更新勤讽，數(shù)據(jù)被更新啦蟋座。 MVVM 中 M 被更新啦，還沒有表現(xiàn)到 v 上面脚牍。? 當(dāng)執(zhí)行 beforeUpdate 的時(shí)候向臀，頁面中的顯示的數(shù)據(jù)，還是舊的诸狭，此時(shí) data 數(shù)據(jù)是最新的券膀，頁面上的數(shù)據(jù)還沒有同步。編寫程序?qū)崿F(xiàn)10. virtual DOM 虛擬的DOM? patch 打補(bǔ)丁? ? 這一步執(zhí)行的是：先根據(jù) data 中的最新的數(shù)據(jù)驯遇，在內(nèi)存中芹彬，重新渲染出一份 最新的 內(nèi)存 DOM 樹， 當(dāng)最新的內(nèi)存 DOM 樹被更新之后叉庐，會(huì)把最新的 內(nèi)存DOM 樹舒帮，重新渲染到真實(shí)壓面中去，這時(shí)候，就完成了數(shù)據(jù) 從 data（Model）-> view（視圖層）的更新会前。? ? 生命周期函數(shù) updated()好乐，執(zhí)行的時(shí)候頁面和data 數(shù)據(jù)已經(jīng)保持同步更新了，都是最新的11. 當(dāng)執(zhí)行 beforeDestroy 鉤子函數(shù)的時(shí)候瓦宜，Vue 實(shí)例就已經(jīng)從 運(yùn)行階段蔚万，進(jìn)入到了銷毀階段，當(dāng)執(zhí)行 beforeDestroy() 函數(shù)的時(shí)候临庇，實(shí)例身上多有的 data 和所有的 methods 反璃，過濾器、指令等等假夺，都處于可用狀態(tài)淮蜈，此時(shí)還沒真正執(zhí)行銷毀過程。12. 當(dāng)執(zhí)行 destroyed 函數(shù)的時(shí)候已卷，組件已經(jīng)被銷毀啦梧田，此時(shí)組件所有的數(shù)據(jù)都不可用了〔嗾海總結(jié)： 兩次使用到 鉤子函數(shù)的地方裁眯，自定義指令 和 生命周期鉤子函數(shù)。?鉤子函數(shù)只會(huì)執(zhí)行一次讳癌！# 使用 vue-resource * 安裝 npm i vue-resource* import VueResource from 'vue-resource'* 安裝插件（所有帶 vue- 的第三方插件都可以這么用）? Vue.use(VueResource);? 能夠通過this.$http穿稳，插件都是掛載屬性，在原型上掛載? 原理： Vue.prototype.$http -> 實(shí)例(this)就可以 .$http* this.$http.get(url).then(data).catch(srr)? 基本使用* 請求方式 Request Method: OPTIONS? options 預(yù)檢請求晌坤，是當(dāng)瀏覽器發(fā)現(xiàn)跨域+application/json 的請求逢艘，就會(huì)自動(dòng)發(fā)起并且在發(fā)起的時(shí)候攜帶了一個(gè) content-type 的頭(Request-Headers)? 因此需要設(shè)置 emulateJSON:boolean? content-type:application/x-www-form-urlencoded? # axios 基于Promise的http庫，適用于瀏覽器和node.js骤菠。* vue 不推薦操作 DOM 它改，不推薦使用 jQuery，因此發(fā)送ajax 請求需要第三方工具* axios 可以在三大框架中使用* 瀏覽器端發(fā)起XMLHttpRequests請求* node端發(fā)起http請求* 支持Promise API* 攔截請求和返回* 轉(zhuǎn)化請求和返回（數(shù)據(jù)）* 取消請求* 自動(dòng)轉(zhuǎn)化json數(shù)據(jù)* 客戶端支持抵御[XSRF（跨站請求偽造）](http://baike.baidu.com/link?url=eFrTMGA9IsLxlOnyqKky-t6vTs3g6YoAfFc1sYmv2fVVS1FrfIoI3q3jxUV_o1AgIIoLdk9N0Ni_TxLItoRU3K)安裝：npm i axios引入：import Axios from 'axios'給 Vue 原型掛載一個(gè)屬性Vue.prototype.$axios = Axios;在 created 鉤子函數(shù)中調(diào)用this.$axios.get('url',{params: {ID: 12345}}, { headers: {'content-type': 'application/x-www-form-urlencoded’}}).then(data).catch(err)this.$axios.post('url', {key: 'value'}, {}).then().catch()post 請求的第三個(gè)參數(shù)為設(shè)置常用設(shè)置： headers: {?'content-type': 'application/x-www-form-urlencoded'?}form data 數(shù)據(jù)的格式應(yīng)該為 key=value? 的形式如果不設(shè)置 headers 的話娩怎，請求數(shù)據(jù)的格式應(yīng)該為 key=value 的形式（value 沒有自動(dòng)的轉(zhuǎn)換）this.$axios.post('url', 'key=value', {}).then().catch() 搔课，如果你寫這 json? 瀏覽器就會(huì)自動(dòng)把請求頭設(shè)置成 json 的格式胰柑。請求的服務(wù)器數(shù)據(jù)不是同網(wǎng)頁的服務(wù)器截亦，因此需要跨域，axios 已經(jīng)實(shí)現(xiàn)了跨域柬讨。get 請求的設(shè)置在第二個(gè)參數(shù)崩瓤，post 請求的設(shè)置在 第三個(gè)參數(shù)。配置： Axios.defaults.baseURL = 'http://127.0.0.1:8001/'? 可以配置默認(rèn)的地址踩官，get 和 post 請求中的地址會(huì)直接拼接在后面却桶。(也可局部設(shè)置)局部設(shè)置：axios.defaults.baseURL = 'http://47.89.21.179:8080'；設(shè)置完成直接寫后面需要補(bǔ)充的字符串。* 總結(jié)? 1. Post 請求的時(shí)候颖系，如果數(shù)據(jù)是字符串嗅剖，默認(rèn)頭就是鍵值對，否則是對象就是 application/json? 2. this.$axios.get(url, options)? ? this.$axios.post(url, data, options)? ? 常用設(shè)置： options: {params:{id:1}, headers:{}}也可以 import Axios from 'axios'直接使用對象在局部使用* 手動(dòng)發(fā)起的請求沒有表單格式嘁扼，application/x-www-form-urlencoded信粮，有的服務(wù)器處理不了* form data 表單數(shù)據(jù)# Vue 動(dòng)畫* Vue 動(dòng)畫分為四個(gè)部分* 進(jìn)入動(dòng)畫(v-enter-active)? v-enter? v-enter-to* 離開動(dòng)畫 (v-leave-active)? v-leave? v-leave-to* 時(shí)間段 加 一個(gè) active* 四個(gè)時(shí)間點(diǎn) 和 兩個(gè)時(shí)間段使用：1. 使用 transition 元素，吧需要被動(dòng)畫控制的元素趁啸，包裹起來.? transition 是 vue 官方提供的
? 2. 自定義兩組樣式强缘，來控制 transition 內(nèi)部元素實(shí)現(xiàn)動(dòng)畫? ```html?
? .v-enter, .v-leave-to {
? /*設(shè)置出入時(shí)間點(diǎn)的樣式*/
? opacity:0;
? transform: translateX(80px)
? }
? .v-enter-active, .v-leave-active {
? transition: all 0.4 ease;
? // 設(shè)置 該時(shí)間段的過渡
? }
? ```? ? ? 不規(guī)定 .v-enter-to 的樣式，默認(rèn)恢復(fù)默認(rèn)樣式不傅。? 如果一個(gè)元素想要實(shí)現(xiàn)上述的動(dòng)畫旅掂，需要設(shè)置 v-if = 'flag'，讓 transition 元素包括访娶。會(huì)自動(dòng)給它加這個(gè)類商虐，由于元素的進(jìn)出，需要 加 v-if 讓它實(shí)時(shí)進(jìn)出崖疤，才能實(shí)現(xiàn)效果称龙。定義私有的動(dòng)畫：上述的動(dòng)畫效果，只要被 transition 元素包括的都會(huì)執(zhí)行一樣的效果戳晌。如果希望只執(zhí)行自己的動(dòng)畫效果鲫尊，需要給 transition 元素的name 屬性定義一個(gè)私有的 標(biāo)記，在樣式中直接使用私有的 標(biāo)記-enter 的形式就可實(shí)現(xiàn)動(dòng)畫的私有定制沦偎。例：```html .my-enter, .my-leave-to {
/*設(shè)置出入時(shí)間點(diǎn)的樣式*/
opacity:0;
transform: translateX(80px)
}
.my-enter-active, .my-leave-active {
transition: all 0.4 ease;
// 設(shè)置 該時(shí)間段的過渡
}```## 動(dòng)畫使用第三方類實(shí)現(xiàn)`animate.css`?是一個(gè)集合酷的疫向，有趣的和跨瀏覽器的動(dòng)畫。引入 css 模塊直接在 transition 標(biāo)簽元素上添加對應(yīng)的類豪嚎，vue動(dòng)畫添加類采用 enter-active-class='' 和 leave-active-class='' 后面直接加類名例：```htmlh3 元素```注意：需要加基礎(chǔ)類搔驼，animated〕扪或者加到動(dòng)的元素身上也可以舌涨。```html
h3 元素
```* 定制一個(gè)顯性的過渡持續(xù)時(shí)間 (以毫秒計(jì))：? :duration='200'? 持續(xù)時(shí)間 200 毫秒* 分別定制過渡時(shí)間? :duration='{enter:200, leave: 300}'注意：enter-active-class 后面跟著的 js 變量## 使用鉤子函數(shù)實(shí)現(xiàn)動(dòng)畫使用鉤子函數(shù)實(shí)現(xiàn) 動(dòng)畫 可以只實(shí)現(xiàn)半程的動(dòng)畫，不用實(shí)現(xiàn)全部過程的動(dòng)畫扔字。```html? ```如上：鉤子函數(shù)實(shí)現(xiàn)動(dòng)畫的形式采用事件綁定的形式囊嘉，因此綁定的事件需要在 methods 中實(shí)現(xiàn)。```javascriptbeforeEnter(el) {? ? // 動(dòng)畫入場之前革为，此時(shí)扭粱，動(dòng)畫尚未開始，可以在 beforeEnter 中震檩，設(shè)置元素開始動(dòng)畫之前的樣式? ? el.style.transform = 'translate(0, 0)'}enter(el) {? ? }```動(dòng)畫鉤子函數(shù)的第一個(gè)參數(shù)el 表示要執(zhí)行動(dòng)畫的哪個(gè)元素琢蛤，是個(gè)原生的 JS DOM 對象蜓堕。在執(zhí)行過程中的函數(shù) enter 和 leave 函數(shù)中，第二個(gè)參數(shù)尾 done 表示 after-enter 的綁定函數(shù)博其，只要調(diào)用 done() 函數(shù)套才，在過渡完成或立即執(zhí)行 afterEnter() 函數(shù)，不會(huì)存在等的問題慕淡。 注意： 在 enter() 函數(shù)中寫動(dòng)畫的最終狀態(tài)霜旧，需要些 一行代碼 el.offsetWidth。這樣動(dòng)畫才能正確執(zhí)行到終點(diǎn)位置儡率。```javascriptmethods: {? ? ? beforeEnter(el) {? ? ? ? ? el.style.transform = "translate(0, 0)"? ? ? ? ? el.style.opacity = 0? ? ? },? ? ? enter(el) {? ? ? ? //? el.offsetWidth? ? ? ? //? el.style.transform = "translate(100px, 800px)"? ? ? ? //? el.style.transition = "all 1s ease"? ? ? ? ? ? ? ? ? //? el.style.opacity = 1? ? ? ? //? done()? ? ? },? ? ? afterEnter(el) {? ? ? ? ? el.style.transform = "translate(100px, 800px)"? ? ? ? ? el.style.transition = "all 1s ease"? ? ? ? ? el.style.opacity = 1? ? ? ? ? this.flag = !this.flag? ? ? }? }```也可以在 afterEnter() 中實(shí)現(xiàn)動(dòng)畫挂据。## 給列表實(shí)現(xiàn)動(dòng)畫 給 li 列表實(shí)現(xiàn)動(dòng)畫效果，需要 使用 transition-group 取代 transition 來包裹加動(dòng)畫的元素.列表的改變會(huì)影響位置的變化儿普，如果需要給位置變化加動(dòng)畫需要使用 .v-move 樣式類來實(shí)現(xiàn)（和 .v-enter 用法一樣）崎逃。如果加上 .v-leave-active{position: absolute} 可以使元素飄起來，實(shí)現(xiàn)效果眉孩。.v-move 要結(jié)合 .v-leave-active{position: absolute} 使用个绍。注意： 所有的? .v- 的樣式，全部會(huì)加到 動(dòng)畫的元素身上開始入場動(dòng)畫：可以通過?`appear`?特性設(shè)置節(jié)點(diǎn)在初始渲染的過渡浪汪。* 注意：采用直接在 ul 下使用 transition-group 標(biāo)簽包括的情況巴柿，容易出現(xiàn)ul 下面有一個(gè) span 標(biāo)簽的情況，最好采用 取消 ul 標(biāo)簽死遭，在 transition-group 標(biāo)簽中加 tag="ul"广恢， 會(huì)自動(dòng)的在最外層渲染為一個(gè) ul 標(biāo)簽，如果不指定呀潭，默認(rèn)渲染為 span 標(biāo)簽# 模塊化 和 組件化* 模塊化是代碼邏輯的角度來說的钉迷；方便分層開發(fā)，保證每一個(gè)功能模塊的職能單一钠署。* 組件化：從 UI 界面的角度來進(jìn)行劃分的糠聪，前端組件化，方便 UI 的重用組件創(chuàng)建的三種方式1. 使用 Vue.extend 來創(chuàng)建全局的 Vue 組件? ```javascript? var com1 = Vue.extend({? ? ? template: "
aaa
" // 通過 template 屬性谐鼎，指定了組件要展示的 HTML 結(jié)構(gòu)? })? ```? 使用 Vue.component('組件的名稱', '創(chuàng)建出來的模板對象')? Vue.component('myCom1', com1)? 注意： 使用組件的時(shí)候舰蟆，要使用 - 連接 的形式，（不使用駝峰命名狸棍，直接使用）? ??style 樣式的書寫在 js 代碼中也要駝峰注意：組件的引用就是 使用組件標(biāo)簽2. 第二種? Vue.component('myCom', {? ?template: "
111
"? })3. 第三種? Vue.component('myCom', {? ?template: "#temp1"? })? 將 template 寫到頁面上身害，直接使用 # id 選擇器引入，說明 Vue 接受對象隔缀，都可以接受 ID题造。自定義組件的命名最好為 "" 包括起來## 組件中的 data實(shí)例中的 data 為一個(gè)對象，組件中的data 必須為一個(gè)方法猾瘸，并且返回一個(gè)對象。# 組件的切換* 在項(xiàng)目中點(diǎn)擊切換為登錄，切換為另一個(gè) 小界面v-if 和 v-else 的配合使用牵触。它兩個(gè)必須使用同一個(gè)變量## Vue 提供的組件表達(dá)方式Vue 提供了 component 標(biāo)簽來表示組件的使用淮悼，例： ```html```組件的名稱是一個(gè)字符串，在 component 中使用揽思，需要加引號袜腥。可以使用 組件的名稱的切換钉汗，來達(dá)到頁面中 組件切換的效果羹令。注意： 在html 標(biāo)簽中寫 JS 代碼，所使用到的變量损痰，必須在 data 中定義福侈。動(dòng)畫效果只能控制 v-if 消失和出現(xiàn)的動(dòng)畫，使用 opacity 沒有作用# 組件之間的傳遞數(shù)據(jù)子組件中卢未，不能直接 調(diào)用父組件中 data 上的數(shù)據(jù)和 methods 的方法肪凛。在開發(fā)過程中有時(shí)需要子組件獲取 父組件 的數(shù)據(jù)，展示出來辽社∥扒剑可以通過 v-bind:自定義屬性的 形式 給子組件傳值。例： 在父組件中滴铅，需要在 子組件中 定義一個(gè) props 數(shù)組來接收戳葵，傳遞的數(shù)據(jù)。例： props: ['fathermsg']* 組件中的 所有 props 中的數(shù)據(jù)汉匙，都是通過父組件傳遞給子組件的譬淳。* 子組件的 data 數(shù)據(jù)是自身私有的。* data 中的數(shù)據(jù)都是可讀可寫的盹兢， props 中的數(shù)據(jù)都是可讀的傳遞方法：父組件給子組件傳遞方法邻梆，需要使用v-on: 來綁定，綁定事件后绎秒，在子組件的 可以使用 this.$emit('事件') 來實(shí)現(xiàn)事件的傳遞調(diào)用浦妄。需要執(zhí)行 該語句 就需要使用一個(gè)函數(shù)來調(diào)用。this.$emit(function, arg1, args2...)利用傳參的特性见芹，可以有父組件 給 子組件傳遞數(shù)據(jù)剂娄。使用 data 中的變量獲取。補(bǔ)充： 1. 組件上 綁定 v-model="msg" 玄呛，實(shí)際上相當(dāng)于阅懦，v-bind:value="msg"2. 組件上還可以 @on 綁定事件，是為了傳遞方法（目前所知）## ref* ref 是 reference 的縮寫? Vue 提供了 ref 來實(shí)現(xiàn)對 DOM 元素的調(diào)用屬性? ```html
? ? ? 我是 div 中的元素
```? 在 js 部分就可以通過 this.$refs.mydiv.innerText 的形式來操作該節(jié)點(diǎn)徘铝。* ref 可以獲取組件耳胎，獲取組件之后也可以獲取組件內(nèi)的變量和方法# 路由* 前端的路由：對于單頁面應(yīng)用來說惯吕，主要通過 URL 中的hash （#號）來實(shí)現(xiàn)不同頁面之間的切換的，同事 hash 有一個(gè)特點(diǎn)怕午；HTTP 請求中不會(huì)包含 hash 相關(guān)的內(nèi)容废登，所以，單頁面程序中的頁面跳轉(zhuǎn)主要用 hash 實(shí)現(xiàn)郁惜。## vue-router* 安裝：? npm i vue-router? 使用：? import VueRouter from "vue-router"? Vue.use(VueRouter)* 當(dāng)引入 vue-router 這個(gè)包之后堡距，可以new 出一個(gè)路由對象，傳遞一個(gè)對象兆蕉。注意： routes 不帶 r? ```javascript? var routerObj = new VueRouter({? ? ? // route? // 這個(gè)配置對象中的 route 表示 路由匹配規(guī)則 的意思? ? ? routes: [ // 路由匹配規(guī)則? ? ? ? ? // 每個(gè)路由規(guī)則羽戒，都是一個(gè)對象，這個(gè)規(guī)則對象虎韵，身上易稠，有兩個(gè)必須的屬性? ? ? ? ? // 屬性1 是 path，表示監(jiān)聽 哪個(gè)路由鏈接地址? ? ? ? ? // 屬性2 是 component劝术，表示 如果路由是前面匹配的 path缩多，則展示 component 屬性對應(yīng)的那個(gè)組件，url 后面相當(dāng)于一個(gè)hash? ? ? ? ? // 注意： component 必須為直接引入的組件名稱养晋，不能為 父組件 注冊組件時(shí)起的名稱? ? ? ? ? { path: '/login', component: com1 },? // 不能加引號? ? ? ]? })? ? new Vue({? ? ? router: routerObj // 將匹配規(guī)則注冊 到 vue 實(shí)例上衬吆，用來監(jiān)聽 URL 地址的變化，然后展示對應(yīng)的組件? })? ```? ```html? // 需要在頁面上放顯示的容器? vue-router 提供了一個(gè)標(biāo)簽元素 用來存放路由模塊 專門用來當(dāng)做 占位符的绳泉，將來 路由規(guī)則匹配到的組件就會(huì)展示到這個(gè) 元素中去```? 切換模塊的時(shí)候逊抡，可以使用 a 標(biāo)簽 中寫鏈接的形式實(shí)現(xiàn)，記住一定要加 # 要不然會(huì)出現(xiàn)地址的跳轉(zhuǎn)? ```html```? 因?yàn)槊看味继砑?# 所以不推薦使用上述的方式來實(shí)現(xiàn)路由零酪，vue-router 還提供了一個(gè) router-link 元素來實(shí)現(xiàn)路由冒嫡，它實(shí)際渲染出來的還是一個(gè) a? 標(biāo)簽? ```html登錄```? 如果想讓它成為一個(gè)其他的標(biāo)簽，則需要使用 tag="span" 的形式來實(shí)現(xiàn)四苇。? 存在一個(gè)問題孝凌，剛進(jìn)去頁面的時(shí)候，會(huì)出現(xiàn)在首頁 #/ 的頁面月腋，需要默認(rèn)出現(xiàn)在 登錄的頁面蟀架，可以使用 重定向。url 的地址和 頁面 都將變?yōu)橹囟ㄏ虻牡刂贰? ```js? {path: "/", redirect: "/login"}? ```? 當(dāng)前頁面 按鈕 需要高亮的樣式修改榆骚，當(dāng)前選中的按鈕 會(huì)有一個(gè) router-link-active 類名片拍，直接修改次 class? 也可實(shí)現(xiàn)。第二種方式妓肢，看文檔捌省。還有定義動(dòng)畫沒看？碉钠？纲缓？卷拘？## 路由傳遞參數(shù)因?yàn)?該路由實(shí)在一個(gè)頁面上跳轉(zhuǎn)，因此不能夠使用HTTP 請求那樣的設(shè)置請求參數(shù)色徘。* 如果在路由中 使用 查詢字符串 給路由 傳遞參數(shù)恭金，則不需要修改路由規(guī)則的 path 屬性操禀。? 直接在 path 中的地址后面使用 ? 拼接字符串? 使用 this.$route.query.id? 的形式就可以獲取到 queryString 請求值褂策。? 注意：頁面上 js 區(qū)域，可以使用 所有在 this? 后面跟著的數(shù)據(jù) 都可以寫上去颓屑。? 例如： this.$route.query.id 可以使用 $route.query.id 在頁面上呈現(xiàn)斤寂。默認(rèn)省略 this 。* 第二種傳遞參數(shù)的方法? 直接在 url 后面拼接要傳遞的數(shù)據(jù)揪惦。? 首先在 path 中設(shè)置遍搞，? {path: "/login/:id/:name", component: login}? 在 router-link 標(biāo)簽中直接 to="/login/12/zs"? 在 this.$route.params. 中就能打印對應(yīng)的 參數(shù)通過注入路由器，我們可以在任何組件內(nèi)通過?`this.$router`?訪問路由器器腋，也可以通過?`this.$route`訪問當(dāng)前路由：注意： $route 表示的是當(dāng)前目錄的路由溪猿。上述兩種傳遞參數(shù)的方式都可以，在開發(fā)中可以選擇## 子路由(路由的嵌套)在 VueRouter 實(shí)例中纫塌，能夠通過 children 屬性來設(shè)置子路由诊县，通過子路由能夠訪問子組件。直接在父組件的路由設(shè)置中操作措左。```js{path: "/account", component: Acoount, children: [? ? {path: "login", component: Login},? ? {path: "register", component: Register}]}``` 注意：子路由的路徑不能加 '/'依痊，加上`/`會(huì)認(rèn)為從根目錄開始 ```html
Account 組件
登錄注冊
```* 在子組件中嵌套，一定要記住怎披，一定要有一個(gè)占位符來顯示要顯示的組件胸嘁。## 一個(gè)路由放多個(gè)路由組件路由設(shè)置的時(shí)候，也能夠在路徑后面跟一個(gè)組件對象凉逛。在頁面上性宏，使用 router-view 屬性的 name 來規(guī)定這個(gè)坑由誰來填。```jspath: "/", components: {? ? "default": header,? "left": leftBox,? ? "main": mainBox}// 使用```不寫的話状飞，默認(rèn)匹配 ”default“毫胜。次情況適合于頁面布局 的情況。# watch 監(jiān)聽* Vue 實(shí)例對象中有一個(gè)屬性昔瞧， watch 后面跟著一個(gè)屬性指蚁，可一監(jiān)聽 data 中數(shù)據(jù)的變化，只要 data 中的數(shù)據(jù)發(fā)生變化自晰，就會(huì)執(zhí)行該監(jiān)聽數(shù)據(jù)后面的函數(shù)凝化。? ```js? data() {? ? ? msg: "aaa"? },? watch: {? ? ? msg: function(newVal, oldVal) {? ? ? ? ? this.fullname = newVal + oldVal? ? ? }? }? ```? 向 keyup 和 change 這種狀態(tài)變化事件，也需要注意與 watch 的對比* 監(jiān)聽路由地址的變化? watch: $route.path? $route.path 返回當(dāng)前的路由 /login酬荞，不加 ## computed * 在 computed 中搓劫，可以定義一些 屬性瞧哟，這些屬性，叫做 【計(jì)算屬性】枪向，計(jì)算屬性的本質(zhì)勤揩，就是一個(gè)方法，只不過秘蛔，我們在使用這些計(jì)算屬性的時(shí)候陨亡，是把 他們 的名稱直接當(dāng)做屬性來使用的，并不會(huì)把計(jì)算屬性當(dāng)做方法去調(diào)用```js"fullname": function(){? ? return this.firstname }```相當(dāng)于在 data 中定義了一個(gè) fullname 的變量深员，它的值 為后面的函數(shù)的處理結(jié)果负蠕。但是 data 中不需要再定義 fullname 變量了。注意：1. 計(jì)算屬性倦畅，在引用的時(shí)候遮糖，一定不要加 （）去調(diào)用，直接把它 當(dāng)做 普通 屬性去使用就好了叠赐；?2.只要計(jì)算屬性 function 內(nèi)部使用到的 data 中的數(shù)據(jù)欲账，發(fā)生變化，就會(huì)觸發(fā)該函數(shù)去求值芭概。實(shí)時(shí)的求值赛不。?3.計(jì)算屬性的求值結(jié)果，會(huì)被緩存起來谈山，方便下次直接調(diào)用俄删；若計(jì)算屬性方法中使用到的 data 數(shù)據(jù)都沒發(fā)生過變化，則不會(huì)對計(jì)算屬性求值奏路。（提升效率）為啥常用 "" 的形式 "fullname"* 上面兩種為 非 DOM 元素的改變時(shí)間綁定總結(jié)：1. 計(jì)算屬性 和 watch 都是一個(gè)后面加了一個(gè) function2. watch 沒有 return 一個(gè)返回值3. methods中 是業(yè)務(wù)邏輯的處理* watch畴椰、computed、methods 之間的區(qū)別? 1. computed 屬性的結(jié)果會(huì)被緩存鸽粉，除非依賴的響應(yīng)式屬性變化才會(huì)重新計(jì)算斜脂，主要當(dāng)做屬性來使用；? 2. methods 方法表示一個(gè)具體的操作，主要書寫業(yè)務(wù)邏輯? 3. watch 一個(gè)對象，鍵是需要觀察的表達(dá)式妹卿，值是對應(yīng)回調(diào)函數(shù)。主要用來監(jiān)聽某些特定數(shù)據(jù)的變化片任，從而進(jìn)行某些具體的業(yè)務(wù)邏輯操作；可以看做是 computed 和 methods 的結(jié)合體蔬胯。? 4. computed 中的數(shù)據(jù)相當(dāng)于对供，先定義一個(gè)數(shù)據(jù)然后再監(jiān)控它的計(jì)算值是否發(fā)生變化。watch 中的數(shù)據(jù)，直接就監(jiān)聽的 該變量是否發(fā)生變化产场。
