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 相关文章推荐
use jscript Create a SQL Server database
Jun 16 Javascript
JavaScript 空位补零实现代码
Feb 26 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
jQuery的运行机制和设计理念分析
Apr 05 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
Ionic如何创建APP项目
Jun 03 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
浅谈Vue 自动化部署打包上线
Jun 14 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
一个用php实现的获取URL信息的类
2007/01/02 PHP
PHP简洁函数小结
2011/08/12 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
非常实用的php验证码类
2016/05/15 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
DEFER怎么用?
2006/07/01 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
原生js实现简单的链式操作
2017/07/04 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
python类继承与子类实例初始化用法分析
2015/04/17 Python
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
Python编码爬坑指南(必看)
2016/06/10 Python
一道python走迷宫算法题
2018/01/22 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
致跳远、跳高运动员广播稿
2014/01/09 职场文书
体育之星事迹材料
2014/05/11 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
车辆转让协议书
2014/09/24 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
教师节寄语2015
2015/03/23 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
JavaScript实现栈结构详细过程
2021/12/06 Javascript
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技