Vue.js學習筆記

資料繫結語法

插值

文字插值： {{ mas }}
單次插值： {{ * msg }}

html插值： {{{ html }}}

繫結表示式

單個表示式：{{ message.split(”).reverse().join(”) }}

串聯過濾器： {{ message | filterA | filterB }} message先進入過濾器A，出來進入過濾器B，然後再顯示

帶引數的過濾器 ：{{ message | filterA ‘arg1’ arg2 }} 過濾器A的第一個引數是message，第二個是arg1這個字串，第三個是arg2的值

指令

v-if
v-bind 縮寫為空
v-on 縮寫為@

計算屬性

computed: {
// 一個計算屬性的 getter
b: function () {
// this 指向 vm 例項
return this.a + 1
}

vm.$watch

Class與Style繫結

使用v-bind 繫結class和style，當需要廠商字首的時候vue.js還會自動新增。
多種情況繫結不同的class時，可以使用物件的方式：

:class="{ 'subitem': row.move == 0, 'subsubitem': row.move == 1,'subsubsubitem': row.move == 2 }"

另外其他html屬性的繫結都要使用v-bind

條件渲染

單個元素使用v-if=”“

多個元素使用<template> 元素包起來，並在其上使用v-if

另外還有v-show。它跟v-if的區別在於：1.v-show不支援template；2.v-show是始終在dom中，改變display屬性，而v-if是插入和刪除元素。

可以用 v-else 指令給 v-if 新增一個 “else 塊”
v-else 元素必須立即跟在 v-if元素的後面——否則它不能被識別。
2.0之後v-else只能跟v-if配合使用，跟v-show配合會報錯。

一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在執行時條件不大可能改變 v-if 較好。

列表渲染

v-for= ‘item in items’
v-for= ‘(index, item) in items’
從 1.0.17 開始可以使用 of 分隔符，更接近 JavaScript 遍歷器語法

$index

方法與事件處理器

v-on 監聽DOM事件

 // 在 `methods` 物件中定義方法
  methods: {
    greet: function (event) {
      // 方法內 `this` 指向 vm
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      alert(event.target.tagName)
    }
  }

也可以內聯js語句，但是隻能一句。

事件修飾符

v-on後邊可以跟很多種事件修飾符，例如：.stop .prevent .capture .self .keyup

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再過載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat">

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

表單控制元件繫結

可以使用v-model指令在表單控制元件元素上建立雙向資料繫結。繫結後會根據表單控制元件中內容的改變而自動更新元素。

引數特性：lazy number debounce

過渡

通過 Vue.js 的過渡系統，可以在元素從 DOM 中插入或移除時自動應用過渡效果。Vue.js 會在適當的時機為你觸發 CSS 過渡或動畫，你也可以提供相應的 JavaScript 鉤子函式在過渡過程中執行自定義的 DOM 操作。

為了應用過渡效果，要在目標元素上使用transition 特性：該特性要與v-if v-show v-for（只在插入和刪除時觸發，使用 vue-animated-list 外掛）一起使用

<div v-if="show" transition="my-transition"></div>

元件

元件（Component）是 Vue.js 最強大的功能之一。元件可以擴充套件 HTML 元素，封裝可重用的程式碼。在較高層面上，元件是自定義元素，Vue.js 的編譯器為它新增特殊功能。在有些情況下，元件也可以是原生 HTML 元素的形式，以 is 特性擴充套件。

使用元件

註冊：
使用Vue.extend()建立一個元件構造器：

//定義
var MyComponent = Vue.extend({ 
     template: '<div>A custom component!</div>'
 })

要把這個構造器用作元件，需要用 Vue.component(tag, constructor) 註冊 ：

// 全域性註冊元件，tag 為 my-component
Vue.component('my-component', MyComponent)
// 建立根例項
new Vue({ 
     el: '#example'
 })

最後將：

<div id="example">  
    <my-component></my-component>
</div>
//渲染為
<div id="example">  
    <div>A custom component!</div>
</div>

注意元件的模板替換了自定義元素，自定義元素的作用只是作為一個掛載點。可以用例項選項 replace 決定是否替換。

區域性註冊：將一個元件只定義在父元件裡邊

註冊語法糖
為了讓事件更簡單，可以直接傳入選項物件而不是構造器給 Vue.component() 和 component 選項。Vue.js 在背後自動呼叫 Vue.extend()：

// 在一個步驟中擴充套件與註冊
Vue.component('my-component', {  
    template: '<div>A custom component!</div>'
})
// 區域性註冊也可以這麼做
var Parent = Vue.extend({  
    components: {    
        'my-component': {      
            template: '<div>A custom component!</div>'    
        }  
    }
})