vue知识点

1.全局配置

• config.silent : 取消 Vue 所有的日志与警告。
• config.optionMergeStrategies : 自定义合并策略的选项。
• config.devtools : 配置是否允许 vue-devtools 检查代码。开发版本默认为 true，生产版本默认为 false。
• config.errorHandler : 指定组件的渲染和观察期间未捕获错误的处理函数。
• config.warnHandler : 为 Vue 的运行时警告赋予一个自定义处理函数。注意这只会在开发者环境下生效，在生产环境下它会被忽略。
• config.ignoredElements : 须使 Vue 忽略在 Vue 之外的自定义元素 (e.g. 使用了 Web Components APIs)。
• config.keyCodes : 给 v-on 自定义键位别名。
• config.performance : 设置为 true 以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补丁的性能追踪。只适用于开发模式和支持 performance.mark API 的浏览器上。
• config.productionTip : 设置为 false 以阻止 vue 在启动时生成生产提示。

2.全局API

• Vue.extend : 使用基础 Vue 构造器，创建一个“子类”。
• Vue.nextTick : 在下次 DOM 更新循环结束之后执行延迟回调。
• Vue.set : 向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。
• Vue.delete : 删除对象的 property。如果对象是响应式的，确保删除能触发更新视图。
• Vue.directive : 注册或获取全局指令。
• Vue.filter : 注册或获取全局过滤器。
• Vue.component : 注册或获取全局组件。
• Vue.use : 安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。
• Vue.mixin : 全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。
• Vue.compile : 将一个模板字符串编译成 render 函数。
• Vue.observable : 让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。
• Vue.version : 提供字符串形式的 Vue 安装版本号。

3.生命周期

4.指令

• v-text : 更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。
• v-html : 更新元素的 innerHTML。
• v-show : 根据表达式之真假值，切换元素的 display CSS property。
• v-if / v-else-if / v-else : 根据表达式的值的 truthiness 来有条件地渲染元素。
• v-for : 基于源数据多次渲染元素或模板块。
• v-on( @ ) : 绑定事件监听器。
  • .stop - 调用 event.stopPropagation()。
  • .prevent - 调用 event.preventDefault()。
  • .capture - 添加事件侦听器时使用 capture 模式。
  • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  • .native - 监听组件根元素的原生事件。
  • .once - 只触发一次回调。
  • .left - (2.2.0) 只当点击鼠标左键时触发。
  • .right - (2.2.0) 只当点击鼠标右键时触发。
  • .middle - (2.2.0) 只当点击鼠标中键时触发。
  • .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
• v-bind( : ) : 动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
  • .prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。
  • .camel - (2.1.0+) 将 kebab-case（短横线） attribute 名转换为 camelCase（驼峰命名）。
  • .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。
• v-model : 在表单控件或者组件上创建双向绑定。
  • .lazy - 取代 input 监听 change 事件
  • .number - 输入字符串转为有效的数字
  • .trim - 输入首尾空格过滤
• v-slot( # ) : 提供具名插槽或需要接收 prop 的插槽。
• v-pre : 跳过这个元素和它的子元素的编译过程。
• v-cloak : 这个指令保持在元素上直到关联实例结束编译。
• v-once : 只渲染元素和组件一次。

5.内置组件

• component : 渲染一个“元组件”为动态组件。
  • is - 渲染的组件名
  • inline-template - 内联模板
• transition : 元素作为单个元素/组件的过渡效果。
• transition-group : 元素作为多个元素/组件的过渡效果。
• keep-alive : 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
  • max - 数字。最多可以缓存多少组件实例。
• slot : 元素作为组件模板之中的内容分发插槽。
  • name - 用于命名插槽

6.组件通讯

• 父子组件：vm.$ on / vm.$ emit , vm.$ parent / vm.$ children
• 子孙组件：vm.$ parent / vm.$ children , vm.$ attrs / vm.$ listeners , provide / inject
• 兄弟组件：vuex , bus总线

7.异步组件

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 向 `resolve` 回调传递组件定义
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

Vue.component(
  'async-webpack-example',
  // 这个动态导入会返回一个 `Promise` 对象。
  () => import('./my-async-component')
)

new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})

Vue.component('async-webpack-example', function (resolve) {
  // 这个特殊的 `require` 语法将会告诉 webpack
  // 自动将你的构建代码切割成多个包，这些包
  // 会通过 Ajax 请求加载
  require(['./my-async-component'], resolve)
})

const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})