Vue2.x 文档笔记-2

计算属性和侦听器

计算属性

计算属性在Vue实例的computed里边进行声明，如：

var vm = new Vue({
  ...
  computed: {
    reversedMsg: function () {
      return this.message.split('').reverse().join()
    }
  },
  ...
})

在上面reversedMsg属性后面写的函数其实就是reversedMsg属性的getter方法。

和直接写方法不一样，计算属性是基于它们的响应式依赖进行缓存的，也就是说，如果原来的值不发生改变（比如上面的message），那么计算属性会立即返回之前的计算结果，而不会重复执行方法。

注意计算属性是基于响应式变量的！像：return Date.now()中的Date.now()不是响应式依赖，计算属性不会更新！

我们也可以手动为计算属性添加一个setter方法：

computed: {
  reversedMsg: {
    get: function () {
        ...
    },
    set: function () {
        ...
    }
  }
}

侦听器

侦听器就是会监控一个变量（数据）的变化然后执行回调函数的东西。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

列表渲染

v-for

就当成是Vue提供的一个foreach语句吧，可以用它来基于一个数组来渲染一个列表，比如我们向后端发送请求，后端返回给我们数据库里的数据，我们要把这些数据渲染到表格或者列表上，就可以使用v-for指令，当然了，如果返回的是对象列表（数组），取出来的是一个对象，那我们也可以访问这个对象的拥有的属性：

<li v-for="item in items"> {{ item.value }} </li>

v-for还支持一个可选的第二个参数，即当前项的索引（这里顺序和python相反，注意区分）：

<li v-for="item, index in items"> {{ index }}：{{ item.value }} </li>

维护状态

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

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

总结一下：除非真的很卡（性能很差），不然就乖乖给每个v-for写:key，以避免莫名其妙的bug。

显示过滤/排序后的结果

如果想将数组里的数据进行过滤或者排序，就对原数组使用filter方法，这个方法会返回一个新数组。当然了，为了保持响应式，可以创建一个计算属性，来返回过滤或排序后的数组，而且这样做不会改变原数组：

但是在嵌套循环v-for中，计算属性就不适用了（毕竟我们没办法为数组中的数组来创建一个计算属性），所以在嵌套循环中，直接使用方法即可。（这也说明了方法和计算属性就是互通的，前者泛用广，后者性能高）：

```

## 事件处理

### v-on

`v-on`指令用于监听DOM事件，如果监听的事件被触发，那么将执行用于处理这个事件的代码。这些代码可以是表达式，也可以是一个事件处理方法。

```html
<button @click="cnt += 1"/>

事件处理方法

如果代码过多的话，就考虑用方法来对事件进行响应。对此，v-on可以接受一个需要调用的方法名称（@是v-on:的缩写！）：

<button @click="greet">Greet</button>

...
methods: {
  greet: function (event) {
    ...
  }
}

事件修饰符

Vue.js为v-on提供了一些特殊的事件修饰符，可以方便我们快速实现一些逻辑，比如阻止事件传播、让提交事件不再重载页面和点击事件只触发一次等等：

<button @click.once="doThis"></a>

按键修饰符

Vue允许为v-on监听键盘事件时添加按键修饰符：

<input v-on:keyup.enter="submit">

系统修饰符

这些修饰符则是用来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。详细参考官方文档。

组件基础

其实就像安卓的那些小组件，需要时可以把这些小组件拖到桌面用，而Vue的组件也是如此，如果我们的界面需要某一个组件，那么可以直接引入这个组件，而且可以在同一个界面创建多个同一组件的实例，实例之间的数据互不影响。

组件是可以复用的Vue实例

组件注册

我们可以通过Vue.component('component-name', { ... })来全局注册一个组件。

data必须是一个函数

一个组件的 data 选项必须是一个函数，这样每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

通过Prop向子组件传递数据

当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个property。我们可以用一个 props 选项将我们需要传递的数据名包含在该组件可接受的prop列表中，并且我们可以像访问data中的值一样访问props中的prop，比如：

Vue.component('blog-test', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

要把数据作为一个自定义attribute传递进来，直接在组件标签中为对应的prop赋值即可：

<blog-test title="My First Blog"></blog-test>

我们还可以使用v-bind来动态传递prop：

<blog-test v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"></blog-test>

单个根元素

组件中只能拥有一个根元素，所以如果组件的模板中有多个html标签，我们就需要将这些标签用一个父元素包裹起来，比如<div>标签：

<div class="blog-post">
  <h3>{{ title }}</h3>
  <div v-html="content"></div>
</div>

监听子组件事件

子组件可以使用$emit来发射（直译的，你也可以理解为广播一个事件、抛出一个事件等等）一个事件，比如：

<button v-on:click="$emit('component-button-click')">Click here</button>

然后在父组件中，同样地用v-on指令来监听子组件实例地任意事件：

<blog-test v-on:component-button-click="doSomething"></blog-test>

有时候不止需要触发事件，还需要抛出一些值，这时可以使用$emit的第二个参数来提供这个值：

<button v-on:click="$emit('component-button-click', 0.1)">Click here</button>

然后当父级组件监听这个事件的时候，我们可以通过$event访问到被抛出的这个值：

<blog-test v-on:component-button-click="count += $event"></blog-test>

又或是成为作为第一个参数传入事件处理方法：

methods: {
  doSomething: function (value) {
    this.count += value
  }
}

我们还可以在组件上使用v-model，不过这部分稍微有点复杂，涉及到v-model会被解释成什么样子（会被解释成v-bind和v-on ），所以建议看官方文档。

通过插槽分发内容

如果我们要向组件里面插入额外的html标签，那就需要给组件添加一个插槽，如：

<blog-test v-on:component-button-click="doSomething">
	<h1>
        Hello!
    </h1>
</blog-test>

如果要使组件能够正常工作，那么在组件的模板中，应该加入<slot>标签：

Vue.component('blog-test', {
  ...
  template: `
    <div>
      <slot></slot>
    </div>
  `
  ...
})

---

希望本文章能够帮到您~