Vue中建立全局引用或者全局命令的方法


Posted in Javascript onAugust 21, 2017

如何在Vue中建立全局引用或者全局命令,具体内容如下

1 一般在vue中,有很多vue组件,这些组件每个都是一个文件。都可能需要引用到相同模块(或者插件)。我们不想每个文件都import 一次模块。

如果是基于vue.js编写的插件我们可以用 Vue.use(...)

main.js

Vue中建立全局引用或者全局命令的方法

2 但是如果想添加一个全局命令,同时又让每个vue的文件都能用到怎么办?

第一步:最好建立一个全局的命令文件例如:directive/directive.js

第二步:利用Vue.directive()建立一个全局命令,并将它暴露出来,例如一个focus 让表单自动聚焦

directive.js

Vue中建立全局引用或者全局命令的方法

第三部步:在main.js(入口JS文件)中将它引入,可以省略文件后缀

main.js

Vue中建立全局引用或者全局命令的方法

这样任何一个Vue文件只要这样v-focus(命令名),就可以很方便的用到了

Vue中建立全局引用或者全局命令的方法

3 Vue.directive() 的命令一般都是自动运行的或者说初始化等等触发的,并不能用于异步事件,怎么办?

于是我们可以用到'mixins'混合命令,你最好建立一个专门的文件夹用于存放混合命令,例如:

mixins.js

Vue中建立全局引用或者全局命令的方法

比如saveScrollPosition (不是vue中的saveScrollPosition)可以每次在路由跳转之间保存住浏览位置信息

注意:vue2.0 中 路由跳转之间会自动保存位置信息 但是有Bug(位置信息之间会相互干扰)。

所以我们从新写一个saveScrollPosition暴露出去后,在你需要的页面中混入

Vue中建立全局引用或者全局命令的方法

Vue中建立全局引用或者全局命令的方法

这样就会很方便。

4 如果你需要应用一个插件,同时他并不是基于vue.js的插件命令编写的,那你可以将它赋予Vue的原型上

例如:我想全局引用axios,我们可以这样

main.js

Vue中建立全局引用或者全局命令的方法

然后this.$http.get(url) 等等

xxx.vue

Vue中建立全局引用或者全局命令的方法

5 将需要的变量挂在到window对象上

例如:第三方库Lodash.js,moment.js等等

main.js

Vue中建立全局引用或者全局命令的方法

xxx.vue

Vue中建立全局引用或者全局命令的方法

注意:这种方式不适合服务端渲染,服务端并没有window对象

强调一点:以上所有的引入都必须通过入口JS文件去引入,这样才能适用于全局

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript function、指针及内置对象
Feb 19 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
JavaScript 闭包的使用场景
Sep 17 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 Javascript
JS实现身份证输入框的输入效果
Aug 21 #Javascript
Vue自定义指令使用方法详解
Aug 21 #Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 #Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 #Javascript
JavaScript中各数制转换全面总结
Aug 21 #Javascript
JQuery判断正整数整理小结
Aug 21 #jQuery
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 #Javascript
You might like
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
netbeans7安装python插件的方法图解
2013/12/24 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
开学寄语大全
2014/04/08 职场文书
股东授权委托书范本
2014/09/13 职场文书
一份文言文检讨书
2014/09/13 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL