Vue2.0二——模板語法、計算屬性、watch、filter、過渡、directive、keep-alive

1、模板語法

a.數據綁定：

{{message}} 插值表達式 v-once 之後值不變
v-bind:屬性 v-bind:id="root" => :id="root"
v-html='message'

b.表達式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

c.class

<div v-bind:class="{ active: isActive }"></div>
對象
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
數組
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

d.style內聯

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}
<div v-bind:style="[baseStyles, overridingStyles]"></div>

e.條件渲染

(1)v-if
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>  

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>   

 (2)v-show
 <h1 v-show="ok">Hello!</h1>
 注意，v-show 不支持 <template> 元素，也不支持 v-else。
 兩者區別：
 使用了v-if的時候，若是值爲false，那麼頁面將不會有這個html標籤生成。
 v-show則是無論值爲true仍是false，html元素都會存在，只是CSS中的display顯示或隱藏

f.for遍歷

數組：
<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

能夠用 of 替代 in 做爲分隔符，由於它是最接近 JavaScript 迭代器的語法：

<div v-for="item of items"></div>
對象：
<div v-for="(value, key, index) in object" :key="index">
  {{ index }}. {{ key }}: {{ value }}
</div>
:key="index" 在1.0中 track-by="$index" 最好用id來惟一標識 有利於提升性能

g.事件綁定

v-on:click => @click

h.事件修飾符

例如：阻止默認事件
<div><a href='#' v-on:click="gotourl($event)"></a></div>

gotourl (e) {
    <!--原生寫法-->
    e.preventDefault()
    console.log(e)
}
<div><a href='#' v-on:click.prevent="gotourl"></a></div>
gotourl(){
    console.log(0)
}

.stop 阻止冒泡
.cabture 阻止捕獲 生成新的子節點 不須要再次綁定
.self 冒泡中 只對該元素生效 對子元素不生效
.once 只想用一次 消費類行爲 付款點擊一次就解綁 按鈕變灰

所有鍵盤按鍵 .enter .tab .delete ...

i.按鍵修飾符

<input v-on:keyup.enter="submit">
<input @keyup.enter="submit">
所有的按鍵別名：
    .enter
    .tab
    .delete (捕獲「刪除」和「退格」鍵)
    .esc
    .space
    .up
    .down
    .left
    .right

j.鼠標按鈕修飾符

2.1.0 新增
.left
.right
.middle

k.v-model

<input v-model="message" placeholder="edit me">

2、計算屬性 VS 方法

methods ：事件方法

methods : {   //裏面的方法只有觸發的時候才能改變
    show () {
        console.log(0)
    }
}

computed ：計算屬性 差值表達式算新值

computed: {   //至關於ready dom渲染完成就自動執行 
    http () {
        return this.$store.state.http
    }
},

區別：

計算屬性 ：
和普通屬性同樣是在模板中綁定計算屬性的，
當data中對應數據發生改變時，計算屬性的值也會發生改變。
Methods：
methods是方法，只要調用它，函數就會執行。

相同：二者達到的效果是一樣的。
不一樣：計算屬性是基於它們的依賴進行緩存的，
    只有相關依賴會發生改變時纔會從新求職。
    只要相關依賴未改變，只會返回以前的結果，再也不執行函數。

3、watch

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {        //message 是已經註冊的屬性 有變化就執行
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

4、過濾器

vue2.0裏，再也不有自帶的過濾器，須要本身定義過濾器。
定義：註冊一個自定義過濾器，它接收兩個參數：過濾器 ID 和過濾器函數
1.0中

<div id="app">
    {{abc|uppercase}}
 </div>
 <script>
    new Vue({
        el:'#app',
        data:{
            abc:"aaa"
        }
    })
 </script>

2.0中

<div id="app">
    {{abc|uppercase}}
</div>

//過濾器
Vue.filter('uppercase', function(value) {
  if (!value) { return ''}
  value = value.toString()
  return value.toUpperCase()
})

var vm = new Vue({
  el:'#app',
  data: {
    abc: 'aaa'
  }
})

5、動畫

在 CSS 過渡和動畫中自動應用 class
能夠配合使用第三方 CSS 動畫庫，如 Animate.css
在過渡鉤子函數中使用 JavaScript 直接操做 DOM
能夠配合使用第三方 JavaScript 動畫庫，如 Velocity.js

<transition name="fade">
    <p v-if="show">hello</p>
</transition>

.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

動畫具體看官方文檔(￣▽￣)~*

6、自定義指令

除了經常使用的v-model 等還能夠進行自定義指令來綁定數據
栗子：移動端滾動事件

<div v-fixtop="{toggleHeader:toggleHeader}" class="main">

methods: {
    toggleHeader(flag){
        this.isHeaderShow=flag
    }
 }

定義：v_scroll_fix.js

import Vue from 'vue'

Vue.directive('fixtop',{
    bind: function (el, binding, vnode) {
        el.addEventListener('scroll',function () {
            if(this.scrollTop>30){
                binding.value.toggleHeader(true)
            }else{
                binding.value.toggleHeader(false)
            }
        })
    }
})

鉤子函數：

bind：只調用一次，指令第一次綁定到元素時調用。在這裏能夠進行一次性的初始化設置。
inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不必定已被插入文檔中)。
update：所在組件的 VNode 更新時調用，可是可能發生在其子 VNode 更新以前。指令的值可能發生了改變，也可能沒有。可是你能夠經過比較更新先後的值來忽略沒必要要的模板更新 (詳細的鉤子函數參數見下)。
componentUpdated：指令所在組件的 VNode 及其子 VNode 所有更新後調用。
unbind：只調用一次，指令與元素解綁時調用。

參數：

el：指令所綁定的元素，能夠用來直接操做 DOM 。
binding：一個對象，包含如下屬性：
    name：指令名，不包括 v- 前綴。
    value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值爲 2。
    oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。不管值是否改變均可用。
    expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式爲 "1 + 1"。
    arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數爲 "foo"。
    modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象爲 { foo: true, bar: true }。
vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。
oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。
除了 el 以外，其它參數都應該是隻讀的，切勿進行修改

7、keep-alive

<keep-alive>是Vue的內置組件，能在組件切換過程當中將狀態保留在內存中，防止重複渲染DOM。
<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷燬它們。是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出如今父組件鏈中。 
keep-alive生命週期鉤子函數：activated、deactivated
使用<keep-alive>會將數據保留在內存中，若是要在每次進入頁面的時候獲取最新的數據，須要在activated階段獲取數據，承擔原來created鉤子中獲取數據的任務。   
當引入keep-alive的時候，頁面第一次進入，鉤子的觸發順序created-> mounted-> activated，
在activated中會保留一份一份數據，再次進入就不在從新解析而是讀取內存中的數據
退出時觸發deactivated。當再次進入（前進或者後退）時，只觸發activated。

8、可能會遇到的坑

一、注：組件以大寫字母開頭
二、報錯：'template or render is not a function' 
   說明一些依賴庫的更新或者安裝新的依賴庫以後
   vue和vue-template-compiler版本不對,或者編譯引用用不對
   解決：
   同一版本
    1 "vue": "2.3.3",
    2 "vue-template-compiler": "2.4.4",
    
    不行的話就更改vue-loader的版本降到12.2.1
    cnpm i vue-loader@12