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
})
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页