vue引用并使用本地js(局部引用,全局引用)

JavaScript021

vue引用并使用本地js(局部引用,全局引用),第1张

common.js 文件

common.js 文件

common.js 文件

common.js 文件

common.js 文件

main.js 文件

common.js 文件

main.js 文件

common.js 文件

main.js 文件

common.js 文件

main.js 文件

vue中引入在线JS(链接型的js、url类型的js)

vue项目中引用并使用本地js

Vue 可以通过全局注册来实现全局组件的功能，比如有这么一个组件 exampleComponent ，如果想把它注册成全局组件的话，只需要在引入 Vue 的文件里调用 Vue.component('example-component',exampleComponent) 来实现，又或者如同大部分 Vue 的 ui框架 那样，直接调用 Vue.use(/* 组件 */) 来实现。

Vue.use() 方法比 Vue.component() 要复杂些，其大致用法如下：

这两种全局注册组件的方法在注册成功后都是通过使用标签名如 <example-component></example-component>来使用的。使用过 element 、 iview 等UI框架的朋友肯定会注意到这么一种比较特殊的组件，如 loading 和 message ，这类组件的使用场景大部分是在js执行环境时要用到，比如请求发送前要出现一个 loading 遮罩层防止用户重复请求，请求成功后这个遮罩层又要消失掉。这种需求若是也用预先在 html 中放置对应组件标签的形式的话，未免显得太过麻烦。所以，为了解决这个问题，有这么一种通过调用 Vue 原型方法来调用组件的方式。如 element 中 this.$message('这是一条消息提示')这样调用后在页面上显示一条消息提示的js方法。

不管什么组件，其本质都是操作DOM，只不过因为直接原生操作 DOM 会对浏览器的开销比较大， Vue 里面使用了一种虚拟dom的技术来尽可能的减少这种开销，而且操作dom虽然是一种很直观的改变显示效果的形式，但操作太过于繁琐。种种原因， Vue 的基本思想就是 数据驱动DOM ，尽量不要去亲手修改 DOM 。但凡事无绝对，上面所说的就是一种不操作 DOM 就难以绕开的一种便捷功能的实现。

那如何实现全局js方法调用组件的功能呢？

要实现这个目的，必须先了解两个东西： vm.$mount 、 Vue.extend() 。

翻看官方文档，找出了这两者的用法如下：

上面两个东西，简单理解就是用 Vue 自身的方法定义一个 html 标签，然后又用 Vue 的方法找到某个特定id的标签，将其内容替换掉。

那么用这两个特性，我们来创建一个能够自定义入参内容的 fullName 组件，它的功能是调用时，页面出现一个半透明遮罩层，页面中间显示入参内容。

步骤如下：