初学vue整理

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 表达式的尾部，由“管道”符指示,过滤器可以串联,过滤器可以接收参数

<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

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

2、绑定 DOM 元素属性

v-bind:title="message"

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

3、指令

v-bind: 缩写:
v-once: 执行一次性地插值，当数据改变时，插值处的内容不会更新
v-html="rawHtml": 输出真正的 HTML。双大括号会将数据解释为纯文本，而非 HTML
v-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
//例如：
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

滑鼠按键修饰符

.left
.right
.middle

4、数组更新检测

变异方法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

非变异方法
filter()
concat()
slice()

Vue 不能检测以下变动的数组：
1、当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
解决方法：

// 方法一、Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// 方法二、Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

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

example1.items.splice(newLength)

5、注册组件

Vue.component('todo-item', {
  template: '<li>{{ todo.text }}</li>',

  // 使用 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
    }
  }
})

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

<ol>
  <!-- 创建一个 todo-item 组件的实例,传递值时用 短横线隔开式命名 -->
  <todo-item v-bind:my-message="item"></todo-item>
</ol>

字面量语法 vs 动态语法

<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>
<!-- 传递实际的 number -->
<comp v-bind:some-prop="1"></comp>

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

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