Vue2.x 寫法示例

Hello World

模板：

<div id="app"> {{ message }} <button @click="clickMe()">點我</button> </div> 

Vue 實例：

new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { clickMe: function(){ console.log('我被點擊拉~') } } }) 

指令

循環

循環數組

<ul> <li v-for="item in items">{{ item.message }}</li> <!-- 獲取當前數組下標 --> <li v-for="(item, index) in items"> 第{{ index }}條:{{ item.message }}</li> <!-- 經過加key ，讓 Vue 能跟蹤節點的身份，從而提升性能。key 的值是在數組中是不能重複的。 --> <li v-for="item in items" :key="item.id"> {{ item.message }}</li> </ul> 

items 的結構相似這樣

[{
  id: 1,
  message: 'foo' }, { id: 2, message: 'bar' }] 

循環對象

<li v-for="(value, key) in obj">key is {{key}}, value is {{value}}</li> 

循環數字

<!-- n 從 1 開始 --> <span v-for="n in 10">{{ n }} </span> 

條件

<!-- 若是ok爲false, 不輸出在 HTML 中 --> <div v-if="ok">Yes</div> <div v-else>No</div> <!-- 若是ok爲false,只是 display:none 而已 --> <h1 v-show="ok">Hello!</h1> 

事件綁定

<button v-on:click="say('hi')">點擊</button> <!-- 簡寫 --> <button @click="say('hi')">點擊</button> <!-- 傳入 event 對象 --> <button @click="say('hi', $event)">點擊</button> <!-- 阻止單擊事件冒泡 --> <button @click.stop="doSth">點擊</button> <!-- 阻止默認行爲 --> <button @submit.prevent="doSth">點擊</button> <!-- 只當事件在該元素自己（而不是子元素）觸發時觸發回調 --> <div @click.self="doThat">...</div> <!-- 修飾符能夠串聯 --> <a @click.stop.prevent="doThat"></a> <!-- 按鍵修飾符：回車時纔會執行 --> <input @keyup.13="submit"><!-- 13 爲 keycode --> <input @keyup.enter="submit"> <!-- 支持的按鈕有 enter, tab, delete, space, up, down, left, right --> 

給組件綁定原生事件，須要加修飾符 .native。如：

<my-component @click.native="doTheThing"></my-component> 

表單的雙向綁定

<input type="text" v-model="message"> <!-- 自定義選中值。若不設置自定義選中值，選中爲表單元素value屬性的值，不選爲空 --> <input type="checkbox" v-model="toggle" :true-value="a" :false-value="b"> 

綁定屬性

<div v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div> <div v-bind:class="classArr"></div> <!-- classArr 是一個數組 --> <!-- 簡寫 --> <div :class="{ 'class-a': isA, 'class-b': isB }"></div> <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> ![](imgSrc) <a :href="baseURL + '/path'"> 

若是屬性值是變量，必須用綁定屬性的寫法。

// wrong ![]({{imgSrc}}) // right ![](imgSrc) 

避免閃爍： v-cloak

[v-cloak] { display: none; } 

<div v-cloak> {{ message }} </div> 

編譯結束後，Vue 會刪除元素上的 cloak 屬性。

輸出 HTML

<div v-html="raw_html"></div> 

注意：只在可信內容上使用 v-html，永不用在用戶提交的內容上，不然會致使XSS攻擊。

計算屬性

<div id="demo">{{fullName}}</div> 

new Vue({ data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } }); 

自定義指令

定義指令：

