Vue2.0——基础03

其他知识点

计算属性computed

用与计算值

computed的两种使用方式

<div id="demo">{{ fullName }}</div>

1.不写getter

默认会当作getter处理

var vm = new Vue({
  el: '#example',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  computed: {
    // 计算属性的 getter
    fullName : function () {
      // `this` 指向 vm 实例
      return this.firstName + ' ' + this.lastName
    }
  }
})

2.明确getter

将getter明确出来，也可以加上setter

var vm = new Vue({
  el: '#example',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage:  {
      // getter
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
})

<template> 元素

使用v-if的时候可用，此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

<template v-if="isOK">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>
<!-- 当isOK是true的时候，生成html代码中不会有template-->
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
<!--当isOK是false的时候,所有的都不会生成 -->

key管理元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
但是有时需要重新渲染，可以使用:key来表达“这两个元素是完全独立的，不要复用它们”

v-show

隐藏元素

v-if和v-for不能一起使用

可以通过其他方式来实现想要实现的代码

is命令

这个组件其实是这个组件
li组件其实是todo-item组件

 <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>

因为在 <ul> 元素内只有 <li> 元素会被看作有效内容。这样做实现的效果与 <todo-item> 相同，但是可以避开一些潜在的浏览器解析错误