Vue-API官方文档笔记

最新推荐文章于 2021-09-23 16:57:57 发布

y13552128229

最新推荐文章于 2021-09-23 16:57:57 发布

阅读量1.3k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/y13552128229/article/details/106795356

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

全局配置

Vue.config 是一个对象，包含Vue的全局配置。

silent: 日志与警告。
optionMergeStrategies:自定义合并策略的选项。
devtools: 配置是否允许vue-devtools检查代码。开发版默认true,生产版默认false。
errorHandler/warnHandler(开发环境)/ignoredElements/performance/productionTip
keyCodes:给 v-on自定义键位别名。
Vue.config.*()

全局API

Vue.extend:使用基础Vue构造器，创建一个子类。参数是一个包含组件选项的对象。data选项是特例，在extend中它必须是函数。
Vue.nextTick:在下次DOM更新循环结束之后执行延迟回调。
Vue.set:向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。
Vue.delete:删除对象的属性，如果对象是响应式的，删除能触发视图更新。
Vue.directive:注册或获取全局指令。
Vue.filter:注册或获取全局过滤器。
Vue.compoenent:注册或获取全局组件。
Vue.use:安装Vue.js插件。该方法需要在调用new Vue()之前被调用。插件将只会被安装一次。
Vue.mixin:全局注册一个混入，影响注册之后所创建的每个Vue实例。添加自定义行为。
Vue.complie:将一个模板字符串编译成render函数。只在完整版时可用。
var res = Vue.complie('<div>this is test</div>')  res.render
Vue.observable:让一个对象可响应。Vue内部会用它来处理data函数返回的对象。
Vue.version:Vue安装版本号。

选项

数据

data

data是Vue实例的数据对象。Vue将会递归的将data的property转换为getter/setter，从而让datat的propery能够响应数据变化。对象必须是纯粹的对象(含有零个或多个的key/value对)。data应该只是数据，不要其他行为。推荐在创建实例之前就声明所有的根级响应式property。

实例创建之后，可以通过vm.$data访问原始数据对象。Vue实例也代理了data对象上所有的property，访问vm.a等价于访问vm.$data.a。以_ 或 $ 开头的propery不会被Vue实例代理。因为它可能和Vue内置的property、API方法冲突。要通过vm.$data.原始的访问形式访问。

当一个组件被定义，data必须声明为返回一个初始数据对象的函数。

如果你为data 使用箭头函数，则this不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问 data:vm =>({…})

props

props可以是数组或对象，用于接收来自父组件的数据。props可以是简单的数组，或者使用对象，对象允许配置高级选项，如类型检查，自定义验证和设置默认值。

使用基于对象的语法有以下选项：
type:类型
default :默认值
required：是否必须
validator:Function  自定义验证函数，将该prop的值作为唯一的参数传入。

props也接收Vue-router传过来的params路由参数。要配置。

propsData

只用于new创建的实例中，创建实例时传递props，方便检测。没啥用？？

computed

计算属性，将被混入到Vue实例总。所有getter和setter的this上下文自动绑定为Vue实例。

如果你为一个计算属性使用箭头函数,则this不会指向这个组件的实例，不过仍然可以将其实例作为函数的第一个参数访问。计算属性的结果会被缓存，除非依赖的响应式property变化才会重新计算。

computed:{
	a: vm => vm.a * 2
	b: {
		get: (){...},
		set: (v){...}
	}
}

methods

methods将被混入到Vue实例中，可以直接通过VM实例访问这些方法，或者在指令表达式中使用。方法中的this自动绑定为Vue实例。

watch （https://cn.vuejs.org/v2/api/#watch）

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

DOM

el

只在用new创建实例时生效。提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标。可以是CSS选择器，也可以是一个HTMLElement实例。在实例挂载之后，元素可以用vm.$el访问。

如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显示调用vm.$mount()手动开启编译

提供的元素只能作为挂载点。所有的挂载元素会被Vue生成的DOM替换。如果 render 函数和 template property 都不存在，挂载 DOM 元素的 HTML 会被提取出来用作模板，此时，必须使用 Runtime + Compiler 构建的 Vue 库。

