最細(xì)致的vue.js基礎(chǔ)語(yǔ)法值得收藏!

更新時(shí)間：2016年11月03日 10:56:04 作者：chenhao_ch

這篇文章主要為大家推薦了一篇值得收藏和學(xué)習(xí)的vue.js最細(xì)致的基礎(chǔ)語(yǔ)法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

介紹

前段時(shí)間接觸到一個(gè)庫(kù)叫做Vue.js, 個(gè)人感覺(jué)很棒，所以整理了一篇博文做個(gè)介紹。

Vue讀音/vju:/,和view類似。是一個(gè)數(shù)據(jù)驅(qū)動(dòng)的web界面庫(kù)。Vue.js只聚焦于視圖層，可以很容易的和其他庫(kù)整合。代碼壓縮后只有24kb。

可以去這里下載。自己整理了一個(gè)Vue.js的demo， https://github.com/chenhao-ch/demo-vue

快速入門
以下代碼是Vue.js最簡(jiǎn)單的例子，當(dāng)input中的內(nèi)容變化時(shí)，p節(jié)點(diǎn)的內(nèi)容會(huì)跟著變化。

<!-- html -->
<div id="demo">
 <p>{{message}}</p>
 <input v-model="message">
</div>
new Vue({
 el: '#demo',
 data: {
  message: 'Hello Vue.js!'
 }
})

語(yǔ)法介紹

數(shù)據(jù)綁定
數(shù)據(jù)綁定就是指將js中的變量自動(dòng)更新到html中。如下代碼, message的默認(rèn)值是“Hello Vue.js!”, 那么當(dāng)頁(yè)面啟動(dòng)時(shí)，html中的默認(rèn)值會(huì)被設(shè)置成“Hello Vue.js”

<!-- html -->
<div id="demo">
 <p>{{message}}</p>
 <input v-model="message">
</div>
new Vue({
 el: '#demo',
 data: {
  message: 'Hello Vue.js!'
 }
})

如果要輸出原生的html，可以使用三個(gè)大括號(hào)來(lái)實(shí)現(xiàn)

<p>{{{messageHtml}}}</p>

也可以做表達(dá)式的綁定

<div>{{length - 1}}</div>
<div>{{isShow ? 'block' : 'none'}}</div>

過(guò)濾器
表達(dá)式后面可以添加過(guò)濾器，對(duì)輸出的數(shù)據(jù)進(jìn)行過(guò)濾。

<div>{{ message | capitalize }}</div>

自定義過(guò)濾器
Vue.js運(yùn)行自己定義過(guò)濾器。比如:

Vue.filter('wrap', function (value, begin, end) {
 return begin + value + end;
})
<!-- 'vue' => 'before vue after' -->
<span>{{ message | wrap 'before' 'after' }}</span>

指令

指令是特殊的帶有前綴v-的特性。當(dāng)表達(dá)式的值發(fā)生變化時(shí)，響應(yīng)應(yīng)用特定的行為到DOM。

<!-- 當(dāng)greeting為true時(shí)，才顯示p節(jié)點(diǎn) -->
<p v-if="greeting">hello</p>
<!-- 綁定href屬性為js中url的值 -->
<a v-bind:href="url"></a>
<!-- 綁定事件，btnClick是js方法 -->
<button v-on:click="btnClick"></button>

bind,on指令可以進(jìn)行縮寫

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

<button v-on:click="btnClick"></button>
<button @click="btnClick"></button>

自定義指令

Vue.directive('demo', {
 bind: function () {
  // 準(zhǔn)備工作
  // 例如，添加事件處理器或只需要運(yùn)行一次的高耗任務(wù)
 },
 update: function (newValue, oldValue) {
  // 值更新時(shí)的工作
  // 也會(huì)以初始值為參數(shù)調(diào)用一次
 },
 unbind: function () {
  // 清理工作
  // 例如，刪除 bind() 添加的事件監(jiān)聽(tīng)器
 }
})

html模板

Vue.js支持對(duì)js對(duì)象進(jìn)行判斷(if), 循環(huán)(for)輸出。類似于前端模板。

<!-- 判斷，如果ok為true,則顯示yes, 如果為false, 顯示no -->
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

<!-- 類似于v-if, v-if是是否加節(jié)點(diǎn)， v-show是display是否為none -->
<h1 v-show="ok">Hello!</h1>

<!-- 循環(huán)， 對(duì)items屬性進(jìn)行循環(huán)。 track-by指item的是否重復(fù)，對(duì)重復(fù)的進(jìn)行服用 -->
<!-- 循環(huán)中， $index表示數(shù)組第n個(gè)元素; $key表示對(duì)象的key -->
<ul id="example-1">
 <li v-for="item in items" track-by="_uid">
  {{ $index }} : {{ item.message }}
 </li>
</ul>
var example1 = new Vue({
 el: '#example-1',
 data: {
  items: [
   {_uid: '1', message: 'Foo' },
   {_uid: '2', message: 'Bar' }
  ]
 }
})

樣式綁定

樣式也可以根據(jù)js中的變量來(lái)動(dòng)態(tài)確定。

<!-- isA 為true時(shí)， class多一個(gè)class-a -->
<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
<!-- classA, classB 兩個(gè)變量的值設(shè)置成class -->
<div v-bind:class="[classA, classB]">

