for遍历对象： 三个参数分别为 值 键 索引
for便利数组： 两个参数为 值 索引 。在输出地方可以 {{ parent }} 获取到父级 data下的数据。
需要注意的是 for 遍历对象，不能保证顺序的正确。
key
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值 (在这里使用简写)：
<div v-for="item in items" :key="item.id"> <!-- 内容 --> </div> |
建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
因为它是 Vue 识别节点的一个通用机制，key 并不与 v-for 特别关联，key 还具有其他用途，我们将在后面的指南中看到其他用途。
@是v-on:的缩写
:是v-bind：的缩写
变异方法
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
push() //数组后面添加pop() //删除最后一个shift() //删除第一个unshift() //先开头添加一个或更多splice() //splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目arrayObject.splice(index,howmany,item1,.....,itemX)
参数 描述 index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 item1, ..., itemX 可选。向数组添加的新项目。 sort() //排序reverse() // 逆序
你打开控制台，然后用前面例子的 items 数组调用变异方法：app.todos.push({ message: 'Baz' }) 。
替换数组
变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：
example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) }) |
tips:Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
注意事项
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
- 当你利用索引直接设置一个项时，例如：
vm.items[indexOfItem] = newValue - 当你修改数组的长度时，例如：
vm.items.length = newLength
举个例子：
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)
|
对象更改检测注意事项
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
var vm = new Vue({ data: { a: 1 } }) // `vm.a` 现在是响应式的 vm.b = 2 // `vm.b` 不是响应式的 |
对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：
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)
|
有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：
Object.assign(vm.userProfile, { age: 27, favoriteColor: 'Vue Green' }) |
你应该这样做：
vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' }) |
下面是一个简单的 todo list 的完整例子：
注意这里的 is="todo-item" 属性。这种做法在使用 DOM 模板时是十分必要的，因为在 <ul> 元素内只有 <li> 元素会被看作有效内容。这样做实现的效果与 <todo-item> 相同，但是可以避开一些潜在的浏览器解析错误。查看 DOM 模板解析说明 来了解更多信息。
tips:1.子组件要读取到父组件的数据要用props:["data"], 父组件也需要对应：data声明对应数据。
2.$emit('delete-this') ; $emit能调用父组件里面注册的自定义方法，注意方法名是不区分大小写的需要分割的请用-分隔符。
3.对于“ ”中要回车，可以用· · 也可以再每行后面加\