Vue.js兼容性
Vue.js.js 不支持 IE8 及其以下版本，因為 Vue.js.js 使用了 IE8 不能模擬的 ECMAScript 5 特性。 Vue.js.js 支持所有兼容 ECMAScript 5 的瀏覽器。
Vue.js安裝
安裝方式有兩種：
1、直接下載用script標簽引入（推薦引入開發版本，壓縮版本會失去錯誤提示和警告）
2、使用cdn方法引入
3、npm安裝
npm安裝的前提需要安裝了nodejs，這里推薦nvm安裝nodejs
附上一小段nvm使用的命令：
$ nvm install v6.10.2 $ nvm list * 6.10.2 (Currently using 64-bit executable) $ nvm use 6.10.2 Now using node v6.10.2 (64-bit) $ node -v v6.10.2 $ npm -v 3.10.10 $ npm install Vue.js 或者： $ cnpm install bower $ bower install Vue.js
注意：可以使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
這樣就可以使用 cnpm 命令來安裝Vue.js等模塊了：
$ cnpm install vue
Vue.js腳手架安裝
# 全局安裝 Vue.js-cli $ npm install --global Vue.js-cli # 創建一個基於 webpack 模板的新項目 $ Vue.js init webpack my-project # 切換到項目目錄，安裝依賴 # 下面出現的所有提示 直接回車則選擇默認選項或者yes $ cd my-project $ npm install # 運行該項目 $ npm run dev DONE Compiled successfully in 4388ms > Listening at http://localhost:8080 * 這里默認8080端口，如果想要更改指定端口，找到根目錄下config文件夾---index.js dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, cssSourceMap: false }
port可以改成我們指定的端口，這里不僅可以改變端口，還可以根據需要改變其他配置信息。
建好Vue.js項目之后，想要再次localhost:8080下運行起來，在cmd命令框，進入項目根目錄文件夾路徑下，然后
npm run dev,則他會運行dev-sever.js文件，之后運行成功，頁面自動打開。
Vue.js起步
var app1=new Vue.js({
el:"#app1",
data:{
message:"hahahha"+new Date()
}
});
Vue.js 實例化代碼可以直接寫new Vue.js，也可以賦個值，當實例化的Vue.js賦值給一個變量之后，在控制台可以直接通過改app1.message等代碼，在瀏覽器可以直接看到頁面效果。
<div id="app3">
<ol>
<li v-for="todo in todos">{{todo.text}}</li>
</ol>
</div>
var app3 = new Vue.js({
el:"#app3",
data:{
todos:[
{text:"aaa"},
{text:"bbb"},
{text:"ccc"},
{text:"ddd"}
]
}
});
**這里注意：循環的列表項是加載列表標簽li標簽上的，不是列表盒子上，在控制台輸入
app3.todos.push({text:"eee"}); //5
app3.todos.push({text:"fff"}); //6
頁面中會直接顯示push進來的列表項，控制台打印出數組的長度
var app4 = new Vue.js({
el:"#app4",
data:{
message:"我要逆轉了"
},
methods:{
reverseMsg:function () {
this.message=this.message.split("").reverse().join("");
}
}
});
**這里注意：methods方法要加s，否則報錯：
父組件向子組件傳遞數據，使子組件接受一個屬性：
<div id="app6">
<ol>
<hello v-for="item in fruits" :todo="item"></hello>
</ol>
</div>
//定義新組件
Vue.js.component('hello,{
props:['todo'],
template:"<div>{{todo.text}}</div>"
});
var app6 = new Vue.js({
el:"#app6",
data:{
fruits:[
{text:"apple"},
{text:"apple2"},
{text:"apple3"},
{text:"apple4"}
]
}
})
**關鍵點：使用 v-bind 指令將屬性傳到每一個重復的組件中，繽紛切讓它等於遍歷出來的元素。
Vue.js腳手架使用
webstorm eslint配置：推薦一篇文章：http://blog.csdn.net/whitehack/article/details/52422873
src目錄是我們要開發的目錄：
assets: 放置一些圖片，如logo等。
components: 目錄里面放了一個組件文件，可以不用。
App.vue.js: 項目入口文件，我們也可以直接將組建寫這里，而不使用 components 目錄。
main.js: 項目的核心文件。
**使用要點：在App.Vue.js中導入components組件文件夾下寫好的組件，在模板里使用組件，導出默認，導出的名字為模板最外層元素的id或者class名稱，components寫組件名稱；單獨的組件寫好后也要記得導出默認，導出的名字為模板最外層元素的id或者class名稱。[這些都遵循了ES6語法格式]
<script>
// 導入組件
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
</script>
**在我第一次使用時eslint報錯：
錯誤1：導入的地址必須使用單引號
錯誤2：在從導出時components屬性冒號之后要加空格，再寫大括號
錯誤3：components屬性下寫組件名稱，應該縮進4個空格
錯誤4：在Apple.vue中多寫了個s[個人不細心，此類錯誤盡量避免]
當這些錯誤都修改完成之后，頁面正常顯示出來了：[eslint檢查比較嚴格，如果想要關閉可以自行百度]
Vue.js具體使用
Vue.js 條件
v-if、v-else-if、v-else
條件語句的作用：通過判斷不同的條件，顯示不同的區塊，類似php條件語句的用法，同樣可以嵌套v-else-if（2.1.0新增）。
v-show
控制顯示隱藏，不支持<template>語法,也不支持 v-else。
Vue.js循環
用法類似for in循環，所以指令為v-for，(這里切記循環列表項寫在循環的單個項目元素上)，支持template模版使用。
用法三種：
item in items
(value, key) in object
(value, key, index) in object
這里有一個特殊的用法：
可以迭代整數：
<div id="app"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul> </div>
<script> new Vue({ el: '#app' }) </script>
輸出：
如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件不太可能改變，則使用 v-if 較好。當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級。
Vue.js 計算屬性（對比angular和react的優點之一）
computed vs methods
我們可以使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基於它的依賴緩存，只有相關依賴發生改變時才會重新取值。而使用 methods ，在重新渲染的時候，函數總會重新調用執行。
可以說使用 computed 性能會更好，但是如果你不希望緩存，你可以使用 methods 屬性。
computed 默認有getter方法，可以自己定義一個setter方法
Vue.js 樣式綁定
v-bind: 可以綁定如下幾種：
對象語法
數組語法
Vue.js class綁定：v-bind：class=”{ }”
Vue.js style(內聯樣式): v-bind:style=”{ }”
示例：
<div id="app12"> <div v-bind:class="[isActive?active:'',errorClass]">我綁定了不同的class</div> <div v-bind:class="{active:isActive,errorClass:hasError}">我綁定了不同的class</div> <div v-bind:class="classObject">我綁定了不同的class</div> <div v-bind:class="{active:isActive}">我綁定了不同的class</div> </div>
var app12 = new Vue({ el:"#app12", data:{ active:"active", errorClass:"errorClass", isActive:true, classObject: { 'active': true, 'errorClass': true }, hasError:true } });
**注意：
以上從上到下依次為：
u 數組綁定class,數組綁定的class，數組元素是對象的名稱，在vue data里要寫對象的值即真正的class名才可以
u 多個對象屬性綁定class,
u 直接綁定一個對象綁定class,在vue data里寫對象屬性名的時候，可加引號可不加，但是有中划線的時候必須加。
u 單個對象屬性綁定class，根據vue中isActive的狀態改變
Vue.js表單控件綁定
v-model 會根據控件類型自動選取正確的方法來更新元素。
綁定 value
對於單選按鈕，勾選框及選擇列表選項， v-model 綁定的 value 通常是靜態字符串（對於勾選框是邏輯值）：
<!-- 當選中時，`picked` 為字符串 "a" ，單選按鈕--> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 為 true 或 false ，多選框--> <input type="checkbox" v-model="toggle"> <!-- 當選中時，`selected` 為字符串 "abc"，select選擇框 --> <select v-model="selected"> <option value="abc">ABC</option> </select>
但是有時我們想綁定 value 到 Vue 實例的一個動態屬性上，這時可以用 v-bind 實現，並且這個屬性的值可以不是字符串。
復選框如果是一個則為邏輯值，如果是多個則綁定到同一個數組。
Vue.js組件
以下實例中將 v-bind 指令將 todo 傳到每一個重復的組件中：
Prop 實例
<div id="app"> <ol> <todo-item v-for="item in sites" v-bind:todo="item"></todo-item> </ol> </div>
<script> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) new Vue({ el: '#app', data: { sites: [ { text: 'Runoob' }, { text: 'Google' }, { text: 'Taobao' } ] } }) </script>
注意: prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來。
**這里綁定todo屬性是因為父組件不能直接把數據傳到自定義的子組件上，需要綁定一個屬性作為橋梁。
報錯信息
Vue.js2.0 不支持
$index
報錯：
Vue.js.js:569 [Vue.js warn]: Property or method "$index" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in <Root>)