vue.js簡介

Vue.js讀音 /vju?/, 類似于 view
Vue.js是前端三大新框架：Angular.js咳榜、React.js、Vue.js之一嫁赏，Vue.js目前的使用和關(guān)注程度在三大框架中稍微勝出，并且它的熱度還在遞增。
Vue.js可以作為一個js庫來使用帝美，也可以用它全套的工具來構(gòu)建系統(tǒng)界面，這些可以根據(jù)項目的需要靈活選擇晤硕，所以說悼潭，Vue.js是一套構(gòu)建用戶界面的漸進式框架。
Vue的核心庫只關(guān)注視圖層舞箍，Vue的目標(biāo)是通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定舰褪，在這一點上Vue.js類似于后臺的模板語言。
Vue也可以將界面拆分成一個個的組件疏橄，通過組件來構(gòu)建界面占拍，然后用自動化工具來生成單頁面(SPA - single page application)系統(tǒng)。

Vue.js使用文檔及下載Vue.js

Vue.js使用文檔已經(jīng)寫的很完備和詳細了捎迫，通過以下地址可以查看： https://cn.vuejs.org/v2/guide/
vue.js如果當(dāng)成一個庫來使用晃酒，可以通過下面地址下載： https://cn.vuejs.org/v2/guide/installation.html

Vue.js基本概念
首先通過將vue.js作為一個js庫來使用，來學(xué)習(xí)vue的一些基本概念窄绒，我們下載了vue.js后贝次，需要在頁面上通過script標(biāo)簽引入vue.js，開發(fā)中可以使用開發(fā)版本vue.js颗祝，產(chǎn)品上線要換成vue.min.js浊闪。
<script type="text/javascript" src="js/vue.min.js"></script>
Vue實例
每個 Vue 應(yīng)用都是通過實例化一個新的 Vue對象開始的：
window.onload = function(){
var vm = new Vue({
el:'#app',
data:{message:'hello world!'}
});
}
......
<div id="app">{{ message }}</div>
其中，el屬性對應(yīng)一個標(biāo)簽螺戳，當(dāng)vue對象創(chuàng)建后搁宾，這個標(biāo)簽內(nèi)的區(qū)域就被vue對象接管，在這個區(qū)域內(nèi)就可以使用vue對象中定義的屬性和方法倔幼。
數(shù)據(jù)與方法
當(dāng)一個 Vue 實例被創(chuàng)建時盖腿，它向 Vue 的響應(yīng)式系統(tǒng)中加入了其data對象中能找到的所有的屬性。當(dāng)這些屬性的值發(fā)生改變時，視圖將會產(chǎn)生“響應(yīng)”翩腐，即匹配更新為新的值鸟款。還可以在Vue實例中定義方法，通過方法來改變實例中data對象中的數(shù)據(jù)茂卦，數(shù)據(jù)改變了何什，視圖中的數(shù)據(jù)也改變。
window.onload = function(){
var vm = new Vue({
el:'#app',
data:{message:'hello world!'},
methods:{
fnChangeMsg:function(){
this.message = 'hello Vue.js!';
}
}
});
}
......
<div id="app">
<p>{{ message }}</p>
<button @click="fnChangeMsg">改變數(shù)據(jù)和視圖</button>
</div>

Vue.js模板語法
模板語法指的是如何將數(shù)據(jù)放入html中等龙，Vue.js使用了基于 HTML的模板語法处渣，允許開發(fā)者聲明式地將DOM綁定至底層 Vue 實例的數(shù)據(jù)。所有 Vue.js的模板都是合法的 HTML 蛛砰，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析罐栈。

插入值
數(shù)據(jù)綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值：
<span>Message: {{ msg }}</span>
如果是標(biāo)簽的屬性要使用值，就不能使用“Mustache”語法泥畅，需要寫成使用v-bind指令：
<a v-bind:href="url" v-bind:title='tip'>百度網(wǎng)</a>
插入的值當(dāng)中還可以寫表達式：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a v-bind:href="url">鏈接文字</a>
指令
指令 (Directives) 是帶有“v-”前綴的特殊屬性荠诬。指令屬性的值預(yù)期是單個JavaScript表達式，指令的職責(zé)是位仁，當(dāng)表達式的值改變時柑贞，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于DOM聂抢。常見的指令有v-bind凌外、v-if、v-on涛浙。

<p v-if="ok">是否顯示這一段</p>

<button v-on:click="fnChangeMsg">按鈕</button>
縮寫
v-bind和v-on事件這兩個指令會經(jīng)常用，所以有簡寫方式：

<a v-bind:href="url">...</a>

<a :href="url">...</a>

<button v-on:click="fnChangeMsg">按鈕</button>

