《Vue教程五》Vue中的语句
条件语句v-if与v-show：
v-if：
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。
v-else-if，充当 v-if 的“else-if 块”，可以连续使用。必须紧跟在带v-if或者v-else-if的元素的后面，否则将不会被识别。
v-else 指令来表示 v-if 的“else 块”，必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则将不会被识别。
A
B
C
Not A/B/C
可以把一个元素当做不可见的包裹元素，并在上面使用 v-if，最终的渲染结果将不包含 元素。
Title
Paragraph 1
Paragraph 2
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
切换 loginType 将不会清除用户在input中已经输入的内容。因为两个模板使用了相同的元素， 不会被替换掉——仅仅是替换了它的 placeholder。
Vue 提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可：
现在，每次切换时，输入框都将被重新渲染。元素仍然会被高效地复用，因为它们没有添加 key 属性。
v-show:
另一个用于根据条件展示元素的选项是v-show指令，用法大致一样，不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。
v-show 只是简单地切换元素的 CSS 属性 display。
v-show 不支持元素，也不支持 v-else。
Hello!
v-if和v-show:
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-if与v-for一起使用：
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。
- 当想为仅有的一些项渲染节点时，这种优先级的机制会十分有用：
- {{ todo }}
- 当想有条件地跳过循环的执行，那么可以将 v-if 置于外层元素或
上。- {{ todo }}
No todos left!
循环语句 v-for：
循环使用v-for指令。
数组：
可以使用v-for指令基于一个数组来渲染一个列表。
v-for 指令需要使用 item in items 形式的特殊语法，其中，items 是源数据数组， item 则是被迭代的数组元素的别名。v-for 还支持一个可选的第二个参数，即当前项的索引。
也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法。
-
{{ index }} - {{ item.message }}
var example2 = new Vue({
el: '#example-2',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
调用数组的变异方法和非变异方法都会触发视图更新。
数组的变异方法：push()、pop()、shift()、unshift()、splice()、sort()、reverse()，调用这些方法会改变原始数组。
数组的非变异方法：filter()、concat()、slice()，调用这些方法不会改变原始数组，而总是会返回一个新数组。
example1.items.push({ message: 'Baz' })
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
有人可能会认为调用数组的非变异方法将导致Vue丢弃现有DOM并重新渲染整个列表。但事实并非如此，Vue为了使得DOM元素得到最大范围的重用而实现了一些智能的启发式操作，所以用一个含有相同元素的数组去替换原来的数组是非常高效的。
由于javascript的限制，Vue 不能检测以下变动的数组：
- 当利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
解决方法：- Vue.set或者vm.$set：
Vue.set(vm.items, indexOfItem, newValue) - Array.prototype.splice：
vm.items.splice(indexOfItem, 1, newValue)
- Vue.set或者vm.$set：
- 当修改数组的长度时，例如：vm.items.length = newLength
解决方法：vm.items.splice(newLength)
对象：
可以使用 v-for来遍历一个对象的属性。第一个参数为对象的属性值，第二个参数为对象的属性名，第三个参数为索引。
在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。
{{ index }}. {{ key }}: {{ value }}
由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
- 对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。
var vm = new Vue({ data: { a: 1 } }) // `vm.a` 现在是响应式的 // `vm.b` 不是响应式的 vm.b = 2 - 但是可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。
可以使用 Object.assign()为已有对象赋予多个新属性。var vm = new Vue({ data: { userProfile: { name: 'Anika' } } }) Vue.set(vm.userProfile, 'age', 27);//或者vm.$setvm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' })
key:
就地更新策略：当Vue正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一 key 属性：
不要使用对象或数组之类的非原始类型值作为 v-for 的 key。而是使用字符串或数值类型的值。
尽可能在使用v-for时提供key属性，除非遍历输出的DOM内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。