Vue全局API总结

light 发布于2019-08-30 15:53 / 1651人阅读

摘要：带图原文链接地址用于创建一个子类用来挂载在下次更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的。而则是在引入组件之后，则是将组件内部的内容如等方法等属性与父组件相应内容进行合并。只在独立构建时有效

带图原文链接地址：http://www.cnblogs.com/douyae...
1.extend用于创建一个子类Vue,用$mount来挂载

2.Vue.nextTick([callback,context])在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。




    
    Title
    



    
    {{message}}

结果如下：

我们可以看到视图更新以后拿到的并不是更新后的innerHTML，因为dom结构更新是一个异步事件

再看下面的例子




    
    Title
    



    
    {{message}}

我们可以看到它会等dom结构更新完成后再去获取更新后的innerHTML值

3.Vue.set(target,key,value)普通的情况下对Vue实例里面的数据进行更改，数据改掉了，但是呈现在页面的视图并没有发生变化，所以借用该方法视图也会跟着刷新

普通方式视图并没有刷新

set方式视图会刷新



    
        {{item}}

4.Vue.delete(target,key)用法和原理与set添加元素是一样的道理



    
        {{key}}----{{val}}

5.Vue.directive(id,[definition])指令函数，定义了以下几个钩子，每一个钩子都有参数el,指的是绑定的元素

// 注册
Vue.directive("my-directive", {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})
// 注册 (指令函数)
Vue.directive("my-directive", function () {
  // 这里将会被 `bind` 和 `update` 调用
})
// getter，返回已注册的指令
var myDirective = Vue.directive("my-directive")
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。



     Hello Vue!

inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

这是我做的一个照片墙拖曳例子


    
    Title

bind:update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。




    
    Title

小例子如下，当被绑定的textarea的内容发生变化的时候，就会执行钩子函数

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

unbind: 只调用一次，指令与元素解绑时调用。

6.Vue.filter(id,[definition])注册或获取全局过滤器，主要用于在实例里面的数据不改变的情况下，在页面对渲染进dom的数据进行过滤处理，和angular中的过滤器用法一样

// 注册
Vue.filter("my-filter", function (value) {
// 返回处理后的值
})
// getter，返回已注册的过滤器
var myFilter = Vue.filter("my-filter")

简单全局过滤器和局部过滤器例子




    
    Title
    



    数字变美元
    
    {{num|money}}
    内容反转
    
    {{message|reverse}}

过滤器可以管道式连接过滤




    
    Title
    



    过滤字符串中的数字，并将剩余部分以数组形式输出
    
    {{message|delNum|arr}}

7.Vue.component()在组件那一篇文章有说到，不做总结了

8.Vue.version用于获取当前Vue的版本号

9.Vue.use用于安装Vue插件

10.对于Vue.mixin的理解，引用别人的博文

vue中mixin的一点理解

vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixins和普通情况下引入组件有什么区别？

 组件在引用之后相当于在父组件内开辟了一块多带带的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。
 而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。
 单纯组件引用：
      父组件 + 子组件 >>> 父组件 + 子组件
 mixins：
      父组件 + 子组件 >>> new父组件

 值得注意的是，在使用mixins时，父组件和子组件同时拥有着子组件内的各种属性方法，但这并不意味着他们同时共享、同时处理这些变量，两者之间除了合并，是不会进行任何通信的。最开始看到mixins的时候，天真的我似乎看到了一种向下的类似vuex的数据共享方案，心情十分激动啊。但是仔细一研究官方api和一些技术博客，才发现自己。。。天真。

我个人的拙见如下：
1.Vue在实例化成对象的那一刻，会通过mixin混合机制将方法直接添加到实例里面去
2.prototype方法直接将方法添加到Vue本身的构造器里面去




    
    Title

输出结果：

大家可以看到

第一个输出的是混合器的hello方法，此刻刚开始创建实例app

第二个属于混合器的hello方法，因为app本身实例没有这个方法，所以是混合器为其添加的

第三个输出的是混合器的hello方法，此刻刚开始创建实例app1

第四个输出的是app本身的list方法

第五个输出的是app实例的say方法。因为app实例中用有该方法，会将混合器添加的say方法覆盖掉

对于六和七由于app1没有自己的hello和say方法，所以只能用混合器为他添加的方法

第八个属于Vue原型里面我们添加进去的myapp方法

我们再看一下Vue原型对象app.__proto__

我们发现里面并没有混合方法，所以混合方法在创建实例对象的那一刻添加到实例对象里面了，但是里面却有myapp方法

11.Vue.compile()在 render 函数中编译模板字符串。只在独立构建时有效

idc机房托管云服务器年终总结网络总结方法总结函数总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116670.html

Vue全局API总结

摘要：带图原文链接地址用于创建一个子类用来挂载在下次更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的。而则是在引入组件之后，则是将组件内部的内容如等方法等属性与父组件相应内容进行合并。只在独立构建时有效带图原文链接地址：http://www.cnblogs.com/douyae...1.extend用于创建一个子类Vue,用$mount来挂载 con...

lemon 2019-08-01 17:46 评论0 收藏0
Vue全局API总结

摘要：带图原文链接地址用于创建一个子类用来挂载在下次更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的。而则是在引入组件之后，则是将组件内部的内容如等方法等属性与父组件相应内容进行合并。只在独立构建时有效带图原文链接地址：http://www.cnblogs.com/douyae...1.extend用于创建一个子类Vue,用$mount来挂载 con...

nifhlheimr 2019-08-21 16:59 评论0 收藏0
Vue开发总结及一些最佳实践（已更新）

摘要：基本开发环境创建的项目，作为代码编写工具插件推荐插件配置文章目录项目目录结构介绍框架选择处理请求二次封装项目目录结构简介业务相关静态文件全局组件基础样式布局样式及工具引入请求配置路由全局状态管理工具文件入口文件主要配置文件页面检查配置测试基本开发环境 vue-cli3 创建的项目，vscode 作为代码编写工具vscode插件推荐：vscode 插件配置文章目录项目目录结构介绍...

NotFound 2019-08-26 13:47 评论0 收藏0
vue 项目总结一组件开发的配置和例子

摘要：入口文件，影响全局，作用是引入全局使用的库公共的样式和方法设置路由等。项目里总会有一些复用的组件，例如弹出框发送手机验证码图片上传等，将它们作为通用组件，避免重复工作结构如下可以根据功能模块建立文件夹，放置本功能会用到的通用组件。上一篇文章 https://segmentfault.com/a/11... 介绍了项目里文件夹的分类和作用，这次主要说明 src 文件夹里具体的文件分类和...

melody_lql 2019-08-02 16:00 评论0 收藏0
vue 项目总结一组件开发的配置和例子

摘要：入口文件，影响全局，作用是引入全局使用的库公共的样式和方法设置路由等。项目里总会有一些复用的组件，例如弹出框发送手机验证码图片上传等，将它们作为通用组件，避免重复工作结构如下可以根据功能模块建立文件夹，放置本功能会用到的通用组件。上一篇文章 https://segmentfault.com/a/11... 介绍了项目里文件夹的分类和作用，这次主要说明 src 文件夹里具体的文件分类和...

isaced 2019-08-22 11:16 评论0 收藏0