<button @click="fnChangeMsg">按鈕</button>

Class 與 Style 綁定
使用v-bind指令來設(shè)置元素的class屬性或者sytle屬性摄欲，它們的屬性值可以是表達式轿亮，vue.js在這一塊做了增強，表達式結(jié)果除了是字符串之外胸墙，還可以是對象或者數(shù)組我注。

Class綁定
對象語法
可以給v-bind:class傳一個對象，以動態(tài)的切換class
<div class="static" v-bind:class="{active:isActive,'text-danger':hasError }"></div>
data屬性值如下：
data: {
isActive: true,
hasError: false
}
最終渲染的效果：
<div class="static active"></div>
也可以給v-bind:class傳一個對象引用
<div v-bind:class="classObject"></div>
data屬性值可以寫成：
data: {
classObject: {
active: true,
'text-danger': false
}
}
數(shù)組語法
可以給v-bind:class傳一個數(shù)組迟隅，以應(yīng)用一個 class 列表
<div v-bind:class="[activeClass, errorClass]"></div>
......
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
最終渲染為：
<div class="active text-danger"></div>
如果你也想根據(jù)條件切換列表中的 class但骨，可以用三元表達式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
不過，當(dāng)有多個條件class時這樣寫有些繁瑣智袭。所以在數(shù)組語法中也可以使用對象語法：
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
style綁定
對象語法
v-bind:style 的對象語法十分直觀——看著非常像 CSS奔缠，但其實是一個JavaScript 對象。CSS 屬性名可以用駝峰式 (camelCase) 來命名：
<div v-bind:style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
data數(shù)據(jù)如下：
data: {
activeColor: 'red',
fontSize: 30
}
也可以給v-bind:style傳一個對象引用
<div v-bind:style="styleObject"></div>
data數(shù)據(jù)如下：
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
數(shù)組語法
v-bind:style 的數(shù)組語法可以將多個樣式對象應(yīng)用到同一個元素上：
<div v-bind:style="[baseStyles, overridingStyles]"></div>

條件渲染
通過條件指令可以控制元素的創(chuàng)建(顯示)或者銷毀(隱藏)吼野，常用的條件指令如下：
v-if
v-if可以控制元素的創(chuàng)建或者銷毀
<h1 v-if="ok">Yes</h1>
v-else
v-else指令來表示 v-if 的“else 塊”校哎，v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會被識別。
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
v-else-if
v-else-if闷哆，顧名思義腰奋，充當(dāng) v-if 的“else-if 塊”，可以連續(xù)使用：
<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>
v-show
另一個用于根據(jù)條件展示元素的選項是 v-show 指令抱怔。用法和v-if大致一樣劣坊，但是它不支持v-else,它和v-if的區(qū)別是，它制作元素樣式的顯示和隱藏屈留，元素一直是存在的：
<h1 v-show="ok">Hello!</h1>

列表渲染
通過v-for指令可以將一組數(shù)據(jù)渲染到頁面中局冰，數(shù)據(jù)可以是數(shù)組或者對象，v-for 指令需要使用 item in items 形式的特殊語法绕沈，items 是源數(shù)據(jù)數(shù)組并且 item 是數(shù)組元素迭代的別名锐想。
遍歷數(shù)組
<ul id="example-1">
<li v-for="item in items">
{{ item}}
</li>
</ul>
vue對象創(chuàng)建如下：
var example1 = new Vue({
el: '#example-1',
data: {
items: ['foo','bar']
}
})
如果想加上索引值，可以加上第二個參數(shù)
<ul id="example-2">
<li v-for="(item, index) in items">
{{ index }} - {{ item.message }}
</li>
</ul>
遍歷對象
也可以用 v-for 通過一個對象的屬性來迭代
<ul id="v-for-object">
<li v-for="value in object">
{{ value }}
</li>
</ul>
如果想加上對象屬性名乍狐，可以加上第二個參數(shù)
<ul id="v-for-object">
<li v-for="(value,key) in object">
{{ key }}-{{ value }}
</li>
</ul>

事件處理
事件綁定方法
可以用 v-on 指令監(jiān)聽 DOM 事件赠摇，并在觸發(fā)時運行一些 JavaScript 代碼，事件的處理浅蚪，簡單的邏輯可以寫在指令中藕帜，復(fù)雜的需要在vue對象的methods屬性中指定處理函數(shù)。
<div id="example-1">

<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
......
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
methods屬性中指定處理函數(shù)：
<div id="example-2">