template

一个字符串模板作为Vue实例的标识使用。模板将会替换挂载的元素。

如果值以 # 开始，则它将被用作选择符，并使用匹配元素的 innerHTML 作为模板。常用的技巧是用 `` 包含模板。？？

render

字符串模板的代替方案，允许使用js编程。该渲染函数接收一个createElement方法作为第一个参数用来创建VNode。

如果组件是一个函数组件，渲染函数还会接收一个额外的context参数，为没有实例的函数组件提供上下文信息。

Vue选项中的render函数如果存在，则Vue构造函数不会从template选项或通过el选项指定的挂载元素中提取出的HTML模板编译渲染函数。

renderError (只在开发环境下使用)

renderError(h,err) {…}

生命周期钩子

所有的生命周期钩子自动绑定this上下文到实例中，因此你可以访问数据，对property和方法进行运算。不能使用箭头函数来定义一直生命周期方法。

beforeCreate

在实例初始化之后，数据观测(data observer) 和event/watcher事件配置之前被调用。

created

在实例创建完成后被立即调用。在这一步，实例完成以下的配置：数据观测(data observer)，property和方法的运算，watcher/event事件回调。此时，挂载阶段还没开始,$el 不能使用。

beforeMount

在挂载开始之前被调用，相关的render函数首次被调用。该钩子在服务器端渲染期间不被调用。

mounted

实例被挂载后调用，这时el被新创建的vm.$el替换。该钩子在服务器端渲染期间不被调用。mounted不会保证所有的子组件也都一起被挂载。如果希望等到整个视图都渲染完毕，可以在mounted内部使用vm.$nextTick。

beforeUpdate

数据更新时调用，发生在虚拟DOM打补丁之前。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

udpated

由于数据变更导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。组件DOM已经更新完毕。updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用vm.$nextTick。该钩子在服务器端渲染期间不被调用。

actived

被keep-alive缓存的组件激活时调用。该钩子在服务器端渲染期间不被调用。

deactived

被keep-alive缓存的组件停用时调用。该钩子在服务器端渲染期间不被调用。

beforeDestroy

实例销毁之前调用，此时，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。

destroyed

实例销毁后调用。该钩子被调用后，对应vue实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例都被销毁。该钩子在服务器端渲染期间不被调用。

errorCaptured

当捕获一个来自子酸组件的错误时被调用。包含三个参数：错误对象，发生错误的组件实例以及一个帮韩错误来源信息的字符串。该钩子可以返回false来阻止错误继续向上传播。

错误传播规则：https://cn.vuejs.org/v2/api/#errorCaptured

资源

directives

包含Vue实例可用指令的哈希表

filters

包含Vue实例可用过滤器的哈希表

components

包含Vue实例可用组件的哈希表

组合

parent

指定已创建实例的父实例。子实例使用this.$parent访问父实例，子实例被推入父实例的$children数组中。

mixins

mixins选项接收一个混入对象的数组。Mixin钩子安装传入顺序依次调用。并在调用组件自身的钩子之前被调用。

extends

允许声明扩展另一个组件而无需使用Vue.extend。这主要是为了便于扩展单文件组件。

