準備：
1、環境搭建
①必須先搭建Node.js環境
下載網址：http://nodejs.cn
Win+R 彈出cmd，輸入node -v 和 npm -v 分別查看版本號，代表node.js安裝完成。
②安裝npm鏡像，用cnpm替代npm，cnpm為國內服務器，比npm要快
npm install -g cnpm –registry=https://registry.npm.taobao.org
③安裝vue 安裝完後項目檔夾下多出node_modules的檔夾，但只有vue和vue-resource兩個檔夾
(npm)cnpm install vue --save //把vue安裝到默認依賴庫
(npm)cnpm install vue --save-dev //把vue安裝到開發庫(devDependencies)
(npm)cnpm install vue-resource --save //安裝resource
③官網下載直接引入
<script src="https://unpkg.com/vue"></script> //全引入
https://unpkg.com/vue@2.5.2/dist/vue.js
③安裝vue-cli腳手架
(npm)cnpm install -g vue-cli //全局安裝vue-cli
(npm)cnpm install -g webpack //全局安裝webpack
(npm)cnpm install -g webpack-dev-server //安裝webpack的本地webserver
安裝完成後，vue-cli腳手架其實就已經把vue也裝掉了，所以只需輸入vue -V 和 webpack -v 等等就可以查看安裝成功與否。
④運行別人的vue.js專案domo
可以從github上克隆下來，然後將項目文件放到某個盤符下，然後cmd命令 找到該盤符，比如 f:domo_vue
cd domo_vue //打開項目目錄
cnpm(npm) install //在本地安裝
cnpm(npm) run dev //在本地的流覽器打開127.0.0.1帶上端口號就可以跑起來了。
2、創建運行：先創建，在安裝依賴
創建項目：vue init webpack vue_project //項目文件的名字
創建項目：cnpm init
安裝依賴：cnpm install //項目檔夾下多出node_modules的檔夾
運行項目：cnpm run dev //本地端運行，地址為http://localhost:8080
服務器運行：npm run build
直引版の命令：
1、
template：
<p id='pa'>{{a}}</p>
script：
new Vue({
el: '#pa',
data:{ //數據
a:1,
},
methods:{ //方法
doSomething:function(){ //執行函數
console(this.a); //列印a的值
this.a++;
}
},
watch:{ //監聽變化
‘a':function(val,oldval){ //val:新值，oldval:老值
console.log(val,oldval)
}
}
})
2、數據渲染：
<p>{{a}}</p> //容易在沒加載完的時候，顯示。推薦使用v-text。作用同下。
<p v-text='a'></p> //html標籤在渲染的時候被解析，作用同上
<p v-html='a'></p> //html標籤在渲染的時候被源碼輸出
<input v-model='abc' type='input'> //{{abc}}動態獲取input的值
3、v-if：條件渲染指令，它根據運算式的真假來刪除和插入元素，它的基本語法如下：v-if="expression"，expression是一個返回bool值的運算式，運算式可以是一個bool屬性，也可以是一個返回bool的運算式。如果為false，則不往頁面插入元素。
<p v-if='isShow'></p>
例如：
template:
<div id="app">
<h1>Hello, Vue.js!</h1>
<h1 v-if="yes">Yes!</h1>
<h1 v-if="no">No!</h1>
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
</div>
script:
var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 28,
name: 'keepfool'
}
})
4、v-else：為v-if或v-show添加一個"else塊"。v-else元素必須立即跟在v-if或v-show元素的後面——否則它不能被識別。相當於if-else語句或者show-else語句
<div id="app">
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-else>Name: {{ name }}</h1>
<h1>---------------------分割線---------------------</h1>
<h1 v-show="name.indexOf('keep') >= 0">Name: {{ name }}</h1>
<h1 v-else>Sex: {{ sex }}</h1>
</div>
5、v-show：也是條件渲染指令，和v-if指令不同的是，使用v-show指令的元素始終會被渲染到HTML，它只是簡單地為元素設置CSS的style屬性。
<p v-show='isShow></p>
new Vue({data:{isShow:true}})
6、v-for：循環渲染
template:
<ul>
<li v-for='item in items'> //items是一個數組，item是當前被遍曆的數組元素
//<li v-for='(item,index) in items'> //item是數組元素，index為索引
<p v-text='item.label+"："index'><p>
</li>
</ul>
script:
new Vue({
data:{
items:[
{label:'apple'},
{label:'banana'}
]
}
})
7、v-bind：在其名稱後面帶一個參數，中間放一個冒號隔開，這個參數通常是HTML元素的特性（attribute），例如：v-bind:class v-bind:src 簡寫：:class :src
<p class='a' v-bind:class="{‘check':item.checked}" @click='selected'></p> //這裏面不應該使用{{}}來賦值，應使用v-bind，v-bind只會在class中添加，而不是覆蓋
<div :class="{red:isRed}"></div> //red是否展現，用isRed設置判斷
<div :class="[classA,classB]"></div>
<div :class="[classA,{classB:isB,classC:isC}]"></div>
template:
<div id="app">
<ul class="pagination">
<li v-for="n in pageCount">
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
</li>
</ul>
</div>
script:
var vm = new Vue({
el: '#app',
data: {
activeNumber: 1,
pageCount: 10
}
})
注意v-for="n in pageCount"這行代碼，pageCount是一個整數，遍歷時n從0開始，然後遍曆到pageCount –1結束。
第一個的為active
8、v-on：用於給監聽DOM事件，它的用語法和v-bind是類似的，例如監聽<a>元素的點擊事件
<a v-on:click="doSomething">或者簡寫為<a @click='doSomething(a)'>
methods:{
doSomething:function(someThing){
}
}
函數沒有參數，可加括號也可不加。如<a @click='doSomething'>或<a @click='doSomething()'>
v-on支持表達式（一元或者三元）。如<a @click='a=false'>
v-on支持賦值。如<a @click="lim=ad.length"> //變量前不加this，否則出錯，length為js屬性
9、vue-resource.js插件 用於數據交互同jQuery的ajax，但官方推薦使用axios.js替代它。
var _this=this; //this雖指vue實例，但不可用vm(var vm=new Vue())替代
this.$http.get(‘data/data.json',{‘id':123}).then(function(res){ //get同類方法有post、jsonp
_this.arrayA=res.body.result.list; //then回調
_this.stringB=res.body.result.memory; //現需用body把json數據獲取到
})
10、圖片動態渲染：
<img src="{{item.image}}"> ×
<img v-bind:src="item.image"> √
11、mounted:function(){ //生命週期
this.$nextTick(function(){
vm.cartView(); //這樣，vue實例vm就可以替代this了
this.getList(); //在生命週期內，執行一次methods中的getList()函數
})
}
12、過濾器
new Vue({
filters:{ //局部過濾器
pricefilter:function(price){
return price.toFixed(2); //取兩位小數
}
},
})
Vue.filter("price",function(value,type){
return price.toFixed(2)+type;
}); //全局過濾器
過濾器寫法：{{item.price | pricefilter}} //寫法：過濾項 | 過濾器
全局過濾器：{{item.price | price("元")}}
13、向數組中動態註冊/添加字段和值
methods:{
selectde:function(){
if(typeof item.checked =='undefined'){
Vue.set(item,"checked",true); //向item中添加checked參數和值，全局註冊
this.$set(item,"checked",true); //局部添加註冊
}
}
}
14、數組過濾：
computed:{ //new Vue({})下直接使用
fA:function(){
return this.a.slice(0,3) //取3條數據
}
}
使用：
<p v-for="(item,index) in fA">
15、實現動態選中：
v-bind:class="{‘check':index==currentIndex}"
v-on:click="currentIndex=index"
16、遍歷each：
js：a.forEach(function(value,index){})
jQuery:$.each(function(index,value){})
腳手架版の項目/命令：
1、main.js
import Vue from 'vue' //引入vue.js
import App from './App' //全稱為./App.vue
import router from './router' //語法等價於var router =require(‘./router')
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: 'App',
router,
template: '<App/>',
components: { App } //註冊組件(標籤)
})
2、index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>myproject</title>
</head>
<body>
<App></App>
<!-- <div id="app"></div> -->
<!-- built files will be auto injected -->
</body>
</html>
3、App.vue
import Hello form ‘./components/Hello' //實際為hello.vue
<template>
<div id='app'>
<input type="text" v-model="newItem" @keyup.enter="addNew">
<p>{{newItem}}</p>
<ul>
<li v-for='item in items' v-bind:class="{f:item.isF}" @click='toggleF(item)'>
{{item.label}}
</li>
</ul>
</div>
</template>
<script>
export default{
components: { Hello} //註冊組件
data:function(){
return{
title:'this is a h1',
items:[],
newItem:this.newItem, //必須得有輸出值，不然@keyup.enter不執行
}
},
methods: {
toggleF:function(item){
item.isF=!item.isF
},
addNew:function(){
console.log(this.newItem);
this.items.push({
label:this.newItem,
IsF:false
});
this.newItem=''
}
}
}
</script>
4、頭尾分離
App.vue中寫：
import Header from ‘./header'
import Footer from ‘./footer'
new Vue({
data:{},
components:{Header,Footer},
})
5、組件通信
App.vue中
new Vue({
data:{
username=''
}
props:[‘msg'],
methods:{
doT:function(){
console.log(this.msg)
}
}
})
header.vue中
<header msg='stdfsfsdfd'></header>
PS：組件綁定後，可以在html中或template直接使用組件名作為標籤使用
6、父組件傳值給子組件
一般方法
App.vue中（父）
template：
<header-man it='snow'></header-man>
script：
import HeaderMan from ‘./headerMan'
export default{
components:{HeaderMan,Footer} //綁定後使用的標籤為<header-man>和<footer>
}
headerMan.vue中（子）
script：
export default{
props:[‘it'], //然後就可以使用It中的值了，this.it或者{{it}}，不需要return
}
$.broadcast方法
headerMan.vue中（子）
template：
<input type='text' v-model="msg">
<button v-on:click='onC'>Click Me</button>
script：
export default{
data:function(){
msg:''
}
events:{
onC:function(){
this.$broadcast(‘cWord',this.msg)
}
}
}
App.vue中（父）
template：
<p>{{child}}</p>
script：
import HeaderMan from ‘./headerMan'
export default{
components:{HeaderMan,Footer} //綁定後使用的標籤為<header-man>和<footer>
},
data:function(){
child:'', //必須定義，否則無法取得值
}
methods:{
cWord:function(){
this.$broadcast(‘onC',this.msg)
}
}
7、子組件傳值給父組件
$.emit()方法
headerMan.vue中（子）
template：
<input type='text' v-model="msg">
<button v-on:click='onC'>Click Me</button>
script：
export default{
data:function(){
msg:''
}
methods:{
onC:function(){
this.$emit(‘cWord',this.msg)
}
}
}
App.vue中（父）
template：
<p>{{child}}</p>
<button v-on:cWord='listen'>
script：
import HeaderMan from ‘./headerMan'
export default{
components:{HeaderMan,Footer} //綁定後使用的標籤為<header-man>和<footer>
},
data:function(){
child:'', //必須定義，否則無法取得值
}
methods:{
listen:function(msg){
this.child=msg;
}
}
$.dispatch方法
headerMan.vue中（子）
template：
<input type='text' v-model="msg">
<button v-on:click='onC'>Click Me</button>
script：
export default{
data:function(){
msg:''
}
methods:{
onC:function(){
this.$dispatch(‘cWord',this.msg)
}
}
}
App.vue中（父）
template：
<p>{{child}}</p>
script：
import HeaderMan from ‘./headerMan'
export default{
components:{HeaderMan,Footer} //綁定後使用的標籤為<header-man>和<footer>
},
data:function(){
child:'', //必須定義，否則無法取得值
}
events:{
cWord:function(msg){
this.child=msg;
}
}