vue 引入外部js文件 - 配置component

15 篇文章 1 订阅
订阅专栏

1.main.js

 

2.importJs.js

// 导入外部js

import Vue from 'vue'

// 导入外部js
import Vue from 'vue'

Vue.component('remote-script', {
    render: function (createElement) {
        var self = this;
        return createElement('script', {
            attrs: {
                type: 'text/javascript',
                src: this.src
            },
            on: {
                load: function (event) {
                    self.$emit('load', event);
                },
                error: function (event) {
                    self.$emit('error', event);
                },
                readystatechange: function (event) {
                    if (this.readyState == 'complete') {
                        self.$emit('load', event);
                    }
                }
            }
        });
    },
    props: {
        src: {
            type: String,
            required: true
        }
    }
});

3.vue使用

<remote-script src="https://pv.sohu.com/cityjson?ie=utf-8"></remote-script>

 

 

4.输出

 

 

Vue中sdk使用方案以及使用nginx代理sdk地址
m0_60821938的博客
05-31 400
一、html页面引入,使用这个页面的功能都会加载这个sdk,代码少,会影响部分不需要使用这个sdk的页面打开速度。nginx代理sdk遇到的小坑,主要是ws服务没生效。如果sdk里面用到其他的还要根据具体情况做处。二、全局组件引入,每个页面引入都需要单独的代码,不会影响部分不需要使用这个sdk的页面打开速度。
vue cli引入微信sdk,完成微信接口调用——模块化复用封装微信sdk
11-04
因为是VUE SPA,所以需要单独写一个模块,是关于调用微信sdk和初始化微信sdk配置的模块。以下是代码,因为微信配置代码太长了,所以稍微做了一下封装
初识Vue.js:从零开始构建你的第一个Vue项目
最新发布
fanchen4139的博客
08-28 1230
初识Vue.js:从零开始构建你的第一个Vue项目
vue 项目如何引入微信sdk,使用微信分享接口
weixin_33712881的博客
12-18 1121
写在前面: 做微信的网页基本上都要接入微信的sdk,我在做的时候,也颇费了一番功夫,然后就想记录一下,供自己日后翻阅,以及让有需要的朋友可以做一下参考,如果喜欢的可以点波赞,或者关注一下,希望可以帮到大家。 本文首发于我的个人blog:obkoro1.com 安装sdk npm install weixin-js-sdk --save 复制代码 开始之前大家可以先读一读微信公众号的 接...
VUE项目引入微信JSSDK 使用微信api
weixin_54397440的博客
05-29 1206
第一个接口 是初始化 ssdk的。第二个接口 是调用微信支付的。
vue 项目如何引入微信sdk接口的方法
前端kk的博客
05-04 4078
做微信的网页基本上都要接入微信的sdk,我在做的时候,也颇费了一番功夫,然后就想记录一下,供自己日后翻阅,以及让有需要的朋友可以做一下参考,如果喜欢的可以点波赞,或者关注一下,希望可以帮到大家。安装sdk?1npm install weixin-js-sdk --save开始之前大家可以先读一读微信公众号的接入文档,vue是单页面项目,比如你想要接入微信分享功能,分享功能在每个路由地址都要有,...
vue引入tt-sdk
zhazhashuai1999的博客
09-13 852
方法一:直接在index.html里面用<script>标签引入 这个方法官方文档有就不多说了 方法二:在vue文件中使用import ... from "..."方法引入 可以先把js文件下载到本地 js文件 在要引用的vue文件引入 import tt from "../../../sdk"; //注意自己的路径 这个时候会有报错,原因是这个js文件不是按es6规范导出的,只需要在文档最后加一行export default tt;即可完美解决 使用效果: ...
vue组件内部引入外部js文件的方法
11-21
本篇将详细介绍三种在Vue组件内部引入外部js文件的方法。 1. 操作DOM引入JS: 这是最简单直接的方式,通过在`mounted`生命周期钩子中动态创建`<script>`标签并将其插入到DOM中。这种方法的代码如下: ```...
vue-mobile-calendar:a vue component of calendar for mobile移动端vue日期选择组件
05-17
外部引用方式,引入目录文件disk/Calendar.umd.min.js [removed][removed] 注意 本次版本升级api与2.x版本不相同,2.x版本api 更新日志 V3.2.1(2019-8-17) [ feat ] 新增日期中显示自定义内容v-slot:day,使用方法...
Vue引入样式文件的方法
12-03
这种方式适用于引入外部的CSS文件,例如全局的基础样式重置文件。例如: ```html <!DOCTYPE html> <meta charset="utf-8"> <title>2imis <div id="app"></div> <!-- built files will be auto injected -...
分享一个Vue的slider组件
08-10
Vue.js 是一款流行的前端JavaScript框架,它以组件化开发、易用性和高性能著称。在Vue生态中,slider组件是常见的交互元素,常用于展示图片轮播、滑动选择器等场景。本篇文章将深入探讨Vue.js中的slider组件及其开发...
vue中使用WX-JSSDK的两种方法(推荐)
01-21
公司最近有微信公众号的需求,那么微信登录授权和如何使用WX-JSSDk实现分享等等肯定是最头疼的问题。本人也是第一次开发微信公众号,在网上看了很多篇博客,最终选定了两种方法,并且亲测有效。 一、通过全局,在router.afterEach中定义 1.首先通过yarn add weixin-js-sdk/ npm i weixin-js-sdk 2.将微信jsdk挂载到全局上 在utils目录下新建WechatPlugin.js WechatPlugin.js import wx from 'weixin-js-sdk' const plugin = { install(Vue) { Vu
Vue 中如何正确引入第三方模块的方法步骤
11-28
方法一:配置 webpack ProvidePlugin 全局引入 假设要使用到 jquery,那么可以通过配置 webpack 的 ProvidePlugin 的插件来全局引入: https://webpack.js.org/plugins/provide-plugin/ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) 方法二:包装成插件在 Vue 中调用 use 方法安装 另外一种比较靠谱的方法是将第三方模块打包成插件,如我需要全局使用 echarts,那么在 src 目录下新建一个 lib,并创建名为
Vue组件封装方案对比——v-if方式与内置component方式_vue component is 与v-if
2401_84446712的博客
04-29 324
可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。:每一种特定的表单控件都有独立的封装组件,易于进行单独的维护和测试。①先单独封装好各种类型的表单控件小组件,②再通过来动态渲染,保证高度的组件复用性和扩展性,并避开v-if判断;组件封装在实现表单动态渲染、实现表单可视化配置这方面的应用会比较丰富和直观一些,正好以上A系统中就采用了v-if方法,而B系统则采用了内置component的方法。
手把手教你写一个Vue组件发布到npm且可外链引入使用
蛙人的博客
03-27 864
前言 我们为什么要写个组件上传到npm镜像上呢,我们肯定遇到过这样一个场景,项目中有很多地方与某个功能相似,你想到的肯定是把该功能封装成Component组件,后续方便我们调用。但是过了一段时间,你的Leader让你去开发另一个项目,结果你在哪个项目中又看见了类似的功能,你这时会怎么做? 你也可以使用Ctrl + c + v大法,拿过来上一个项目封装好的代码,但是如果需求有些变动,你得维护两套项目的代码,甚至以后更多的项目…,这时你就可以封装一个功能上传到你们公司内网的npm上(或者自己的账号上),这样
vue cli引入微信sdk,完成微信接口调用——使用natapp配置本机ip映射(三)
Museions的开心博客
03-19 2879
现在开始设置js接口安全域名!本章节也是非常重要的,安全域名如果可以正常的配置好的话,那么接下来的过程就会很顺利! 好了开始配置js安全域名: 1.首先需要一个内网穿透的网络配置,笔者使用的是natapp 可以注册使用他的免费隧道来做本地ip映射,从而完成域名绑定设置。 2。在网页上面注册设置好ip与端口后,记得复制他提供的token的token下载他的客户端并且使用管理员身份运行。 以下...
Vue 中如何正确引入第三方模块
weixin_33950035的博客
05-04 2589
Vue 中如何正确引入第三方模块 方法一:配置 webpack ProvidePlugin 全局引入 假设要使用到 jquery,那么可以通过配置 webpack 的 ProvidePlugin 的插件来全局引入: webpack.js.org/plugins/pro… new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery'...
[译] Vue.js 优雅地集成第三方 JavaScript
weixin_34357436的博客
03-17 502
原文地址:Sliding In And Out Of Vue.js 原文作者:Kevin Ball 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:LucaslEliane 校对者:Mcskiller, SevenOutman 摘要:Vue.js 的一个主要的优点是可以很好地与其他代码一起工作:也就是说它不仅很容易嵌入到其他的应用程序当中,而且也...
vue引入外部css和js
05-18
Vue可以通过`<link>`标签和`<script>`标签引入外部CSS和JS文件,方法如下: 1. 引入CSS文件Vue组件的模板中使用`<link>`标签引入CSS文件,例如: ```html <!-- your component content here --> ``` ...
写文章

热门文章

  • vue + element + 导入、导出excel表格 117124
  • vue 配置路由 + 用户权限生成动态路由 踩过的那些坑 106109
  • svn 查看项目的 svn 服务器地址 54640
  • 小程序 input 获得焦点,填入内容,取得内容 35167
  • vue + element + CDN 的方式使用 28200

分类专栏

  • 前端那点事 1篇
  • html 21篇
  • html5 6篇
  • css 16篇
  • css框架 4篇
  • js 67篇
  • js框架 - layUi 7篇
  • js框架 - Angular 2篇
  • js框架 - EasyUi 5篇
  • js框架 - Vue 15篇
  • js框架 - React 8篇
  • js框架 - NodeJs 10篇
  • js框架 - 其他 4篇
  • js模块 6篇
  • jsp 8篇
  • 移动端 - 微信开发 9篇
  • 移动端 - 小程序 14篇
  • 移动端 - h5 1篇
  • 后台 - java 13篇
  • 后台 - java jfinal 2篇
  • 后台 - php 11篇
  • 后台 - python 4篇
  • 后台 - python django 26篇
  • 数据库 6篇
  • 其他语言 3篇
  • C/C++ 1篇
  • 代码管理 svn/git 3篇
  • 开发软件配置相关 5篇
  • 前端开发网站资料 2篇
  • 电脑 3篇

最新评论

  • vue this.reload 方法 配置, 优于window.reload()的页面刷新

    TGCF——无所事事: [Vue warn]: Avoid mutating an injected value directly since the changes will be overwritten whenever the provided component re-renders. injection being mutated: "reload" found in

  • python + Apache: CGI下html get 请求

    axing_1314: 直接放在htdocs目录下,可以找到。

  • vue + element + 导入、导出excel表格

    weixin_49529315: _this.reload()这个方法可以不要的吧

  • vue + vant + jq 实际项目开发

    ctotalk: 收了

  • vue + element + CDN 的方式使用

    不忘初心1995: bb的啥呀

大家在看

  • java+vue计算机毕设高校实习管理信息系统【源码+程序+论文+开题】
  • 电动采光排烟天窗有多重,具体荷载重量是多少? 379
  • 屋面通风器安装方案及流程
  • 深度学习之多层感知机代码实现(以手写数字识别MNIST数据集为例) 576
  • 《Spring Boot 应用开发研究》

最新文章

  • cdn方式:vue+jq+vant 问题列表
  • vue + vant + jq 实际项目开发
  • layui项目搭建:href地址不变,仅切换页面部分内容
2022年1篇
2020年5篇
2019年15篇
2018年54篇
2017年160篇
2015年2篇

目录

目录

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值

深圳坪山网站建设公司东营网站建设推广优化厦门网站优化网站优化师职级网站单词优化哪家便宜违法网站优化没成功算犯法吗优化网站流程详解黑龙江省网站seo优化东莞百度网站优化公司付费网站优化的主要方法服务好的机械行业网站优化团队通化网站优化有哪些武汉光谷网站文章优化天镇县网站seo优化排名杨浦网站优化东湖免费的网站优化非凡网站优化网站修改优化技巧盘锦网站优化费用中山专业网站优化方案沛县网站推广优化价格网站企业店铺优化旧网站布局优化方案乌兰察布网站优化怎么做深圳正规网站优化方法优化网站关键词的排名方法驻马店网站优化多少钱网站视频剪辑器开发优化性能网站的搜索优化石景山网站优化建设观澜网站优化香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声卫健委通报少年有偿捐血浆16次猝死汪小菲曝离婚始末何赛飞追着代拍打雅江山火三名扑火人员牺牲系谣言男子被猫抓伤后确诊“猫抓病”周杰伦一审败诉网易中国拥有亿元资产的家庭达13.3万户315晚会后胖东来又人满为患了高校汽车撞人致3死16伤 司机系学生张家界的山上“长”满了韩国人?张立群任西安交通大学校长手机成瘾是影响睡眠质量重要因素网友洛杉矶偶遇贾玲“重生之我在北大当嫡校长”单亲妈妈陷入热恋 14岁儿子报警倪萍分享减重40斤方法杨倩无缘巴黎奥运考生莫言也上北大硕士复试名单了许家印被限制高消费奥巴马现身唐宁街 黑色着装引猜测专访95后高颜值猪保姆男孩8年未见母亲被告知被遗忘七年后宇文玥被薅头发捞上岸郑州一火锅店爆改成麻辣烫店西双版纳热带植物园回应蜉蝣大爆发沉迷短剧的人就像掉进了杀猪盘当地回应沈阳致3死车祸车主疑毒驾开除党籍5年后 原水城县长再被查凯特王妃现身!外出购物视频曝光初中生遭15人围殴自卫刺伤3人判无罪事业单位女子向同事水杯投不明物质男子被流浪猫绊倒 投喂者赔24万外国人感慨凌晨的中国很安全路边卖淀粉肠阿姨主动出示声明书胖东来员工每周单休无小长假王树国卸任西安交大校长 师生送别小米汽车超级工厂正式揭幕黑马情侣提车了妈妈回应孩子在校撞护栏坠楼校方回应护栏损坏小学生课间坠楼房客欠租失踪 房东直发愁专家建议不必谈骨泥色变老人退休金被冒领16年 金额超20万西藏招商引资投资者子女可当地高考特朗普无法缴纳4.54亿美元罚金浙江一高校内汽车冲撞行人 多人受伤

深圳坪山网站建设公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化