vue全局api接口的主要内容,vue全局api有哪些

　　本文主要介绍vue常用API和高层API的总结，帮助大家更好的理解和学习使用Vue框架。感兴趣的朋友可以了解一下。

nextTick

　　功能：

　　在下一个Dom更新周期结束后添加一个延迟的回调。修改完数据后，就可以得到更新后的Dom了。

　　用法：

　　vue . next tick([回调，上下文])

　　vm。$ next tick([回调])

　　//用法2

　　//用作承诺(2.1.0以来新增)

　　Vue.nextTick()。then(function () {

　　//DOM已更新

　　})

　　描述：

　　回调：延迟的回调函数

　　上下文：可选对象

　　PS: New from ps:2.1.0:如果没有提供回调，并且是在支持承诺的环境中，则返回一个承诺。请注意，Vue没有自带Promise的polyfill，所以如果你的目标浏览器没有原生支持Promise(即：你们都看着我干嘛)，那就要自己提供了。

　　扩展：

　　关于nextTick的执行机制和使用场景，也要掌握类似的requestAnimationFrame()和process.nextTick()，前者是浏览器自己的监控(在下一次重绘之前执行)，后者是在节点环境下的下一个事件轮询点执行。

mixin

　　功能：

　　注册一个mix-in，这会影响注册后创建的每个Vue实例。插件作者可以使用混合将定制行为注入组件。

　　用法：

　　//将处理器注入到自定义选项“myOption”中。

　　Vue.mixin({

　　已创建：函数(){

　　var myOption=this。$options.myOption

　　if (myOption) {

　　console.log(我的选项)

　　}

　　})

　　新Vue({

　　我的选择：“你好！”

　　})

　　//=你好！

　　描述：

　　对象：虚拟机的属性或方法

　　Ps:请谨慎使用全局混合，因为它会影响每个独立创建的Vue实例(包括第三方组件)。在大多数情况下，它应该只应用于自定义选项，如上例所示。建议将其发布为插件，避免重复应用。

$forceUpdate

　　功能：

　　强制Vue实例重新渲染。

　　用法：

　　vm。$forceUpdate()

set、delete

　　功能：

　　设置和删除响应数据的属性，并触发视图更新。

　　用法：

　　//用法1

　　Vue.set(目标，键，值)

　　Vue.delete(目标，键)

　　//用法2

　　vm。$set(目标，键，值)

　　vm。$delete(目标，键)

　　描述：

　　目标：目标对象

　　Key:要添加的属性的名称

　　Value:要添加的属性值。

　　Ps:主要使用场景可以避免Vue无法检测到属性删除的限制。

filter

　　功能：

　　用于一些常见的文本格式和一些规范的数据映射。

　　用法：

　　！-在双花括号里-

　　！-在“v-bind”

　　div v-bind:id= rawId formatId /div

　　//寄存器

　　过滤器：{

　　大写：函数(值){

　　如果(！值)返回“”

　　value=value.toString()

　　返回值. charAt(0)。toUpperCase() value.slice(1)

　　}

　　//全局注册

　　Vue.filter(大写，函数(值){

　　如果(！值)返回“”

　　value=value.toString()

　　返回值. charAt(0)。toUpperCase() value.slice(1)

　　})

　　新Vue({

　　//.

　　})

　　描述：

　　过滤器总是接收表达式的值(前一个操作链的结果)作为第一个参数。

　　过滤器应该添加在JavaScript表达式的末尾，用“管道”符号表示。

　　Ps:一个过滤器可以接受多个参数，比如{{message filterA (arg1 ，arg2)}}，其中filterA被定义为接收三个参数的过滤函数。message的值是第一个参数，普通字符串“arg1”是第二个参数，表达式arg2的值是第三个参数。

directive

　　功能：

　　用于注册自定义指令。

　　用法：

　　！-当页面加载时，元素将获得焦点-

　　输入垂直焦点

　　//注册一个全局自定义指令“v-focus”。

　　Vue.directive(focus ，{

　　//当绑定元素插入DOM时.

　　插入：函数(el) {

　　//焦点元素

　　焦点()

　　}

　　})

　　//注册本地指令，组件还接受一个指令选项。

　　指令：{

　　焦点：{

　　//指令的定义

　　插入：函数(el) {

　　焦点()

　　}

　　描述：

　　插入只是注册指令的插值函数之一，完整的注册属性还可以包括：

　　Bind:只调用一次。指令在第一次绑定到元素时被调用。这里，可以执行一次初始化。

　　Inserted:当绑定元素插入到父节点时调用(只存在父节点，但不一定插入到文档中)。

　　Update:当组件的VNode更新时调用，但它可能发生在其子VNode更新之前。指令的值可以改变，也可以不改变，但是通过比较更新前后的值，可以忽略不必要的模板更新。

　　ComponentUpdated:在指令所在组件的VNode及其子VNode都更新后调用。

　　Unbind:仅在指令从元素解除绑定时调用一次。

　　Vue.directive(my-directive ，{

　　bind: function () {}

　　已插入：函数(){}，

　　更新：function () {}，

　　componentUpdated: function () {}，

　　取消绑定：函数(){}

　　})

其它简单的常用属性和方法

　　//console.log(vm。$ root)；

　　Vm。$root //实例对象

　　Vm。$el //根元素(真正的DOM元素)

　　//console.log(vm。$ El)；

　　Vm。$el.innerHTML //获取根元素(真正的DOM元素)中的内容

　　//console.log(vm。$ El . innerhtml)；

　　虚拟机下的数据对象。$data //实例

　　//console.log(vm。$ data)；

　　在虚拟机下挂载项目。$options //实例

　　//console.log(vm。$ options)；

　　Vm。$props //组件间通信的数据

　　//console.log(vm。$道具)；

　　Vm。$parent //在组件中，它是指父元素

　　//console.log(vm。$ parent)；

　　Vm。$children //在组件中，它是指子元素。

　　//console.log(vm。$儿童)；

　　Vm。$attrs //用于获取父组件传递的所有属性。

　　//console.log(vm。$ attrs)；

　　Vm。$listeners //用于获取父组件传递的所有方法。

　　//console.log(vm。$ listeners)；

　　虚拟机中的插槽。$slots //组件

　　//console.log(vm。$ slots)；

　　Vm。$scopedSlots //用于访问作用域插槽

　　//console.log(vm。$ scopedSlots)；

　　Vm。$refs //用于定位DOM元素(用ref跟踪)

　　//console.log(vm。$ refs)；

　　Vm。$watch //用于监听数据(在vue文件中使用后会自动销毁)

　　//console.log(vm。$ watch)；

　　Vm。$emit //用于调度事件(通常用于数据通信)

　　//console.log(vm。$ emit)；

　　Vm。$on //用于监控事件的调度

　　//console.log(vm。$ on)；

　　Vm。$once //只监听一次事件(之后不要监听)

　　//console.log(vm。$一次)；

　　//生命周期

　　创建之前(){

　　}

　　已创建(){

　　}

　　beforeMount() {

　　}

　　已安装(){

　　}

　　更新之前(){

　　}

　　已更新(){

　　}

　　销毁前(){

　　}

　　销毁(){

　　}

总结

　　本文主要包括vue中常用的这些API。如果有兴趣了解更多，可以参考其官网。希望本文对你有用，能熟练应用到实际项目开发中。

　　为了便于阅读和理解，本文的代码已经上传到Github。

　　文章如有错误，请在评论区改正。如果有帮助，请点赞并关注。

　　以上是Vue常用API和高级API相关总结的详细内容。更多关于Vue常用API和高级API的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。