1、安裝
一、基於nodeJs環境
安裝node設置node權限
二、基於node，利用淘寶npm鏡像安裝相關依賴
在終端裏直接輸入：
(1)、(2)、vue ，回車，若出現vue信息表示成功
三、安裝全局vue-cli 腳手架，用於幫助搭建所需模版框架
npm install -g vue-cli ， 回車等待安裝....
四、建立項目
vue init webpack 項目名 ，回車
五、安裝依賴
cd 項目名 ，回車進入到文件夾
cnpm install ，回車等待
項目結構裏多了一個 node_modules 文件夾(改文件裏的內容就是以前安裝的依賴)
六、測試環境是否搭建成功
方法1: cnpm run dev (-port 新端口號／在config文件下的index文件下的prot字段修改成新端口號)
方法2:在瀏覽器輸入localhost:8080 (默認端口號8080)
2、Vue.js 起步
一、語法格式以下：
var vm=new Vue({
//選項
})
HTML: <div id="app">
<p>site:{{site}}；{{url}}</p>
<p>{{details}}</p>
</div>
JS: var vm=new Vue({ el:'#app', data:{ site:'百度', url:'www.baidu.com' }, methods:{ details:function(){ return this.site+"查詢"; ｝ } })
頁面結果： site:百度；www.baidu.com 百度查詢
<div id="app">
<p>site:{{site}}；url:{{url}}</p>
</div>
var data={site:"百度"url:"www.baidu.com"} var vm=new Vue({ el:'#app', data:data }) document.write(vm.$data===data) //true document.write("<br>"); document.writer(vm.$el===document.getElementById('app')) //true
site:百度；url:www.baidu.com true true
3、Vue.js 模版語法
數據綁定最多見形式就是使用{{...}} (雙大括號)的文本插值：
<div id="app"><p>{{message}}</p></div>
一、v-html 指令
v-html指令用於輸出html代碼：
<div id="app"> <div v-html="message"></div> <div> new Vue({ el:'#app', data:{ message:"Hello Vue!" } })
二、v-bind 指令
屬性中的值應用使用v-bind 指令
.class1{color:red;background:#444;}
<div id="app"> <label for="r1"></label><input id="r1" type="checkbox" v-model="class1"> <br> <div v-bind:class="{'class1':class1}">文字文字</div> </div> new Vue({ el:'#app', data:{ class1:false } });
三、表達式
<div id="app"> {{ 5+5 }} <br> {{ ok ? 'YES' : 'NO' }} <br> {{ message.split('').reverse().join('') }} <!--字符串反轉--> <div v-bind:id="'list-'+id">文字信息</div> </div> new Vue({ el:'#app', data:{ ok:true, message:'ABC', id:1 } })
10
YES
CBA
文字信息
四、指令
指令是帶有v-前綴的特殊屬性。
指令用於在表達式的值改變時，將某些行爲應用到DOM上。
v-if
<div id="app"><p v-if="seen">如今你看到我了</p></div> new Vue({ el:'#app', data:{ seen:true } })
這裏的v-if指令將根據表達式seen的值(true或false)來決定是否插入p元素。
其餘v-指令：
<a v-bind:href="url">a連接</a> <a v-on:click="doSomething">a連接</a> v-on指令，用於監聽DOM事件。
<form v-on:submit.prevent="onSubmit"></form> 修飾符
五、雙向數據綁定
在input輸入框中咱們可使用v-model指令來實現雙向數據綁定：
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
new Vue({ el:'#app', data:{ message:'ABC!' } })
六、過濾器
Vue.js容許你自定義過濾器，被用做一些常見的文本格式化。由「管道符」指示 ｜
七、縮寫
v-bind 縮寫:
v-bind:href="url" //完整寫法
:href="url" //縮寫
v-on 縮寫 :
v-on:click="doSomething" //完整寫法
@click="doSomething" //縮寫
4、條件語句和循環語句
一、v-if / v-else / v-else-if /v-show 條件語句
<div id="app"> <div v-if="type==='A'">A</div> <div v-else-if="type==='B'">B</div> <div v-else-if="type===C">C</div> <div v-else>Not A/B/C</div> </div> new Vue({ el:'#app', data:{ type:'C' } })
<h1 v-show="ok">Hello!</h1>
二、v-for 循環語句
<div id="app"> <ol v-for="site in sites"> <li>{{site.name}}</li> </ol> </div> new Vue({ el:'#app', data:{ sites:[ {name:'Ling'}, {name:'Hone'}, {name:'Fei'} ] } })
結果：
1.Ling
2.Hong
3.Fei
三個參數索引。
<div id="app"> <ul> <li v-for="(value,key,index) in object"> {{index}}.{{key}}:{{value}} </li> </ul> </div> new Vue({ el:'#app', data:{ object:{ "name":"百度"， "url":"www.baidu.com" } } })
結果：
1.name:百度
2.url:
www.baidu.com
5、Vue.js 計算屬性
一、計算屬性關鍵詞：computed。
<div id="app">
<div>原始字符串：{{message}}</div>
<div>計算後反轉字符串：{{reversedMessage}}</div>
</div>
var vm=new Vue({ el:'#app', data:{ message:'ABC!' }, computed:{ reversedMessage:function(){ return this.message.split('').reverse().join('') } } })
原始字符串：ABC!
計算後反轉字符串：!CBA
computed VS methods
咱們可使用methods來替代computed，效果上兩個都是同樣的，可是computed是基於它的依賴緩存，只有相關依賴發生時纔會從新取值。而使用methods，在從新渲染的時候，函數總會從新調用執行。
能夠說computed性能會更好，可是若是你不但願緩存，可使用methods屬性。
二、computed setter
computed屬性默認只有getter，不過在須要時你也能夠提供一個setter：
<div id="app">
<p>{{site}}</p>
</div>
var vm Vue({ el:'#app', data:{ name:'Google', url:'www.google.com' }, computed:{ site:{ get:function(){ return this.name+' : '+this.url }, set:function(newValue){ var names=newValue.split(' ') this.name=names[0] this.url=names[names.length-1] } } } }) vm.site='百度 www.baidu.com'; document.wirte("name:"+vm.name); document.write("<br"); document.write("url:"+vm.url);
結果：
百度 ：
www.baidu.com
name:百度
url:www.baidu.com
6、監聽屬性
咱們能夠經過 watch 來響應數據變化：
<div id="app"> 公里<input type="text" v-model="kilometers"><br> 米：<input type="text" v-model="meters"> </div> <div id="info"></div> var vm=new Vue({ el:'#app', data:{ kilometers:0, meters:0 }, watch:{ kilomerts:function(val){ this.kilomerts=val; this.meters=val*1000; }, meters:function(val){ this.kilomerts=val/1000; this.meters=val; } } }); //$watch 是一個實例方法。 vm.$watch('kilomerts',function(newValue,oldValue){ document.getElementById('info').innerHTML="修改前值爲："+oldVlaue+",修改後值爲："+newValue; });
7、樣式綁定
咱們能夠用v-bind 來設置樣式屬性。
v-bind:class設置一個對象，從而動態的切換class：
一、
<div v-bind:class="{active:isActive}"></div>
二、
<div v-bind:class="{active:isActive,item:hasItem}"></div>
三、
<div id="app"><p v-bind:class="objectClass"></p></div> new Vue({ el:'#app', data:{ objectClass:{ active:true, item:true } } })
四、數組語法
<div v-bind:class="[isActive,hasItem]"></div>
五、還能夠用三元表達式切換class
<div v-bind:class="[isActive,hasItem?item:'']"></div>
8、事件處理
一、v-on
<botton v-on:click="counter+=1">增長1</button>
<p>這個按鈕被點擊了{{counter}}次</p>
new Vue({ el:'#app', data:{ counter:0 } })
9、表單
一、input和textarea元素中使用v-model實現雙向數據綁定：
<div id="app">
<p>input 元素：</p>
<input v-model="message" placeholder="編輯我.....">
<p>消息是：{{message}}</p>
<p>textarea 元素：</p>
<textarea v-model="message2" placeholder="編輯我....."></textarea>
<p style="white-space:pre">{{message2}}</p>
</div>
new Vue({ el:'#app', data:{ message:'Googel', message:'谷歌 \r\n http://www.google.com' } })
二、複選框
<div id="app"> <p>單個複選框</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{checked}}</label> <p>多個複選框</p> <input type="checkbox" id="baidu" value="Baidu" v-model="checkedNames"> <label for="baidu">百度</babel> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">谷歌</babel> <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> <label for="google">淘寶</babel> <br> <span>{{checkedNames}}</span> </div> new Vue({ el:'#app', data:{ checked:false, checkedNames:[] } })
10、組件
組件(Component)是Vue.js最強大的功能之一。
組件能夠擴展HTML元素，封裝可重用的代碼。
註冊一個全局組件語法格式以下：
trgName 爲組件名，options爲配置選項。註冊後，咱們可使用如下方式來調用組件：
一、全局組件
註冊一個簡單的<aaa></aaa>,並使用它：
<div id="app"><aaa></aaa></div> Veu.component('aaa',{ template:'<h1>自定義組件！</h1>' }) new Vue({el:'#app'})
二、局部組件
var Child={ template:'<h1>自定義組件！</h1>' } new Vue({ el:'#app', data:{ 'aaa':Child //<aaa>將只能在父模版可用 } })
三、動態Prop
<div id="app"> <input v-model="parentMsg"/> <br> <child v-bind:message="parentMsg"></child> </div> Vue.component('child',{ props:["message"], template:'<span>{{message}}</span>' }) new Vue({ el:'#app', data:{ parentMsg:'父組件內容！' } })
四、自定義事件
父組件是使用props傳遞數據給子組件，但若是子組件要把數據傳遞回去，9⃣️須要使用自定義事件！
咱們可使用v-on綁定自定義事件，每一個Vue實例都實現了事件接口(Events interface),即：
使用：$on(eventName)監聽事件
$emit(eventName)觸發事件
<div id="app">
<p>{{total}}</p>
<counter v-on:increment="increment"></counter>
<counter v-on:increment="increment"></counter>
</div>
Vue.component('counter',{ template:'<button v-on:click="incrementHandler">{{counter}}</button>', data:function(){ return {counter:0} }, methods:{ incrementHandler:function(){ this.counter+=1
this.$emit('increment') } } }) new Vue({ el:'#app', data:{ total:0 }, methods:{ increment:function(){ this.total+=1 } } })
若是你想在某個組件的根元素上監聽一個原生事件。可使用.native 修飾 v-on .
11、自定義指令
一、頁面載入時，input元素自動獲取焦點
<div id="app"> <input v-focus> </div> Vue.directive('focus',{ function(el){ el.focus() } }) new Vue({el:'#app'})
二、指令參數
<div id="app">
<div v-lhf="{color:'red',text:'凌紅飛 😄'}"></div>
</div>
Vue.directive('lhf',function(el,binding){ el.innerHTML=binding.value.text el.style.backgroundColor=binding.value.color }) new Vue({el:'#app'})
12、路由
<div id="app"> <rooter-link to="/foo">Go To Foo</rooter-link> <rooter-link to="/bar">Go To Bar</rooter-link> <rooter-view></rooter-view> <!--路由渲染到這裏--> </div> ／／ 1、定義路由組件 const Foo={template:'<div>Hello Foo</div>'} const Bar={template:'<div>Hello Bar</div>'} ／／ 2、定義路由 const routes=[ {path:'/foo',component:Foo}, {path:'/bar',component:Bar} ] ／／ 3、建立router實例，而後傳routers配置 const router=new VueRouter({ routes //(縮寫)至關於 routes:routes }) ／／ 4、建立和掛載根實例。記得要經過router配置參數注入路由 const app=new Vue({ router }).$mount('#app')