vue如何引用`自定义封装的` `.js`文件？

比如一个时间插件，地址联动插件，等等；
因为这些常用插件在任意页面都有可能会用到，这时候需要把它封装成函数，供其他任意页面随意调用。

`如何操作，详细如下。`（注意代码注释部分：注意1/2/3/4/5）

一、效果图预览：

二、以自定义`area.min.js`文件为例：

/*省市区三级联动*/
var areajson = [   // 注意1：// json代码大部分省略 · 仅留一小部分参考如下{  children: [  {  children: [  {  value: "110101",  label: "东城区"  },{  value: "110108",  label: "海淀区"  },   {  value: "110115",  label: "大兴区"  },  {  value: "110116",  label: "怀柔区"  }],  value: "110100",  label: "市辖区"  },  {  children: [  {  value: "110228",  label: "密云县"  },  {  value: "110229",  label: "延庆县"  }  ],  value: "110200",  label: "县"  }  ],  value: "110000",  label: "北京市"  },// 等等······
];
export default areajson;  // 注意2：一定要以export这种方式抛出

三、如何在其他页面引入？

引入代码如下：

<templete><!-- 大部分代码省略 --><el-form-item label="求职地址" :label-width="labelWidth"><el-cascader:options="addressOptions"change-on-select></el-cascader></el-form-item><el-form-item label="" :label-width="labelWidth"><el-input v-model="form.detailaddress" placeholder="请输入求职者求职地域，例如：经开区明珠广场附近" autocomplete="off"></el-input></el-form-item><!-- 省略 -->
</templete>
<script>
import axios from 'axios'
import cityOptions from '../../../static/js/area.min.js'    // 注意3：export default {name: 'shareResume',cityOptions,    // 注意4：data() {return {// 工作地址 addressOptions: cityOptions.areajson,     // 注意5：}}
}

这时候，也 没有必要在main.js中全局引入； 只要你想引用，在任意页面这种方式引入调用都可以。

当然，你也可以在main.js中全局引入【我的一个时间戳格式转化器就是这么定义的。（详情参考相关项目main.js代码）】；

四、针对时间戳格式转化器说几点：

一般封装起来之后，可以把封装之后的.js文件，引入到main.js文件中，
这样其余页面调用的时候，只需要添加this.指针作为前缀，就可以使用封装的.js文件内自定义函数。
具体参考:
项目main.js中的时间戳格式化代码和相关调用页面。

五、参考文章

export和export dafault以及exports和moudle.exports的区别：（3、使用export default 抛出的变量）

以上就是关于“ vue引用自定义.js文件（常量抛出 + 地址三级联动为例）- 语法篇 ” 的全部内容。

vue引用自定义.js文件（常量抛出 + 地址三级联动为例）- 语法篇相关推荐

vue引用自定义.css文件 - 语法篇
vue如何引用外部自定义的.css文件 ? 一般都会因为存在权重或优先级设置的问题才会侧意引用: [详情进入查看:如何在scoped不污染组件样式的前提下,实现el-input组件样式覆盖?] 再者, ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
vue生成静态js文件_如何立即使用Vue.js生成静态网站
vue生成静态js文件 by Ondřej Polesný 通过OndřejPolesný 如何立即使用Vue.js生成静态网站 (How to generate a static website w ...
html调用外部js文件乱码,引用的js文件有中文时乱码
Javascript 代码比较多时,通常把代码保存到一个独立的 js 文件中,这样不但利于减少 html 文件长度好布局修改,而且利于搜索引擎蜘蛛抓取.把 Javascript 代码放到 js 文件后 ...
Angular7中引用外部JS文件
Angular7中引用外部JS文件,步骤如下: 1. 将引入的js文件放到项目的src/assets下 2. 在angular.json文件中找到scripts项并配置js文件的相对路径 3. 在sr ...
一款好用的JS插件xm-select【只需要引用一个JS文件就搞定】
一款好用的JS插件xm-select[只需要引用一个JS文件就搞定] 先上js代码:复制保存直接用 !function(e){var t={};function n(o){if(t[o])return ...
从外部JS文件中获出ASPX页面控件的ClientID
前言当使用MasterPage.UserControl等容器时,为了避免控件的重复命名,asp.net会自动将容器中的控件生成一个ClientID(Control Tree中的可生成,否则不会生成) ...
Vue由本地js中存放的url地址获取图片
Vue由本地js中存放的url地址获取图片对象必须放在js中(而不是json里面,json没有require).如果是在json中,需要采用其他方式去获取注意:url地址必须用这种形式,有requ ...
weui实现移动端地址三级联动，基于js
主要方法 weui.picker(array,{defaultValue: [],//对应选项的值onChange: function (result) {console.log(result)},o ...

vue引用自定义.js文件（常量抛出 + 地址三级联动为例）- 语法篇

文章目录

vue如何引用`自定义封装的` `.js`文件？

`如何操作，详细如下。`（注意代码注释部分：注意1/2/3/4/5）

一、效果图预览：

二、以自定义`area.min.js`文件为例：

三、如何在其他页面引入？

四、针对时间戳格式转化器说几点：

五、参考文章

vue引用自定义.js文件（常量抛出 + 地址三级联动为例）- 语法篇相关推荐

最新文章

热门文章

vue引用自定义.js文件 （常量抛出 + 地址三级联动为例）- 语法篇

文章目录

vue如何引用自定义封装的 .js文件？

如何操作，详细如下。（注意代码注释部分：注意1/2/3/4/5）

一、效果图预览：

二、以自定义area.min.js文件为例：

三、如何 在其他页面引入 ？

四、针对时间戳格式转化器说几点：

五、参考文章

vue引用自定义.js文件 （常量抛出 + 地址三级联动为例）- 语法篇相关推荐

最新文章

热门文章

vue引用自定义.js文件（常量抛出 + 地址三级联动为例）- 语法篇

vue如何引用`自定义封装的` `.js`文件？

`如何操作，详细如下。`（注意代码注释部分：注意1/2/3/4/5）

二、以自定义`area.min.js`文件为例：

三、如何在其他页面引入？

vue引用自定义.js文件（常量抛出 + 地址三级联动为例）- 语法篇相关推荐