Vue.directive('my-directive', { bind: function () { // 準備工做 // 例如，添加事件處理器或只須要運行一次的高耗任務 this.el;// 添加指令的元素 this.vm.$get(name)// 得到該指令的上下文 ViewModel this.expression;// 指令的表達式的值 }, update: function (newValue, oldValue) { // 值更新時的工做 // 也會以初始值爲參數調用一次 }, unbind: function () { // 清理工做 // 例如，刪除 bind() 添加的事件監聽器 } }) 

使用指令：

<div v-my-directive="someValue"></div> 

監聽數據變化

new Vue({ data: { firstName: 'Foo' }, watch: { firstName: function (val, oldVal) { } } }); 

過濾器

{{ msg | capitalize }}// 'abc' => 'Abc' 

Vue2 沒有內置的過濾器。

自定義過濾器

定義全局可用的過濾器

Vue.filter('capitalize', function (value) { return value.toUpperCase() }); Vue.filter('wrap', function (value, begin, end) { return begin + value + end; }); 

定義只能在具體組件上用的過濾器

Vue.component('my-comp', {
  filters: {
    capitalize: function(value) {
      return value.toUpperCase()
    }
  }
}
<!-- `this.$options.filters.filter名稱` 能夠獲取到具體的 filter --> 

在模板中調用：

<!-- 不帶參數的 --> <span>{{'abc' | capitalize}}</span> <!-- 帶參數 --> <span v-text="'abc' | wrap('before', 'after')"></span> 

注意，Vue2 的過濾器只能在mustache綁定中使用。若是須要在屬性中實現相同的功能，請使用計算屬性或方法。

生命週期相關的鉤子函數

new Vue({ created: function(){}, mounted : function(){},// 相對與 1 中的 ready beforeDestroy: function(){}, destroyed: function(){} }); 

過渡效果

<transition :name="my-transition"> <!-- ... --> </transition> 

/* 必需 */ .my-transition-transition { transition: all .3s ease; } /* .my-transition-enter 定義進入的開始狀態 */ .my-transition-enter{} /* .my-transition-leave 定義離開的結束狀態 */ .my-transition-leave {} 

組件

定義和調用組件

<my-comp prop="literal string" :prop1="bar" :prop2="666" :prop3="foo"> </my-comp> 

Vue.component('my-comp', { template: 'html strings', props: { prop: String, prop1: { type: Number, required: true }, prop2: { type: Number, default: 88 }, // 對象/數組的默認值應當由一個函數返回 prop3: { type: Object, default: function () { return { msg: 'hello' } } }, // 自定義驗證函數 prop4: { validator: function (value) { return value > 10 } } }, data: functin(){ return { } } } 

父子組件通訊

// 子組件 var child = new Vue.component('child', { events: { 'parent-msg': function (msg) {} } }); // 子組件向父組件傳消息 child.$emit('child-msg', 'I need help!'); // 父組件 var parent = new Vue({ events: { 'child-msg': function (msg) { // 父組件向全部子組件傳消息。 console.log(`收到子組件的信息，值爲 ${msg}`) } } }); 

this.$parent 訪問它的父組件。
this.$root 訪問它的根組件。
this.$children 訪問它的子組件。

能夠經過 ref 來訪問組件。如

<!-- js中經過 vm.$refs.child 來訪問子組件 --> <child-comp ref="child"></child-comp> 

Slot

組件中定義用 slot 來定義插入點，能夠帶 name 來標識 slot。

Vue.component('multi-slot-component', {
  template: `<div> <h2>單個Slot</h2> <slot>默認值</slot> slot1:<slot name="s1">默認值1</slot><br> slot2:<slot name="s2">默認值2</slot> </div>`, data() { return { describe: '我叫小呆' } } }) 

調用組件的地方用 slot 屬性的值來對應插入 slot 的位置。

<multi-slot-component> <strong slot="s1">父組件插槽內容1</strong> <strong slot="s2">父組件插槽內容2</strong> </multi-slot-component> 

Vue 在 V2.1.0 版本後增長了的 Scoped Slots 的特性。該特性支持在子組件的 slot 中用子組件的數據。用法是：子組件在 slot 上定義傳給父組件的數據，父組件經過 scope 屬性來拿子組件數據。如

<!-- 子組件 --> <slot :describe="describe"></slot> <!-- 父組件 --> <child-component > <template scope="childScope"> 子元素傳給父組件的數據：{{childScope.describe}} </template> </child-component> 

詳情見這裏。

小技巧

渲染一個包含多個元素的塊

<template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider"></li> </template> <template v-if="user"> ![](user.avatarUrl) <div class="name">{{user.name}}</div> </template> 

template 用於包含多個元素的塊,最終的渲染結果不會包含 template 元素。

Vue.set 和 Vue.delete

用於解決 不能檢測到屬性添加，屬性刪除的限制。

Vue.nextTick

// 修改數據 vm.msg = 'Hello' // DOM 沒有更新 Vue.nextTick(function () { // DOM 更新了 }) 

Vue 在檢測到數據變化時是異步更新 DOM 的。

做者：九彩拼盤 連接：https://www.jianshu.com/p/a2efd179b9c3 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。