vue基础

内部指令

名称 说明
v-if v-else 是否加载html中的DOM
v-show 是否用display属性显示出来
v-for 循环渲染
v-text v-html 输出text 输出html
v-on 绑定事件监听,缩写@
v-model 双向绑定,修饰符.lazy.number.trim
v-bind 绑定标签的属性,缩写:
其它 v-pre,v-cloak,v-once 输出原始值,渲染整个DOM后再显示,渲染一次

全局API

什么是全局API?

全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如Vue.directive。说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能。

名称 说明
Vue.extend 使用基础 Vue 构造器,创建一个“子类”
Vue.nextTick 在下次 DOM 更新循环结束之后执行延迟回调
Vue.set 向响应式对象中添加一个属性
Vue.delete 删除对象的属性
Vue.directive 注册或获取全局指令
Vue.filter 注册或获取全局过滤器
Vue.component 注册或获取全局组件
Vue.use 安装 Vue.js 插件
Vue.mixin 全局注册一个混入
Vue.compile 在 render 函数中编译模板字符串。只在独立构建时有效
Vue.version 提供字符串形式的 Vue 安装版本号

选项

数据

名称 说明
data Vue 实例的数据对象
props 用于接收来自父组件的数据
propsData 创建实例时传递 props。主要作用是方便测试。
computed 计算属性将被混入到 Vue 实例中
methods methods 将被混入到 Vue 实例中
watch 一个对象,键是需要观察的表达式,值是对应回调函数

DOM

名称 说明
el 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
render 一个字符串模板作为 Vue 实例的标识使用
renderError render 函数遭遇错误时,提供另外一种渲染输出

生命周期钩子

名称 说明
beforeCreate 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created 在实例创建完成后被立即调用。
beforeMount 在挂载开始之前被调用
mounted el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
beforeUpdate 数据更新时调用,发生在虚拟 DOM 打补丁之前。
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed Vue 实例销毁后调用。
activated keep-alive 组件激活时调用。
deactivated keep-alive 组件停用时调用。

资源

名称 说明
directives 包含 Vue 实例可用指令的哈希表。
filters 包含 Vue 实例可用过滤器的哈希表。
components 包含 Vue 实例可用组件的哈希表。

组合

名称 说明
parent 指定已创建的实例之父实例,在两者之间建立父子关系
mixins 选项接受一个混入对象的数组。
extends 允许声明扩展另一个组件
provide / inject 提供/注入 主要为高阶插件/组件库提供用例