VUE学习笔记——v-for/组件
零、VUE代码风格指南：https://cn.vuejs.org/v2/style-guide/
1.当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符，即kebab-case命名)。这会帮助你避免和当前以及未来的 HTML 元素相冲突（HTML 元素是大小写不敏感的，在 DOM 模板中会被自动转换为全小写 ，但是事件名是大小写敏感的，为了防止冲突推荐始终使用 kebab-case 命名）。
一、v-for列表渲染：https://cn.vuejs.org/v2/guide/list.html
1.v-for数组：v-for="(item, index) in items"
2.v-for对象：v-for="(value, key, index) in object"
【v-for与:key（看不懂就继续查）：https://www.cnblogs.com/zhumingzhenhao/p/7688336.html
https://www.jb51.net/article/145477.htm
https://www.jianshu.com/p/5807d9378776】
3.v-for数组更新检测：
变异方法：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
例子：example1.items.push({ message: 'Baz' })
替换数组的方法：filter(), concat() 和 slice()
【注意事项：https://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9】
【显示过滤/排序结果：https://cn.vuejs.org/v2/guide/list.html#%E6%98%BE%E7%A4%BA%E8%BF%87%E6%BB%A4-%E6%8E%92%E5%BA%8F%E7%BB%93%E6%9E%9C】
【注意：类似v-for这样的指令必须放在vue实例里面才能生效：
{{ n }}
{{ n }}
】
4.v-for with v-if (v-for优先级更高) :https://cn.vuejs.org/v2/guide/list.html#v-for-with-v-if
【VUE代码风格指南：https://cn.vuejs.org/v2/style-guide/】
5.v-for 与组件
二、组件：https://cn.vuejs.org/v2/guide/components.html
1.熟悉基本示例的使用
【组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，所以也会有 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el这样根实例特有的选项。】
2.组件可以复用，并且各自独立维护自己的数据，因为每个组件都对应一个新的实例
组件的data属性必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
data: function () { return { count: 0 } } 而不是 data: { count: 0 }
3.组件的组织（树结构）、组件的注册（全局与局部）
4.实用例子：
【通过props向子组件传递数据、单个根元素、监听子组件事件$emit(参数1是事件名，参数2是携带的数据)、】
【小知识：
a.简写函数：methods: { addCount: function () { this.count ++} } 与 v-on:click="addCount"
可以简写为v-on:click="count++"，即可以不传函数名，直接写操作
b.开发者工具看JS文件乱码时：https://www.cnblogs.com/kennyliu/p/4086601.html
所以这样就好了：
c.动态赋予一个复杂表达式的值
5.通过插槽
Vue.component('alert-box', { template: `
最终会输出：Error! Something bad happened.
6.未研究的部分：
a.在组件上使用v-model（）创建自定义输入组件：https://cn.vuejs.org/v2/guide/components.html#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-v-model
b.解析DOM模板时的注意事项：https://cn.vuejs.org/v2/guide/components.html#%E8%A7%A3%E6%9E%90-DOM-%E6%A8%A1%E6%9D%BF%E6%97%B6%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9
三、深入了解组件：https://cn.vuejs.org/v2/guide/components-registration.html
1.组件注册（第一个参数是组件名，推荐使用 kebab-case (短横线分隔命名)，引用时写
Vue.component('my-component-name', { /* ... */ })
a.全局注册：它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中，在所有子组件中也是如此
【组件的嵌套：
简单例子（答案中有个简单的例子）：https://segmentfault.com/q/1010000009912831/a-1020000009916983
复杂例子（没看，需研究）：https://www.cnblogs.com/chengduxiaoc/p/7099552.html】
b.全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
组件所夹的内容通过slot插槽显示(组件夹组件的时候需特别注意)
全局注册的组件可以直接被其他组件使用：
2.props类型：
未指明类型时： props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
指明类型时：props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise }
3.传递props（常会用）
https://cn.vuejs.org/v2/guide/components-props.html#%E4%BC%A0%E9%80%92%E9%9D%99%E6%80%81%E6%88%96%E5%8A%A8%E6%80%81-Prop
4.单项数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
使用父元素传过来的props的方法一般有data(通常是初始化的数据)和computed（涉及计算的数据）：
props: ['initialCounter'], data: function () { return { counter: this.initialCounter } }
props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }
【注意：JS对象和数组是通过引用传入的，所以在子组件中改变这个对象或数组本身将会影响到父组件的状态。】
5.利用.sync修饰符双向绑定prop：https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6
【这样子组件也可以修改父组件的数据】
6.插槽：
插槽内可以使用{{post.title}}
插槽后备内容：
模板：
当父组件
当父组件
n.未研究的内容：
a.使用了诸如 Babel 和 webpack 的模块系统来管理VUE：https://cn.vuejs.org/v2/guide/components-registration.html#%E6%A8%A1%E5%9D%97%E7%B3%BB%E7%BB%9F
b.JavaScript （字符串模板）与DOM (非字符串的模板)：去搜索一下吧
【所以模板有多行的时候需要使用折行转义字符\】
c.prop验证：https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E9%AA%8C%E8%AF%81
原生类型type可以是：String、Number、Boolean、Array、Object、Date、Function、Symbol
d.非prop特性：https://cn.vuejs.org/v2/guide/components-props.html#%E9%9D%9E-Prop-%E7%9A%84%E7%89%B9%E6%80%A7
【vue组件和Bootstrap模板组件混合使用】
e.自定义组件的v-model：https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model
【组件涉及表单的时候再研究】
f.插槽的高级使用-具名插槽和作用域插槽：
https://cn.vuejs.org/v2/guide/components-slots.html#%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD
g.动态组件和异步组件：https://cn.vuejs.org/v2/guide/components-dynamic-async.html
h.组件-处理边界情况：https://cn.vuejs.org/v2/guide/components-edge-cases.html