<!-- 綁定style, 自動(dòng)添加前綴，styleObject里面是style鍵值對(duì) -->
<div v-bind:style="styleObject"></div>

事件綁定

可以使用v-on指令來(lái)監(jiān)聽(tīng)DOM事件。

<div id="example-2">
 <button v-on:click="say('hi', $event)">Say Hi</button>
 <button v-on:click="say('what', $event)">Say What</button>
</div>
new Vue({
 el: '#example-2',
 methods: {
  say: function (msg, event) {
   alert(msg);
   event.preventDefault();
  }
 }
})

常見(jiàn)的阻止冒泡，禁止默認(rèn)行為等event方法可以通過(guò)修飾符來(lái)快速處理。

<!-- 禁止冒泡 -->
<a v-on:click.stop='do'></a>
<!-- 禁止冒泡和默認(rèn)行為 -->
<a @click.stop.prevent="do"></a>

對(duì)特殊按鍵生效也可以使用修飾符

<!-- keyCode是13的時(shí)候出發(fā)。 -->
<input v-on:keyup.13="submit" />
<input v-on:keyup.enter="submit" />
<!-- 支持的鍵名有： enter,tab,delete,esc,space,up,down,left,right -->

組件
組件系統(tǒng)是 Vue.js 另一個(gè)重要概念，因?yàn)樗峁┝艘环N抽象，讓我們可以用獨(dú)立可復(fù)用的小組件來(lái)構(gòu)建大型應(yīng)用。

注冊(cè)
通過(guò)Vue.extend()來(lái)定義一個(gè)組件，Vue.component()來(lái)注冊(cè)組件。

<div id="box">
 <tree></tree>
</div>
// 定義
var Tree = Vue.extend({
 template: '<div>This is a tree!</div>'
});
// 注冊(cè)
Vue.component('tree', Tree);
// 開(kāi)始渲染
new Vue({
 el: '#box'
});

// 定義，注冊(cè)可以合并成一步。下面的代碼和上面一樣
Vue.component('tree', {
 template: '<div>This is a tree!</div>'
});
new Vue({
 el: '#box'
});

渲染結(jié)果為：

<div id="box">
 <div>This is a tree!</div>
</div>

還可以進(jìn)行局部注冊(cè)

var Child = Vue.extend({ /* ... */ })

var Parent = Vue.extend({
 template: '...',
 components: {
  'my-component': Child
 }
})

props
props用于父組件向子組件傳遞數(shù)據(jù)。

Vue.component('child', {
 props: ['childMsg'],
 // prop 可以用在模板內(nèi)
 // 可以用 `this.msg` 設(shè)置
 template: '<span>{{ childMsg }}</span>'
});
<child child-msg="hello"></child>

動(dòng)態(tài)props，當(dāng)父組件的數(shù)據(jù)變化時(shí)，需要通知子組件跟著變化。

<input v-model="parentMsg" />
<child v-bind:child-msg="parentMsg"></child>

父子組件通信

當(dāng)父組件數(shù)據(jù)變化時(shí)，可以通過(guò)props來(lái)通知子組件，子組件狀態(tài)變化時(shí)，可以利用事件的冒泡來(lái)通知父組件。

子組件可以用this.$parent訪問(wèn)它的父組件。父組件有一個(gè)數(shù)組this.$children，包含它所有的子元素。

例子：

<!-- 子組件模板 -->
<template id="child-template">
 <input v-model="msg">
 <button v-on:click="notify">Dispatch Event</button>
</template>

<!-- 父組件模板 -->
<div id="events-example">
 <p>Messages: {{ messages | json }}</p>
 <child></child>
</div>
// 注冊(cè)子組件
// 將當(dāng)前消息派發(fā)出去
Vue.component('child', {
 template: '#child-template',
 data: function () {
  return { msg: 'hello' }
 },
 methods: {
  notify: function () {
   if (this.msg.trim()) {
    this.$dispatch('child-msg', this.msg) // 觸發(fā)child-msg事件
    this.msg = ''
   }
  }
 }
})

// 啟動(dòng)父組件
// 將收到消息時(shí)將事件推入一個(gè)數(shù)組
var parent = new Vue({
 el: '#events-example',
 data: {
  messages: []
 },
 // 在創(chuàng)建實(shí)例時(shí) `events` 選項(xiàng)簡(jiǎn)單地調(diào)用 `$on`
 events: {
  'child-msg': function (msg) { // 監(jiān)聽(tīng)到 child-msg事件
   // 事件回調(diào)內(nèi)的 `this` 自動(dòng)綁定到注冊(cè)它的實(shí)例上
   this.messages.push(msg) // messages改變自動(dòng)修改html內(nèi)容
  }
 }
})

上面這種寫法child-msg事件觸發(fā)后，的執(zhí)行方法不直觀。所以可以采用v-on綁定事件。

<!-- 當(dāng)child-msg觸發(fā)時(shí)， 執(zhí)行父組件的handleIt方法。 -->
<child v-on:child-msg="handleIt"></child>

構(gòu)建大型應(yīng)用

在典型的 Vue.js 項(xiàng)目中，我們會(huì)把界面拆分為多個(gè)小組件，每個(gè)組件在同一地方封裝它的 CSS 樣式，模板和 JavaScript 定義，這么做比較好。如上所述，使用 Webpack 或 Browserify 以及合適的源碼轉(zhuǎn)換器，我們可以這樣寫組件：