provide/inject (https://cn.vuejs.org/v2/api/#provide-inject)！！！！一点都没看

这对选项要一起使用。主要在开发高阶插件、组件库时使用，不推荐用于普通应用程序代码中。

其他

name

只有作为组件选项时起作用。组件在全局使用Vue.component()注册时，全局ID自动作为组件的name。

delimiters

这个选项只在完整构建版本中的浏览器内编译时可用。改变纯文本插入分隔符。

functional

使组件无状态(没有data)和无实例(没有this上下文)。用一个简单的render函数返回虚拟节点使它们渲染的代价更小。

model

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

inheritAttrs (https://cn.vuejs.org/v2/api/#inheritAttrs)没看

comments

这个选项只在完整构建版本中的浏览器内编译时可用。当设为 true 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。

实例

property

$data: Vue实例观察的数据对象，Vue实例代理了对其data对象property的访问。

$props:当前组件接收到的props对象。Vue实例代理了对其props对象property的访问。

$el:Vue实例使用的根DOM元素。

$options:用于当前Vue实例的初始化选项。需要在选项中包含自定义property时会有用处。

$parent:父实例，如果有的话。

$root:当前组件树的根Vue实例。如果当前实例没有父实例，此实例将会是其自己。

$children:当前实例的直接子组件。

$slots:用来访问被插槽分发的内容。

$scopedSlots：用来访问作用域插槽。

$refs:一个对象，持有注册过ref attribute的所有DOM元素和组件实例。

$isServer:当前Vue实例是否运行于服务器。

$attrs:包含了父作用域中不作为prop被识别的attribute绑定(class\style除外)。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定(class\style除外)，并且可以通过v-bind="$attrs"传入内部组件，在创建高级别的组件时非常有用。

$listeners:包含了父作用域中的(不含.native修饰器的)v-on事件监听器。它可以通过v-on="$listeners"传入内部组件，在创建更高层次的组件时非常有用。

方法/数据

$watch:观察Vue实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。

vm.$watch返回一个取消观察函数，用来停止触发回调。 deep/immediate

$set:这是全局Vue.set的别名。 Vue.set

$delete:这是全局Vue.delete的别名。

事件

$on:监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

$once:监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。

$off:移除自定义事件监听器。

如果没有提供参数，则移除所有的事件监听器
如果只提供了事件，则移除该事件所有的监听器
如果同时提供了事件和回调，则值移除这个回调的监听器

$emit:触发当前实例上的事件。附加参数都会传给监听器回调。

生命周期

$mount:如果Vue实例在实例化的时候没有提供el选项，则它处于"未挂载"状态，没有关联的DOM元素。可以使用vm.$mount手动挂载一个未挂载的实例。这个方法返回实例自身，因而可以链式调用其他实例方法。

$forceUpdate:迫使Vue实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

$nextTick:将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。它根全局方法Vue.nextTick一样，不同的是回调的this自动绑定到调用它的实例上。

$destroy:完全销毁一个实例。清理它与其他实例的连接，解绑它的全部指令及事件监听器。它是触发beforeDestroy和destoryed的钩子。

指令

v-text:更新元素的textContent。如果更新部分内容，使用{{}}插值

<span v-text="msg"></span>
<span>{{msg}}</span>

v-html:更新元素的innerHTML。注意:内容按普通HTML插入，不会作为Vue模板进行编译。

v-show:根据表达式的真假，切换元素的display 。当条件变化时该指令触发过渡效果。

v-if: 根据表达式的值得真假有条件的渲染元素。当v-if和v-for一起使用时，v-for的优先级比v-if高

v-else/v-else-if :与v-if一起使用。

v-for:基于源数据多次渲染元素或模板块。v-for也可以在实现了可迭代协议的值上使用，包括原生的Map/Set。不过Vue2.x目前不支持响应的Map和Set值，所以无法自动探测变更。

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 } 模式添加侦听器

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句。用于普通元素上时，只能监听原生DOM事件。用于自定义元素组件上时，也可以监听子组件触发的自定义事件。

v-bind

修饰符

.prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)
.camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
.sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

动态地绑定一个或多个attribute，或一个组件prop到表达式。

在绑定class/style时，支持其它类型的值，如数组或对象。

在绑定prop时，prop必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时，可以绑定到一个包含键值对的对象。

v-model

修饰符

.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤

在表单控件或者组件上创建双向绑定。

v-slot:提供具名插槽或需要接收prop的插槽。

v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译。

v-cloak:这个指令保持在元素上知道关联实例结束编译。可以隐藏未编译的Mustache标签知道实例准备完毕。不会显示，知道编译结束。

v-once:只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。用于优化更新性能。

特殊attribute

key:key的特殊attribute主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用key时，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误。

它也可用于强制替换元素/组件而不是重复使用它。

ref:ref被用来给元素或子组件注册引用信息。引用信息将会注册在辅助间的$refs对象上。如果在普通的DOM元素上使用，引用指向的就是DOM元素。如果用在子组件上，引用就指向组件实例。

关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

is: