1、new Vue实例

var app = new Vue({  el: '#app', // 挂载元素  // 数据  data: {    message: 'Hello!'  },  // 方法  methods: {    XXXXXXX: function () {......}  }, // 生命周期钩子//钩子的 this 指向调用它的 Vue 实例//在实例被创建之后被调用  created: function () {    // `this` 指向 vm 实例    console.log('a is: ' + this.a)  },  mounted: function ( ) {},  updated: function ( ) {},  destroyed: function ( ) {},  // 过滤器  filters: {      XXXX: function (value) { return xxxx }    },  // 计算属性  computed:{     XXXX: function ( ) {       // `this` 指向 vm 实例       return xxxx       }  },  // 监测数据变动  // 当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch。  //通常更好的想法是使用 computed 属性而不是命令式的 watch 回调。  //当想要在数据变化响应时，执行异步操作或开销较大的操作，watch很有用  watch:{      [data数据]: function (val)   }})

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示,过滤器可以串联,过滤器可以接收参数

    {
   { message | capitalize }}
    
    

method 和计算属性的区别：计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。如果你不希望有缓存，请用 method 替代。

2、绑定 DOM 元素属性

v-bind:title="message"

将这个元素节点的 title 属性和 Vue 实例的 message 属性保持一致

3、指令

v-bind: 缩写:

v-once: 执行一次性地插值，当数据改变时，插值处的内容不会更新v-html="rawHtml": 输出真正的 HTML。双大括号会将数据解释为纯文本，而非 HTMLv-if: 例v-if="seen"v-else: v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。v-else-if: 类似于 v-else，v-else-if 必须紧跟在 v-if 或者 v-else-if 元素之后。v-show: 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。v-show 不支持 <template> 语法。

如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

v-for

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。当在组件中使用 v-for 时，key 现在是必须的。v-model: 实现表单输入和应用状态之间的双向绑定 <p>{ { message }}</p><input v-model="message">v-on : 缩写@ 例 v-on:click

v-on 事件修饰符

.stop  阻止单击事件冒泡.prevent  例 v-on:submit.prevent="onSubmit" //.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault().capture.native  在某个组件的根元素上监听一个原生事件.self  只当事件在该元素本身（比如不是子元素）触发时触发回调.once   点击事件将只会触发一次修饰符可以串联 v-on:click.stop.prevent使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击。

v-on 键值修饰符

v-on:keyup.13 或  v-on:keyup.enter全部的按键别名：.enter.tab.delete (捕获 “删除” 和 “退格” 键).esc.space.up.down.left.right// 可以使用 v-on:keyup.f1   Vue.config.keyCodes.f1 = 112

v-on 修饰键

.ctrl.alt.shift.meta//例如：
    
    
    
     Do something
    

滑鼠按键修饰符

.left.right.middle

4、数组更新检测

变异方法

push()pop()shift()unshift()splice()sort()reverse()

非变异方法

filter()concat()slice()

Vue 不能检测以下变动的数组：

1、当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue解决方法：

// 方法一、Vue.setVue.set(example1.items, indexOfItem, newValue)// 方法二、Array.prototype.spliceexample1.items.splice(indexOfItem, 1, newValue)

2、当你修改数组的长度时，例如： vm.items.length = newLength

解决方法：

example1.items.splice(newLength)

5、注册组件

Vue.component('todo-item', {  template: '
{
   { todo.text }}
',  // 使用 Prop 传递数据  // 驼峰式命名  props: ['myMessage'],  // Prop 验证,为组件的 props 指定验证规格  //要指定验证规格，需要用对象的形式，而不能用字符串数组,需写成一下格式：  props:{      propA: Number,      propB: [String, Number], // 多种类型,可为：String、Number、Boolean、Function、Object、Array、Symbol      propC: {        type: String,        required: true, // 必传        default: 100 // 默认值      },      // 数组/对象的默认值应当由一个工厂函数返回      propE: {        type: Object,        default: function () {          return { message: 'hello' }        }      },       // 自定义验证函数      propF: {        validator: function (value) {          return value > 10        }      }  }   // data 必须是函数  data: function () {    return {      counter: 0    }  }})

现在你可以用它构建另一个组件模板：

字面量语法 vs 动态语法

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

为什么我们会有修改 prop 中数据的冲动呢？通常是这两种原因：1、prop 作为初始值传入后，子组件想把它当作局部数据来用。正确方式：定义一个局部变量，并用 prop 的值初始化它2、prop 作为初始值传入，由子组件处理成其它数据输出。正确方式：定义一个计算属性，处理 prop 的值并返回

子组件跟父组件通信

在子组件的事件函数中，用 $emit 触发事件，如： this.$emit('increment')，如此，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件，如： <button-counter v-on:increment="incrementTotal"></button-counter>