vue基础知识点整理

（1） v-for 迭代对象

v-for 可以通过一个对象的属性来迭代数据

 <li v-for="value in object">
    {{ value }}
  </li>

 v-for 可以提供多个索引参数：index代表0.1.2.3；key：代表键；value：代表值。另外v-for="n in 10"可以用来循环整数。

迭代属性输出的之前，v-for会对属性进行升序排序。

迭代默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，、需要提供一个 key 的特殊属性：

<div v-for="item in items" :key="item.id">  {{ item.text }}</div>

<li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
</li>

（2）计算属性

计算属性关键词: computed，处理一些复杂逻辑时是很有用的。

computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
}

 vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性也可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性

 computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})

（3）watch--监听属性

监听vm中的一个数值，当改数值改变时，其他数据随着修改。基础用法：

 watch : {//此写法首次不执行，数据变化才执行
        kilometers:function(val) {
            this.kilometers = val;
            this.meters = this.kilometers * 1000
        },
        meters : function (val) {
            this.kilometers = val/ 1000;
            this.meters = val;
        }
}

immediate和handler

这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值得时候也执行函数，则就需要用到immediate属性。

比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来得默认值时，也需要执行函数，此时就需要将immediate设为true.

immediate表示在watch中首次绑定得时候，是否执行handler,值为true则表示在watch中声明时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler.

 watch: {
    cityName: {
    　　handler(newName, oldName) {
      　　// ...
    　　},
        deep: true,
    　　immediate: true
}

deep用法

deep用于对对象深度监听。可以监测到cityName.name等类似属性。当对象属性较多时，每个属性值的变化都会执行handler。如果只需要监听一个，可以修改如下：

（

watch中不要使用箭头函数，即不应该使用箭头函数来定义 watcher 函数 , 因为箭头函数中的this是指向当前作用域。

对于箭头函数来说，箭头函数中的 this 指向的是定义时的对象而不是函数运行时所在的对象，即全局定义时的windows对象。

）

watch: {
    'cityName.name': {
      handler(newName, oldName) {
      // ...
      },
      deep: true,
      immediate: true
    }
  }

（4）事件处理器

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

按键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">