vue2.x学习笔记

• 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。

• 所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。

• 指令：职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

• 以下是某些vue和angular指令的对比：
  指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。

v-bind:title=    |     [title]=
v-if=            |     *ngIf=
v-show           |     [hidden]=
v-for=           |     *ngFor=
v-on:click=      |     (click)=
v-model=         |     [(ngModel)]=

更多API详见https://cn.vuejs.org/v2/api/

• 双向绑定：只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。
• 生命周期：生命周期钩子的 this 上下文指向调用它的 Vue 实例。
• 插值： 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值；Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令。
• v-bind:缩写:，v-on:缩写@，v-slot: 替换为字符 #。
• 计算属性computed和侦听属性watch：当数据需要随着其它数据变动而变动时，computed 更有用；当需要在数据变化时执行异步或开销较大的操作时，watch更有用。
• 不推荐同时使用 v-if 和 v-for。当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
• <template>元素当做不可见的包裹元素，类似ng的<ng-container>，而不是<ng-template>；类似react的<React.Fragment></React.Fragment>（简写<></>）。
• <ul><li is="todo-item" attribute中的is="todo-item"实现的效果与 <todo-item> 相同，但是可以避开一些潜在的浏览器解析错误，因为在 <ul> 元素内只有 <li> 元素会被看作有效内容。
• 更新使用 v-for 渲染的元素列表时为每项提供一个唯一 key attribute，类似于react中的key。
• 对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)。
• 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
• 组件的 data 选项必须是一个函数；根实例的data是一个对象。
• 监听子组件事件： $emit。
• 插槽：<slot></slot>，类似于angular的<ng-content></ng-content>。vue，react，angular插槽使用比较。
• 动态组件：通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现。
• 使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。
• 推荐始终使用 kebab-case 的事件名。
• 在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。
• $forceUpdate()类似react中的forceUpdate()。
• 单文件组件: 模版、脚本、样式写在一个.vue 文件中。
• 不论使用模板还是渲染函数，内容都会被自动转义，因此避免了脚本注入。
• Vue 在更新 DOM 时是异步执行的。
• Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
• vue 的过滤器filter 类似 angular 中的管道pipe。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。
• 插件通常用来为 Vue 添加全局功能。
• 混入 (mixin) 用来分发 Vue 组件中的可复用功能。