<button v-on:click="greet">Greet</button>
</div>
......
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 methods 對象中定義方法
methods: {
greet: function () {
// this 在方法里指向當(dāng)前 Vue 實例
alert('Hello ' + this.name + '!')
}
}
})
事件修飾符
實際開發(fā)中惜傲，事件綁定有時候牽涉到阻止事件冒泡以及阻止默認行為洽故，在vue.js可以加上事件修飾符

<a v-on:click.stop="doThis"></a>

<form v-on:submit.prevent="onSubmit"></form>

<a v-on:click.stop.prevent="doThat"></a>

<form v-on:submit.prevent></form>
表單輸入綁定
可以用 v-model 指令在表單 <input> 及 <textarea> 元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會根據(jù)控件類型自動選取正確的方法來更新元素
單行文本框
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
多行文本框
<span>Multiline message is:</span>
<p>{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
復(fù)選框
單個復(fù)選框盗誊，綁定到布爾值：
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
多個復(fù)選框时甚，綁定到同一個數(shù)組：
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>


<span>Checked names: {{ checkedNames }}</span>
</div>
.....
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
單選框
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>


<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>


<span>Picked: {{ picked }}</span>
</div>
......
new Vue({
el: '#example-4',
data: {
picked: ''
}
})
下拉框
<div id="example-5">
<select v-model="selected">
<option disabled value="">請選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
......
new Vue({
el: '...',
data: {
selected:''
}
})

計算屬性和偵聽屬性
計算屬性
模板內(nèi)的表達式非常便利，但是設(shè)計它們的初衷是用于簡單運算的哈踱。在模板中放入太多的邏輯會讓模板過重且難以維護荒适。例如：

<div id="example">
{{ message.split('').reverse().join('') }}
</div>
這個表達式的功能是將message字符串進行反轉(zhuǎn)，這種帶有復(fù)雜邏輯的表達式开镣，我們可以使用計算屬性

<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

......

var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// this 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
})
偵聽屬性
偵聽屬性的作用是偵聽某屬性值的變化刀诬，從而做相應(yīng)的操作，偵聽屬性是一個對象邪财，它的鍵是要監(jiān)聽的對象或者變量陕壹，值一般是函數(shù),當(dāng)你偵聽的元素發(fā)生變化時，需要執(zhí)行的函數(shù)树埠，這個函數(shù)有兩個形參糠馆，第一個是當(dāng)前值，第二個是變化后的值怎憋。
window.onload = function(){
var vm = new Vue({
el:'#app',
data:{
iNum:1
},
watch:{
iNum:function(newval,oldval){
console.log(newval + ' | ' + oldval)
}
},
methods:{
fnAdd:function(){
this.iNum += 1;
}
}
});
}

過濾器
Vue.js允許你自定義過濾器榨惠，可被用于一些常見的文本格式化。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式

{{ prize | RMB }}

<div v-bind:id="rawId | formatId"></div>
過濾器實際上是一個函數(shù)，可以在一個組件的選項中定義組件內(nèi)部過濾器：

filters:{
RMB:function(value){
if(value=='')
{
return;
}
return '￥ '+value;
}
}
或者在創(chuàng)建 Vue 實例之前全局定義過濾器：

Vue.filter('Yuan',function(value){
if(value=='')
{
return;
}
return value+'元';
});
此時過濾器'RMB'只能在定義它的對象接管標(biāo)簽內(nèi)使用赠橙，而'Yuan'可以全局使用

實例生命周期
每個Vue實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如耽装，需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板期揪、將實例掛載到DOM并在數(shù)據(jù)變化時更新 DOM 等掉奄。同時在這個過程中會自動運行一些叫做生命周期鉤子的函數(shù)，我們可以使用這些函數(shù)凤薛，在實例的不同階段加上我們需要的代碼姓建，實現(xiàn)特定的功能。
beforeCreate
在實例初始化之后缤苫，數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配置之前被調(diào)用速兔。
created
在實例創(chuàng)建完成后被立即調(diào)用。在這一步活玲，實例已完成以下的配置：數(shù)據(jù)觀測 (data observer)涣狗，屬性和方法的運算，watch/event 事件回調(diào)舒憾。然而镀钓，掛載階段還沒開始
beforeMount
在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。
mounted
實例掛載到dom之后被調(diào)用镀迂，可以當(dāng)成是vue對象的ready方法來使用丁溅，一般用它來做dom的初始化操作。
beforeUpdate
數(shù)據(jù)發(fā)生變化前調(diào)用
updated
數(shù)據(jù)發(fā)生變化后調(diào)用

數(shù)據(jù)交互

vue.js沒有集成ajax功能探遵，要使用ajax功能窟赏，可以使用vue官方推薦的axios.js庫來做ajax的交互。 axios庫的下載地址：https://github.com/axios/axios/releases

