Vue2.0二——模板语法、计算属性、watch、filter、过渡、directive、keep-alive

一、模板语法

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">
    

二、计算属性 VS 方法

methods ：事件方法

methods : {   //里面的方法只有触发的时候才能改变
    show () {
        console.log(0)
    }
}

computed ：计算属性 差值表达式算新值

computed: {   //相当于ready dom渲染完成就自动执行 
    http () {
        return this.$store.state.http
    }
},

区别：

计算属性 ：
和普通属性一样是在模板中绑定计算属性的，
当data中对应数据发生改变时，计算属性的值也会发生改变。
Methods：
methods是方法，只要调用它，函数就会执行。

相同：两者达到的效果是同样的。
不同：计算属性是基于它们的依赖进行缓存的，
    只有相关依赖会发生改变时才会重新求职。
    只要相关依赖未改变，只会返回之前的结果，不再执行函数。 

三、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
    }
  }
})      

四、过滤器

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'
  }
})

五、动画

在 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;
}

动画具体看官方文档(￣▽￣)~*

六、自定义指令

除了常用的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 之外，其它参数都应该是只读的，切勿进行修改

七、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。

八、可能会遇到的坑

1、注：组件以大写字母开头
2、报错：'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