vue 使用外部JS与调用原生API操作示例_vue.js

来源:脚本之家  责任编辑:小易  

Vue 的 createElement 方法,简单的封装一个2113组件5261解决问题。解决方法第一4102版代码(直接在操作 Dom )如下:export default {mounted() {const s = document.createElement('script');s.type = 'text/javascript';s.src = 'https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js';document.body.appendChild(s);},}使用 createElement 方法:1653export default {components: {'dingtalk': {render(createElement) {return createElement('script',{attrs: {type: 'text/javascript',src: 'https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js',},},);},},},}// 使用在页面中调用终极方案通过封装一个组件 remote-js 实现:export default {components: {'remote-js': {render(createElement) {return createElement('script', { attrs: { type: 'text/javascript', src: this.src }});},props: {src: { type: String, required: true },},},},}使用方法:<remote-js src="https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js">remote-js>,使用2113Vue真的太棒了,但是也有可能使你头疼,当你试5261图使它与jquery插件4102混用的时候。问题的原因是jquery与Vue是完1653全不同的东西,Vue是通过组件与数据绑定来进行渲染的,jquery则主要是用来做简单的单击处理和强大的操纵DOM的能力。我试图寻找一些东西来帮助自己解决这个问题,但是我发现一些组件所做的工作不是很让我满意,所以让我告诉你怎样使Vue与jquery插件混用。http://www.cnblogs.com/handoing/p/5866830.html本回答被提问者采纳www.zgxue.com防采集请勿采集本网。

本文实例讲述了vue 使用外部JS与调用原生API操作。分享给大家供大家参考,具体如下:

vue-loader么.如果是vue-loader可以通过 require来引入就可以 比如Js文件写到assets/js中 在main.js中可以 require('./src/assets/xxx.js')如果只是单页面html,可以直接引入就行了

vue 使用外部JS

1、首先,打开html编辑器,新建html文件,例如:index.html,引用外部js,例如index.3、在index.html中调用外部js中的aaa()函数。4、浏览器运行index.html页面,此时成功调用外部js中aaa函数打印了内容。

概要

在开发时我们会经常需要使用到外部的JS,这样我们需要引入外部js,然后进行使用。

<script src = \"index_1.js\"type=\"text/javascript\">你这个调copy用的就是外部百js文件index_1.js。度 onmouseover 和onmouseout直接写到问html代码就可以答。header_1{position:absolute;top:40px;

实现方法

alert('调用到了外部的js!');以上将追加<script src=\"diaoyong.js\"type=\"text/javascript\">在A引用的后面 注意:只能等A载入完成后才能载入B,所以A在载入完成后不能马上执行B中的任何代码的,它们间相互

我们在开发的过程中需要使用到 sha256 将用户的密码进行加密传输。

我测试过是正常的。js文件要命名为monthFundPlan.js 放在和html文件同一目录下,其他没什么要注意的了。如果还是不行,可能是浏览器设置的问题。试试把IE的安全选项设置成默认,或者使用别的浏览

我们对js进行一点点改造。

function sha256_digest(data) { sha256_init(); sha256_update(data, data.length); sha256_final(); return sha256_encode_hex();}export {sha256_digest}

像这个代码,我们需要加一行代码,将这个js方法导出。

export {sha256_digest}

在使用的时候我们引入JS.

import { sha256_digest } from "@/assets/sha256.js"

我们可以导入一个或者多个方法,这里导入了一个方法。

这样在代码中使用就好了

sha256_digest(this.user.password)

调用原生API

概要

我们在开发手机端程序的时候了,我们经常需要使用到拍照,二维码的功能.数字天堂公司提供了大量的原生API支持。

http://www.html5plus.org/doc/

实现

1.在hbuilder 选择需要使用的模块

2.在组件代码中调用相应的API接口。

比如拍照:

takePhoto(){ var _self=this; var cmr = plus.camera.getCamera(); var fmt = cmr.supportedImageFormats[0]; cmr.captureImage( function( path ){ plus.io.resolveLocalFileSystemURL(path, function(entry) { var tmpPath= entry.toLocalURL(); var fileAry=[]; fileAry.push(tmpPath); _self.compressImg(fileAry); }) }, function( error ) {}, {format:fmt}); }

plus 就是H5+ 的接口调用。

注意事项

我们在使用这些接口的时候,需要将系统打包成app,否则plus 不能使用。

希望本文所述对大家vue.js程序设计有所帮助。

可以通过npm安装的就安装,在通过Vue.use()插入到vue里使用;如果想单个页面使用的就在使用的.vue页面通过import导入并使用内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • laravel5.5+ 使用api resources快速输出自定义json方法详解
  • 微信支付之jsapi公众号支付详解
  • js使用百度地图api自动获取地址和经纬度操作示例
  • thinkphp框架整合微信支付之jsapi模式图文详解
  • rapidjson解析json代码实例以及常见的json core dump问题
  • c++中rapidjson组装继续简化的方法
  • javascript自定义超时api代码实例
  • 详解vue嵌套路由-query传递参数
  • vue实现图片验证码功能
  • 详解vue2.0组件通信各种情况总结与实例分析
  • vue.js结合bootstrap实现分页控件
  • vue拖拽排序插件vuedraggable使用方法详解
  • 配置一个vue3.0项目的完整步骤
  • 解决vue 更改计算属性后select选中值不更改的问题
  • vue组件的写法汇总
  • 深入理解vue.js中的v-if和v-show
  • vue 自定义 select内置组件
  • vue文件里面怎么引用外部的js文件并调用
  • 如何在.vue文件中引入外部js
  • 怎么调用外部js文件?
  • vue实现路由跳转的原理是什么,是调用js底层什么方法
  • vue中怎么引用外部JS中的变量
  • html如何调用外部js中得方法
  • html如何调用外部js文件,外部的js文件该怎么写,是什么格式的?
  • JS文件中如何调用外部JS文件
  • 关于外部js调用
  • html里面怎么使用外部的js
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库laravel5.5+ 使用api resources快速输出自定义json方法详解微信支付之jsapi公众号支付详解js使用百度地图api自动获取地址和经纬度操作示例thinkphp框架整合微信支付之jsapi模式图文详解rapidjson解析json代码实例以及常见的json core dump问题c++中rapidjson组装继续简化的方法javascript自定义超时api代码实例详解vue嵌套路由-query传递参数vue实现图片验证码功能详解vue2.0组件通信各种情况总结与实例分析vue.js结合bootstrap实现分页控件vue拖拽排序插件vuedraggable使用方法详解配置一个vue3.0项目的完整步骤解决vue 更改计算属性后select选中值不更改的问题深入理解vue.js中的v-if和v-showvue 自定义 select内置组件vue引用js文件的多种方式(推荐)简单理解vue中props属性vue之父子组件间通信实例讲解(prvue props用法详解(小结)vue元素的隐藏和显示(v-show指令vue.js常用指令汇总(v-if、v-fovue 进阶教程之v-model详解使用vue实现图片上传的三种方式vue.js实战之利用vue-router实现vue.js中的图片引用路径的方式vuejs父子组件之间数据交互详解vue 组件间的样式冲突污染浅谈vue-cli加载不到dev-server.js的解决使用vue.js创建一个时间跟踪的单页应用去掉vue 中的代码规范检测两种方法(eslinvue项目中api接口管理总结vue-cli配置flexible过程详解vue采用eventbus实现跨组件通信及注意事项vue开发过程中遇到的疑惑知识点总结vue+element-ui实现分页效果实例代码详解
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved