父 => 子 傳值
父組件中定義屬性 <com-a :aaa="parm"> ,子組件通過(guò) props:['aaa'] 獲取
子 => 父 傳值
父組件中自定義事件 <com-a @aaa="parm"> ,子組件通過(guò) methods:{this.$emit('aaa',要傳的值)}向父元素傳值
v-test / v-html
v-test:所有內(nèi)容轉(zhuǎn)換為字符串輸出
v-html:如果有標(biāo)簽就按標(biāo)簽轉(zhuǎn)換
組件中為什么 data(){return{}} 而不是 data:{}
防止修改 data 內(nèi)容時(shí)由于引用傳值導(dǎo)致誤改了其他 template 組件
v-if / v-show
v-if 標(biāo)簽有 / 沒(méi)有
v-show 通過(guò) display:none 控制
其他
<template lang="jade"> 使用 jade 模板
<style lang="less"> 使用 less 語(yǔ)法
watch
屬性監(jiān)聽(tīng)
data(){
abc:'',
}
watch:{
abc:function(val,oldval){
// 當(dāng) abc 發(fā)生變化時(shí)觸發(fā)函數(shù),可通過(guò)兩個(gè)參數(shù)獲取到變化前后的值
}
}
計(jì)算屬性有兩種方法(視頻第三章 5-7 節(jié)后半部分)
computed- 自定義方法纵隔，實(shí)時(shí)調(diào)用
插槽
-
<slot>：將要插入的內(nèi)容放到子組件標(biāo)簽中，在子組件中使用<slot></slot>。 - 可命名 :
<p slot="head"></p>犀呼，對(duì)應(yīng)子組件中<slot name="head"></slot>
緩存標(biāo)簽內(nèi)的信息
<keep-alive></keep-alive>
組件的動(dòng)態(tài)切換
<p :is="currentView"></p>
data(){
return{
currentView:'com-a'
}
}
通過(guò)對(duì) currentView 動(dòng)態(tài)切換實(shí)現(xiàn)組件切換，這里 com-a 是寫(xiě)好的組件
過(guò)渡效果
- 通過(guò)
<transition name="aa">內(nèi)置組件，組件可以命名,可以通過(guò)兩種方式實(shí)現(xiàn),需要給過(guò)渡的作用標(biāo)簽加上v-show或者v-if- CSS 過(guò)渡
- JS 過(guò)渡
- CSS 過(guò)渡 官網(wǎng)有個(gè)圖非常直觀，對(duì)比官網(wǎng)例子
圖示
整個(gè)過(guò)程可分為:
1.剛開(kāi)始淡入
2.完全顯示
3.完全消失
.fade-enter 剛要進(jìn)入的瞬間 => 1
.fade-leave-to 完全離開(kāi)的瞬間 => 3
.fade-enter-active { // 進(jìn)入的過(guò)程
transition: all .5s ease;
}
.fade-leave-active { // 離開(kāi)的過(guò)程
transition: all .5s ease;
}
.fade-enter { // 剛進(jìn)入的瞬間
transform:translateX(200px);
opacity: 0
}
.fade-leave-to { // 離開(kāi)終點(diǎn)的瞬間
transform: translateX(200px);
opacity: 0
}
- 當(dāng)使用
is 屬性 + transition實(shí)現(xiàn)組件切換的過(guò)渡效果時(shí)红淡，<transition>有個(gè)默認(rèn)的屬性mode="in-out"，這樣的效果是：新組件先進(jìn)入降铸，而舊組件后消失在旱，這樣會(huì)有個(gè)效果上的不和諧。改成mode="out-in"就好 - 多個(gè)標(biāo)簽或者組件進(jìn)行過(guò)渡切換時(shí)推掸，如果標(biāo)簽名相同桶蝎，比如兩個(gè)
<p>標(biāo)簽切換顯示隱藏，并且標(biāo)簽上沒(méi)有key屬性時(shí)终佛，切換效果會(huì)無(wú)效。這是由于vue最大化重用標(biāo)簽或組件雾家，實(shí)際上是針對(duì)一個(gè)<p>標(biāo)簽進(jìn)行操作铃彰，所以需要在兩個(gè)<p>標(biāo)簽加上不同的key屬性作為區(qū)分，避免重用 - 當(dāng)
<transition>與<keep-alive>共用時(shí)芯咧，需要<transition>在外
自定義指令
- 局部自定義指令 - 寫(xiě)在某個(gè)組件中
- 全局自定義指令 - 寫(xiě)在根節(jié)點(diǎn)實(shí)例化時(shí)
new Vue時(shí)（main.js中）<p v-color="'red'">自定義指令</p> // 注意傳的是字符串red牙捉，所以寫(xiě)的是 'red'（帶引號(hào)） ... directives:{ color:function(el,binding){ el.style.color = binding.value } } -
el：指令所綁定的元素，可以用來(lái)直接操作DOM -
binding：一個(gè)對(duì)象敬飒，包含name邪铲，value等多個(gè)屬性 - 指令定義函數(shù)提供了幾個(gè)鉤子函數(shù)（見(jiàn)官網(wǎng)）：
-
bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用无拗，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作带到。
-
插件
- 安裝方法
-
npm install vue-router --save（--save是安裝插件后，讓package.json中同步更新） - 在全局中引用
vue-router-
main.js中最上面import VueRouter from 'vue-router' -
main.js中加入Vue.use(VueRouter)
-
-
Vue - cli
-
npm install vue-cli -g全局安裝 -
vue init webpack新建項(xiàng)目名 初始化項(xiàng)目 -
npm install安裝項(xiàng)目依賴 -
npm run dev在localhost啟動(dòng)測(cè)試服務(wù)器 -
npm run build（部署）
Vue - router
寫(xiě)在
<router-link>中的是 聲明式導(dǎo)航英染，另一種是寫(xiě)在
JS中的 編程式導(dǎo)航this.$route.path// 全部的路徑值-
this.$route.params// 帶:的部分
console.log(this.$route.params) // Object {color: "xxxx", name: "xxx"}{ path: '/apple/:color/ok/:name', name: 'apple', component: Apple } -
子路由的匹配方式
- 如果配置中設(shè)置了
name屬性（也就是 命名路由）揽惹，則也可以在<router-link :to="{name:"xxx"}" tag="li">中通過(guò)name屬性調(diào)用被饿。其中tag屬性可以將默認(rèn)的<a>改為<li>。 - 命名路由 / 命名視圖
// 命名路由 <router-link :to="{name:'apple2'}"> 命名路由 </router-link> { path: '/apple', name: 'apple2', component: Apple, children:[ { path:'applechild', component:applechild }] }// 命名視圖 <router-view name="viewA"></router-view> <router-view name="viewB"></router-view> // index.js 中 path: '/apple', name: 'apple2', components: { viewA: Apple, viewB: Banana }, - 如果配置中設(shè)置了
可以在標(biāo)簽中通過(guò)類(lèi)似
<p>{{$route.params.color}}</p>語(yǔ)法調(diào)用
此外搪搏，一旦添加了諸如:color這種參數(shù)狭握，<router-link>中to屬性值必須格式完全匹配index.js中的路徑地址（如上例中，url地址必須為
/apple/param1/ok/param2）疯溺，否則不會(huì)跳轉(zhuǎn)到響應(yīng)的組件论颅，注意看to需不需要加:-
正常跳轉(zhuǎn)的時(shí)候會(huì)有
hash的#，通過(guò)在index.js中設(shè)置mode: 'history'囱嫩，即可export default new Router({ mode:'history', routes:[{ ... }] }) -
編程式導(dǎo)航
- 在
index.js中通過(guò)router.push({path:'xxx'})實(shí)現(xiàn) - 也可以配合
Vue-router的鉤子函數(shù)恃疯，比如router.beforeEach()可以實(shí)現(xiàn)跳轉(zhuǎn)之前先執(zhí)行一個(gè)判斷之類(lèi)的
- 在
-
重定向
- 當(dāng)訪問(wèn)根目錄時(shí)，自動(dòng)跳轉(zhuǎn)到
apple路由
{ path: '/', redirect:'apple', // 重定向 name: 'Hello', component: Hello }, - 當(dāng)訪問(wèn)根目錄時(shí)，自動(dòng)跳轉(zhuǎn)到
router-link-active
Vuex
Centralized State Management for Vue.js
$ cnpm install vuex --save- 在
main.js（入口文件）中引入
// main.js
import Vuex from 'vuex' // 1. 引入
Vue use (Vuex) // 2. 注冊(cè)
let store = new Vuex.store({
// 3. 配置
mutations:{
fn1(){
...
},
fn2(){
...
},
}
})
new Vue({
el: '#app',
router,
store, // 4. 全局使用
template: '<App/>',
components: { App }
})
// 子組件中
this.$store.state // 5. 在子組件中調(diào)用 store 中的狀態(tài)
this.$store.commit('fn1',傳值) // 6. 可以通過(guò) commit 調(diào)用 store 中 mutations 內(nèi)的各種方法挠说，進(jìn)而改變 store 中的參數(shù)
this.$store.commit('fn2',傳值)
- 關(guān)于
mutations和actions
mutations用來(lái)直接管理state的澡谭，因此mutations是 同步 的（mutations內(nèi)的方法是一行一行執(zhí)行）
actions用來(lái)調(diào)用mutations中的方法，是 異步 的（actions中的某個(gè)方法在執(zhí)行的過(guò)程中可以去請(qǐng)求個(gè)數(shù)據(jù)啥的损俭，不耽誤后面代碼執(zhí)行）// <template> 中通過(guò) dispatch 調(diào)用 actions 中的方法 plus(){ this.$store.dispatch('increase',100) }, // actions 中 通過(guò) commit 調(diào)用 mutations 中的方法 mutations:{ increment (state,price){ state.totalPrice += price }, decrement (state,price){ state.totalPrice -= price }, }, actions:{ increase (context,price){ context.commit('increment',price) } }
-
getters：store中的一個(gè)屬性蛙奖。可以通過(guò)getters獲取到state中的某個(gè)狀態(tài)杆兵，進(jìn)行進(jìn)一步的操作雁仲，比如：state中有個(gè)數(shù)組，使用getters獲取到這個(gè)數(shù)組琐脏，然后對(duì)數(shù)組進(jìn)行過(guò)濾或者計(jì)算啥的let store = new Vuex.Store({ state: { totalPrice:0 }, getters:{ way(state){ return state.totalPrice; } }, // <template> 中調(diào)用 this.$store.getters.xxx -
modules：Talk is cheap// 定義 const modulesA = { state:{...}, mutations:{...}, actions:{...}, getters:{...}, } const modulesB = { state:{...}, mutations:{...}, actions:{...}, getters:{...}, } // 配置 let store = new Vuex.Store({ modules:{ a:modulesA, b:modulesB } }) // 調(diào)用 store.state.a // moduleA's state store.state.b // moduleB's state - 官方推薦使用
Vuex項(xiàng)目的結(jié)構(gòu)├── index.html ├── main.js ├── api │ └── ... # 抽取出API請(qǐng)求 ├── components │ ├── App.vue │ └── ... └── store ├── index.js # 我們組裝模塊并導(dǎo)出 store 的地方 ├── actions.js # 根級(jí)別的 action ├── mutations.js # 根級(jí)別的 mutation └── modules ├── cart.js # 購(gòu)物車(chē)模塊 └── products.js # 產(chǎn)品模塊
關(guān)于雙向綁定
- 先進(jìn)行初始化的數(shù)據(jù)綁定攒砖，將實(shí)際的
DOM節(jié)點(diǎn)劫持到
documentFragment中 - 響應(yīng)式數(shù)據(jù)綁定，主要是實(shí)現(xiàn)
input輸入內(nèi)容時(shí)日裙，data跟著變化吹艇，需要做的就是通過(guò)ES5的defineProperty進(jìn)行數(shù)據(jù)的觀察和修改 - 實(shí)現(xiàn)
data改變同步頁(yè)面中的數(shù)據(jù)更新，觀察者模式昂拂，可以是多個(gè)觀察者對(duì)數(shù)據(jù)進(jìn)行監(jiān)聽(tīng)受神，當(dāng)數(shù)據(jù)改變后，會(huì)觸發(fā)一個(gè)更新的函數(shù)格侯，進(jìn)而實(shí)現(xiàn)頁(yè)面的更新
