advance
1 component
字母全小寫且必須包含一個連字符
kebab-case (短橫線分隔命名)
Vue.component('my-component-name', { /* ... */ })
使用 PascalCase
Vue.component('MyComponentName', { /* ... */ })
2 全局註冊
Vue.component 來創建組件 即全局註冊
Vue.component('my-component-name', {
// ... 選項 ...
})
3 局部註冊
可以通過一個普通的 JavaScript 對象來定義組件
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
然後在 components 選項中定義你想要使用的組件
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
4 模塊系統中局部註冊
推薦創建一個 components 目錄，並將每個組件放置在其各自的文件中
然後你需要在局部註冊之前導入每個你想使用的組件。例如，在一個假設的 ComponentB.js 或 ComponentB.vue 文件中：
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}
現在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了
5 基礎組件的自動化全局註冊
6
非 Prop 的特性 [未走通]
7
自定義事件
事件名稱 區分大小寫，要完全匹配
我們知道父組件是使用props傳遞數據給子組件，如果子組件要把數據傳遞回去，怎麼辦？
那就是要自定義事件！使用v-on綁定自定義事件 每個Vue實例都實現了事件接口（Events interface）,
即 使用$on(eventName) 監聽事件 $emit(eventName) 觸發事件
8 slot
1.1 單個插槽（單個插槽，別名默認插槽、匿名插槽，不用設置name屬性）
1.2 具名slot（插槽加了name屬性，就變成了具名插槽。具名插槽可以在一個組件中出現N次，出現在不同的位置）
1.3 作用域slot
https://www.cnblogs.com/cisum/p/9618346.html
9
件實例能夠被在它們第一次被創建的時候緩存下來。爲了解決這個問題，我們可以用一個 <keep-alive> 元素將其動態組件包裹起來。
<!-- 失活的組件將會被緩存！-->
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
10
訪問根實例
在每個 new Vue 實例的子組件中，其根實例可以通過 $root 屬性進行訪問
this.$root.baz()
11
訪問父級組件實例
$parent
12
訪問子組件實例或子元素
ref 特性爲這個子組件賦予一個 ID 引用
<base-input ref="usernameInput"></base-input>
this.$refs.usernameInput
13 依賴注入
provide 選項允許我們指定我們想要提供給後代組件的數據/方法
provide: function () {
return {
getMap: this.getMap
}
}
然後在任何後代組件裏，我們都可以使用 inject 選項來接收指定的我們想要添加在這個實例上的屬性
inject: ['getMap']
實際上，你可以把依賴注入看作一部分“大範圍有效的 prop”，除了：
祖先組件不需要知道哪些後代組件使用它提供的屬性
後代組件不需要知道被注入的屬性來自哪裏
14 序列化偵聽
現在，你已經知道了 $emit 的用法，它可以被 v-on 偵聽，但是 Vue 實例同時在其事件接口中提供了其它的方法。我們可以：
通過 $on(eventName, eventHandler) 偵聽一個事件
通過 $once(eventName, eventHandler) 一次性偵聽一個事件
通過 $off(eventName, eventHandler) 停止偵聽一個事件
例 ：
mounted: function () {
this.attachDatepicker('startDateInput')
this.attachDatepicker('endDateInput')
},
methods: {
attachDatepicker: function (refName) {
var picker = new Pikaday({
field: this.$refs[refName],
format: 'YYYY-MM-DD'
})
this.$once('hook:beforeDestroy', function () {
picker.destroy()
})
}
}
15 組件之間的循環引用
<tree-folder> 組件，模板是這樣的：
<p>
<span>{{ folder.name }}</span>
<tree-folder-contents :children="folder.children"/>
</p>
還有一個 <tree-folder-contents> 組件，模板是這樣的：
<ul>
<li v-for="child in children">
<tree-folder v-if="child.children" :folder="child"/>
<span v-else>{{ child.name }}</span>
</li>
</ul>
組件引入：
beforeCreate: function () {
this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}
或者
components: {
TreeFolderContents: () => import('./tree-folder-contents.vue')
}
16
內聯模板 類似於<template>標籤
當 inline-template 這個特殊的特性出現在一個子組件上時，這個組件將會使用其裏面的內容作爲模板，而不是將其作爲被分發的內容
<my-component inline-template>
<div>
<p>These are compiled as the component's own template.</p>
<p>Not parent's transclusion content.</p>
</div>
</my-component>
17 X-Templates
另一個定義模板的方式是在一個 <script> 元素中，併爲其帶上 text/x-template 的類型，然後通過一個 id 將模板引用過去
<script type="text/x-template" id="hello-world-template">
<p>Hello hello hello</p>
</script>
Vue.component('hello-world', {
template: '#hello-world-template'
})
18 通過 v-once 創建低開銷的靜態組件
Vue.component('terms-of-service', {
template: `
<div v-once>
<h1>Terms of Service</h1>
... a lot of static content ...
</div>
`
})
19 進入離開列表過渡
在 CSS 過渡和動畫中自動應用 class
可以配合使用第三方 CSS 動畫庫，如 Animate.css
在過渡鉤子函數中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 動畫庫，如 Velocity.js
可以在屬性中聲明 JavaScript 鉤子
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
20 混入
混入 (mixins) 是一種分發 Vue 組件中可複用功能的非常靈活的方式。混入對象可以包含任意組件選項。
當組件使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。
21 this.$options 可以拿到組件對象
22 自定義指令 [*****]
https://cn.vuejs.org/v2/guide/custom-directive.html
// 註冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
// 當被綁定的元素插入到 DOM 中時……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
註冊局部指令，組件中也接受一個 directives 的選項：
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
}
}
<input v-focus />
指令鉤子函數 用directive命令生成
如果指令需要多個值，可以傳入一個 JavaScript 對象字面量。記住，指令函數能夠接受所有合法的 JavaScript 表達式。
23 render 函數可以做JavaScript級別的頁面渲染
24 渲染函數和 JSX
25 使用插件
通過全局方法 Vue.use() 使用插件。它需要在你調用 new Vue() 啓動應用之前完成
而在例如 CommonJS 的模塊環境中，你應該始終顯式地調用 Vue.use()
// 用 Browserify 或 webpack 提供的 CommonJS 模塊環境時
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了調用此方法
Vue.use(VueRouter)
26 開發插件
27 過濾器
Vue.js 允許你自定義過濾器，可被用於一些常見的文本格式化
雙花括號插值和 v-bind 表達式 (後者從 2.1.0+ 開始支持)。
過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符號指示,例：
<!-- 在雙花括號中 -->
{{ message | capitalize }}
{{ message | filterA | filterB }}
{{ message | filterA('arg1', arg2) }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
或者
你可以在一個組件的選項中定義本地的過濾器：
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
或者在創建 Vue 實例之前全局定義過濾器：
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
28 單文件組件
文件擴展名爲 .vue 的 single-file components(單文件組件)
爲以上所有問題提供瞭解決方法，並且還可以使用 webpack 或 Browserify 等構建工具。
29 TypeScript 支持
30 狀態管理 vuex 達成子組件之間的通訊
如何引入Vuex?
下載vuex: npm install vuex --save
在main.js添加:
import Vuex from 'vuex'
Vue.use( Vuex );
const store = new Vuex.Store({
//待添加
})
new Vue({
el: '#app',
store,
render: h => h(App)
})
state：用來存放組件之間共享的數據。他跟組件的data選項類似，只不過data選項是用來存放組件的私有數據。
可以把getters看成是store的計算屬性
mutations： 那如何把數據存儲到state中呢？
在 Vuex store 中，實際改變 狀態(state) 的唯一方式是通過 提交(commit) 一個 mutation,
例如：this.$store.commit('change',10) ，觸發mutations中方法change 做改變。
actions和mutations的區別
1.Actions 提交的是 mutations，而不是直接變更狀態。也就是說，actions會通過mutations，讓mutations幫他提交數據的變更。
2.Action 可以包含任意異步操作。ajax、setTimeout、setInterval不在話下