axios完整寫法：

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios請求的寫法也寫成get方式后post方式箱季。

執(zhí)行g(shù)et請求

// 為給定 ID 的 user 創(chuàng)建請求
// then是請求成功時的響應(yīng)饰序，catch是請求失敗時的響應(yīng)
axios.get('/user?ID=12345')
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
// 可選地，上面的請求可以這樣做
axios.get('/user', {
  params: {
    ID: 12345
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

執(zhí)行post請求

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

ES6語法
ES6是JavaScript語言的新版本规哪，它也可以叫做ES2015，之前學(xué)習(xí)的JavaScript屬于ES5塌衰，ES6在它的基礎(chǔ)上增加了一些語法诉稍，ES6是未來JavaScript的趨勢，而且vue組件開發(fā)中會使用很多的ES6的語法最疆，所以掌握這些常用的ES6語法是必須的杯巨。
變量聲明let和const
let和const是新增的聲明變量的開頭的關(guān)鍵字，在這之前努酸，變量聲明是用var關(guān)鍵字服爷，這兩個關(guān)鍵字和var的區(qū)別是，它們聲明的變量沒有預(yù)解析，let和const的區(qū)別是仍源，let聲明的是一般變量心褐，const申明的常量，不可修改笼踩。
alert(iNum01) // 彈出undefined
// alert(iNum02); 報錯逗爹，let關(guān)鍵字定義變量沒有變量預(yù)解析
// alert(iNum03); 報錯，const關(guān)鍵字定義變量沒有變量預(yù)解析
var iNum01 = 6;
// 使用let關(guān)鍵字定義變量
let iNum02 = 12;
// 使用const關(guān)鍵字定義變量
const iNum03 = 24;
alert(iNum01); // 彈出6
alert(iNum02); // 彈出12
alert(iNum03); // 彈出24
iNum01 = 7;
iNum02 = 13;
//iNum03 = 25; // 報錯,const定義的變量不可修改,const定義的變量是常量
alert(iNum01)
alert(iNum02);
alert(iNum03);
箭頭函數(shù)
可以把箭頭函數(shù)理解成匿名函數(shù)的第二種寫法嚎于，箭頭函數(shù)的作用是可以在對象中綁定this掘而，解決了JavaScript中this指定混亂的問題。

// 定義函數(shù)的一般方式
/*
function fnRs(a,b){
var rs = a + b;
alert(rs);
}
fnRs(1,2);
/
// 通過匿名函數(shù)賦值來定義函數(shù)
/
var fnRs = function(a,b){
var rs = a + b;
alert(rs);
}
fnRs(1,2);
*/
// 通過箭頭函數(shù)的寫法定義
var fnRs = (a,b)=>{
var rs = a + b;
alert(rs);
}
// fnRs(1,2);
// 一個參數(shù)可以省略小括號
var fnRs2 = a =>{
alert(a);
}
fnRs2('haha!');
// 箭頭函數(shù)的作用于购，可以綁定對象中的this
var person = {
name:'tom',
age:18,
showName:function(){
setTimeout(()=>{
alert(this.name);
},1000)
}
}
person.showName();
模塊導(dǎo)入import和導(dǎo)出export
javascript之前是沒有模塊的功能的袍睡，之前做js模塊化開發(fā)，是用的一些js庫來模擬實現(xiàn)的肋僧，在ES6中加入了模塊的功能斑胜，和python語言一樣，python中一個文件就是一個模塊色瘩，ES6中伪窖，一個js文件就是一個模塊，不同的是居兆，js文件中需要先導(dǎo)出(export)后覆山，才能被其他js文件導(dǎo)入(import)
// model.js文件中導(dǎo)出
var person = {name:'tom',age:18}
export default {person}

// index.js文件夾中導(dǎo)入
import person from 'js/model.js'
// index.js中使用模塊
person.name
person.age
/*
上面導(dǎo)出時使用了default關(guān)鍵字，如果不使用這個關(guān)鍵字泥栖，導(dǎo)入時需要加大括號：
import {person} from 'js/model.js'
/
目前ES6的模塊功能需要在服務(wù)器環(huán)境下才可以運行簇宽。
對象的簡寫
javascript對象在ES6中可以做一些簡寫形式，了解這些簡寫形式吧享，才能方便我們讀懂一些在javascript代碼中簡寫的對象魏割。
let name = '李思';
let age = 18;
/
var person = {
name:name,
age:age,
showname:function(){
alert(this.name);
},
showage:function(){
alert(this.age);
}
}
*/
// 簡寫成下面的形式
var person = {
name,
age,
showname(){
alert(this.name);
},
showage(){
alert(this.age);
}
}
person.showname();
person.showage();