一、模板语法

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

c.class

    
对象
    
数组
    
data: {  activeClass: 'active',  errorClass: 'text-danger'}

d.style内联

    
data: {  activeColor: 'red',  fontSize: 30}
    

e.条件渲染

(1)v-if
Yes
No
  
        (2)v-show 
Hello!
 注意，v-show 不支持 
    

f.for遍历

数组：
    
  
     
    {
   { parentMessage }} - {
   { index }} - {
   { item.message }}  
    

可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：

    
对象：
    
       {
   { index }}. {
   { key }}: {
   { value }}
    
:key="index" 在1.0中 track-by="$index" 最好用id来唯一标识 有利于提高性能

g.事件绑定

v-on:click => @click

h.事件修饰符

例如：阻止默认事件
    
     
    
gotourl (e) {    
        e.preventDefault()    console.log(e)}
    
     
    
gotourl(){    console.log(0)}.stop 阻止冒泡.cabture 阻止捕获 生成新的子节点 不需要再次绑定.self 冒泡中 只对该元素生效 对子元素不生效.once 只想用一次 消费类行为 付款点击一次就解绑 按钮变灰全部键盘按键 .enter .tab .delete ...

i.按键修饰符

全部的按键别名：    .enter    .tab    .delete (捕获“删除”和“退格”键)    .esc    .space    .up    .down    .left    .right

j.鼠标按钮修饰符

2.1.0 新增.left.right.middle

k.v-model

二、计算属性 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中

    
         {
   {abc|uppercase}} 
    
 

2.0中

    
         {
   {abc|uppercase}}
    
//过滤器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

        
     
hello
    .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 等还可以进行自定义指令来绑定数据

栗子：移动端滚动事件

    
     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

    
     是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
     
       包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 keep-alive生命周期钩子函数：activated、deactivated使用
      
       会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在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