零．混沌
vue是什麼
vue是一套構建使用者介面的漸進式框架。
他的特點：
簡潔：頁面由HTML模板+Json資料+Vue例項組成
資料驅動：自動計算屬性和追蹤依賴的模板表示式
元件化：用可複用、解耦的元件來構造頁面
輕量：程式碼量小，不依賴其他庫
快速：精確有效批量DOM更新
模板友好：多種方式安裝，很容易融入
所需要儲備的技術
扎勢的
html，css,JavaScript基礎知識 火狐中文社群 https://developer.mozilla.org…
es6相關知識 ECMAScript 6 入門 http://es6.ruanyifeng.com/#RE…
nodejs相關知識 npm 基本用法和實用技巧 https://github.com/theicebear…
webpack相關知識 webpack中文社群 https://doc.webpack-china.org/可以簡單的使用命令終端
使用
vue-cli建立專案
1.
node環境安裝(更新到最新)
2.
vue-cli腳手架安裝2.1
npm install vue-cli -g
3. 建立專案
3.1
vue init webpack專案名稱
4. 進入該目錄
4.1
cd 專案名稱
5. 安裝依賴包
5.1
npm install（或者簡寫 i ）
6. 啟動專案
npm run dev
模板語法
資料繫結最常見的形式-
使用
“Mustache”語法（雙大括號）的文字插值：{{msg}} -
使用
v-bind在 HTML 屬性中使用:<div v-bind.id="msg"><div>
一．指令
1. 內建指令
1.1 v-text:更新元素的 textContent。
<span v-text="msg"></span> 等同於 <span>{{msg}}</span>
1.2 v-html:更新元素的 innerHTML。注意：內容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯 。
<div v-html="msg"></div>
1.3 v-show:切換元素的 display CSS 屬性。
1.4 v-if:在切換時元素及它的資料繫結 / 元件被銷燬並重建。
1.5 v-else:配合v-if使用。
1.6 v-else-if:配合v-if使用
<div v-if></div>
<div v-else-if></div>
<div v-else-if></div>
<div v-else></div>`1.7 v-for：基於源資料多次渲染元素或模板塊。
<div v-for="(val, key, index) in data"></div>
陣列更新檢測的方法有
push()
pop()
shift()
unshift()
splice()
sort()
reverse()重塑陣列方法
filter()
concat()
slice()注意事項由於 JavaScript 的限制， Vue 不能檢測以下變動的陣列：
當你利用索引直接設定一個項時，例如：
vm.items[indexOfItem] = newValue解決辦法Vue.set(example1.items, indexOfItem, newValue)當你修改陣列的長度時，例如：
vm.items.length = newLength解決辦法example1.items.splice(newLength)
1.8 v-on：繫結事件監聽器。可以簡寫為：@
監聽當前例項上的自定義事件。事件可以由vm.$emit觸發。回撥函式會接收所有傳入事件觸發函式的額外引數。
vm.$on(`test`, function(msg) { console.log(msg) }) vm.$emit(`test`, `hi`)修飾符：
.stop– 呼叫 event.stopPropagation()
.prevent– 呼叫 event.preventDefault()。
.capture– 新增事件偵聽器時使用 capture 模式。
.self– 只當事件是從偵聽器繫結的元素本身觸發時才觸發回撥。
.{keyCode | keyAlias}– 只當事件是從偵聽器繫結的元素本身觸發時才觸發回撥。
.native– 監聽元件根元素的原生事件。
1.9 v-bind：動態地繫結一個或多個特性，或一個元件 prop 到表示式。可以簡寫為：:
<!-- 繫結一個屬性 -->
<img v-bind:src="src">
<!-- 縮寫 -->
<img :src="src">1.10 v-model：在表單控制元件或者元件上建立雙向繫結。
限制使用在
<input>
<select>
<textarea>
components
可使用的修飾符
.lazy
.number
.trim
1.11 v-pre：跳過這個元素和它的子元素的編譯過程。
1.12 v-cloak：保持在元素上直到關聯例項結束編譯。
配合 CSS 規則使用 如 [v-cloak] { display: none }
1.13 v-once：只渲染元素和元件一次。
2. 自定義指令
2.1 全域性自定義指令
Vue.directive(`focus`, { // 當繫結元素插入到 DOM 中。 inserted: function(el) { // 聚焦元素 el.focus() } })2.2 區域性自定義指令
二．元件
元件是可擴充套件 HTML 元素，封裝可重用的程式碼。
1. 內建元件
1.1 component ：渲染一個“元元件”為動態元件
1.2 transition ：單個元素/元件的過渡效果
1.3 transition-group ：多個元素/元件的過渡效果。
1.4 keep-alive ：包裹動態元件時，會快取不活動的元件例項，而不是銷燬它們。
1.5 slot：元素作為元件模板之中的內容分發插槽。 <slot> 元素自身將被替換。
2.自定元件
注意：
要確保在初始化根例項 之前 註冊了元件
2.1 全域性元件
Vue.component(`my-component`, {
})2.2 區域性元件
var Child = {
template: `<div>A custom component!</div>`
}
new Vue({
// ...
components: {
// <my-component> 將只在父模板可用
`my-component`: Child
}
})2.3 DOM 模版解析說明
這些元素 <ul> ， <ol>， <table> ， <select> 限制了能被它包裹的元素， <option> 只能出現在其它元素內部。
2.4 data 必須是函式
2.5 元件之間的通訊- 父傳子
元件例項的作用域是孤立的。子元件要顯式地用 props 選項宣告它期待獲得的資料： Vue.component(`child`, { // 宣告 props props: [`message`], // 就像 data 一樣，prop 可以用在模板內 // 同樣也可以在 vm 例項中像 “this.message” 這樣使用 template: `<span>{{ message }}</span>` }) 向父元件傳入一個普通字串： <child message="hello!"></child>當使用的
不是字串模版，camelCased (駝峰式)命名的prop需要轉換為相對應的kebab-case (短橫線隔開式)命名：Vue.component(`child`, { // camelCase in JavaScript props: [`myMessage`], template: `<span>{{ myMessage }}</span>` }) <!-- kebab-case in HTML --> <child my-message="hello!"></child>
如果你使用字串模版，則沒有這些限制。
2.6 元件之間的通訊- 子傳父
使用
$on(eventName)監聽事件使用
$emit(eventName)觸發事件
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
Vue.component(`button-counter`, {
template: `<button v-on:click="increment">{{ counter }}</button>`,
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1
this.$emit(`increment`)
}
},
})
new Vue({
el: `#counter-event-example`,
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})2.7 元件之間的通訊- 非父子
簡單的場景下，可以使用一個空的 Vue 例項作為中央事件匯流排：
複雜的情況下，我們應該考慮使用專門的 狀態管理模式(vuex).
2.8 Slot 分發內容
無名 Slot
子元件 my-component 模板： <div> <h2>我是子元件的標題</h2> <slot></slot> </div> 父元件模版： <div> <h1>我是父元件的標題</h1> <my-component></my-component> </div> 渲染結果： <div> <h1>我是父元件的標題</h1> <div> <h2>我是子元件的標題</h2> </div> </div>有名
三．路由
安裝使用
npm install vue-router
### main.js ### import router from `./router` new Vue({ el: `#app`, router, template: `<App/>`, components: { App } }) ### router.js ### import VueRouter from `vue-router` Vue.use(VueRouter) export default new Router({ routes: [ { path: `/`, name: `foo`, component: foo } })