vue是一套構建用戶界面的漸進式框架。css
他的特色：html
簡潔：頁面由HTML模板+Json數據+Vue實例組成vue
數據驅動：自動計算屬性和追蹤依賴的模板表達式node
組件化：用可複用、解耦的組件來構造頁面webpack
輕量：代碼量小，不依賴其餘庫git
快速：精確有效批量DOM更新es6
模板友好：多種方式安裝，很容易融入github
所須要儲備的技術
扎勢的
html，css,JavaScript基礎知識 火狐中文社區 https://developer.mozilla.org...web
es6相關知識 ECMAScript 6 入門 http://es6.ruanyifeng.com/#RE...vue-router
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>
<span v-text="msg"></span> 等同於 <span>{{msg}}</span>
注意：內容按普通 HTML 插入 - 不會做爲 Vue 模板進行編譯 。<div v-html="msg"></div>
<div v-if></div>
<div v-else-if></div>
<div v-else-if></div>
<div v-else></div>`
<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)
@ 監聽當前實例上的自定義事件。事件能夠由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- 監聽組件根元素的原生事件。
: <!-- 綁定一個屬性 --> <img v-bind:src="src"> <!-- 縮寫 --> <img :src="src">
限制使用在
<input>
<select>
<textarea>
components
可以使用的修飾符
.lazy
.number
.trim
配合 CSS 規則使用 如 [v-cloak] { display: none }
一次。2.1 全局自定義指令
Vue.directive('focus', { // 當綁定元素插入到 DOM 中。 inserted: function(el) { // 聚焦元素 el.focus() } })2.2 局部自定義指令
組件是可擴展 HTML 元素，封裝可重用的代碼。
注意：
要確保在初始化根實例 以前 註冊了組件
Vue.component('my-component', {
})
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// ...
components: {
// <my-component> 將只在父模板可用
'my-component': Child
}
})
這些元素 <ul> ， <ol>， <table> ， <select> 限制了能被它包裹的元素， <option> 只能出如今其它元素內部。
組件實例的做用域是孤立的。子組件要顯式地用 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>
若是你使用字符串模版，則沒有這些限制。
使用
$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
}
}
})
簡單的場景下，可使用一個空的 Vue 實例做爲中央事件總線：
複雜的狀況下，咱們應該考慮使用專門的 狀態管理模式(vuex).
無名 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 } })