vue中的知识点总结 vue的v-if，v-else实现不同组件登录，键值分开。响应修改对象属性等。

1：使用username，或者邮箱登录。

Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性, 元素仍然会被高效地复用，因为它们没有添加 key 属性。

2：vue中多个对象，单个对象：

多个对象，每个对象一个大括号，用逗号隔开。

items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]

单个对象，对象的属性和方法之间用逗号隔开。

object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }

3:键值分开
name：键
value：值

  {
    { name }}: {
    { value }}

索引，键，值分开

  {
    { index }}. {
    { name }}: {
    { value }}

4:当使用v-for，配合使用：key
key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

用字符串或数值类型的值

  
...

5:由于js限制，vue不能检测数组变动，要用-

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

上面都不是响应式，
以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：
vm.$set(vm.items, indexOfItem, newValue)


为了解决第二类问题，你可以使用 splice：
vm.items.splice(newLength)
对象变更检测注意事项

6:还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` **不是响应式的**

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})
你可以添加一个新的 age 属性到嵌套的 userProfile 对象：
Vue.set(vm.userProfile, 'age', 27)

你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：
vm.$set(vm.userProfile, 'age', 27)

7：有时你可能需要为已有对象赋值多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，

不要像这样：
Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})
你应该这样做：

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

8:我们想要显示一个数组经过过滤或排序后的版本，而不实际改变或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。

{
    { n }}

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个方法：

{
    { n }}
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

9:类似于 v-if，你也可以利用带有 v-for 的 来循环渲染一段包含多个元素的内容。比如：

10:不推荐在同一元素上使用 v-if 和 v-for

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，

  {
    { todo }}
//只渲染了未完成的todo，相当于加了一个条件。

有条件的跳过循环那么可以将 v-if 置于外层元素 (或 )上。

  

    {
    { todo }}
  

No todos left!

11:当在组件上使用 v-for 时，key 现在是必须的。