vue中调用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 组件，它的功能是调用时，页面出现一个半透明遮罩层，页面中间显示入参内容。

步骤如下：

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

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项目 iOS调用JS方法报错找不到方法

项目中需要与H5进行交互，但是在 iOS调用 js方法时出现问题。一直报错找不到js方法。
一开始以为是移动端中注入的方法 和 js方法名不对。经排查，是一致的。
然后排查 注入方法（通过 - (void)evaluatejavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler; 注入）也没有任何问题。

后来发现前端是使用的vue框架，而直接将js方法写在 methods 中，这样造成这个交互js方法是局部的，无法被ios端找到。

解决办法：将iOS需要调用的js方法在 created 和 mounted 方法中暴露在window下，变成全局方法。
window.printText = this.printText()

如果到这里还不行或者有崩溃，请在 window.onload 方法下进行声明

❹ vue中怎么调用js方法

定义Vue全局方法。

• main.js中定义：Vue.prototype.myfunction = function() {/*你的自定义Vue方法*/}

• 子组件调用：this.myfunction();

定义Window对象全局方法。

• 在main.js中定义：window.myfunction = function() {/*你的自定义函数*/}

• 子组件调用：myfunction();

❺ vue中使用moment.js

1.先安装  npm install moment

2.在使用的组件里面引入  var moment = require('moment');

moment().format();
//官网    http://momentjs.cn/docs/#/parsing/

3.将时间戳转为标准日期
let day2 = moment(1632983439000).format("YYYY-MM-DD");

    console.log(day2);

或者转为带T的格式等等

4.再将标准日期转为时间戳

 let day3 = moment(day2).valueOf();

    console.log(day3);
5.默认情况下，moment 会解析并以本地时间显示。

如果要解析或以 UTC 显示 moment，则可以使用 moment.utc() 而不是 moment()。
moment().format(); // 2013-02-04T10:35:24-08:00

moment.utc().format(); // 2013-02-04T18:35:24+00:00
重要的是要注意，尽管上面的显示有所不同，但它们在同一时间都是相同的 moment。

vara = moment();varb = moment.utc();a.format();// 2013-02-04T10:35:24-08:00b.format();// 2013-02-04T18:35:24+00:00a.valueOf();// 1360002924000b.valueOf();// 1360002924000

使用 moment.utc() 创建的任何 moment 都将会处于 UTC 模式中，而使用 moment() 创建的任何 moment 则不会。

❻ 2018-09-06 关于在vue中使用外部js，css的过程

  走访了好几个移动框架，来回切换了几次，发现都不是很适合我使用，要么是组件不够用，要么是组件无法二次封装。我在自己的项目中大多是需要使用框架之样式，所以思来想去还是用比较熟悉的mui移动框架（ 官方网址 ）。但是mui是没法使用npm进行安装的（一大遗憾），思来想去于是将mui框架所需的js,css文件放在static目录下：

在index.html中以静态资源的方式进行引用。

当然想要在组件中直接使用mui这个变量，需要在build/webpack.base.conf.js文件中进行配置

如需引用mui框架的样式只需要引入mui中的class样式

以上是我在项目中遇到问题的一些解决方案，谢谢。

❼ JavaScript怎么在Vue里使用

❽ 如何在.vue文件中引入外部js

Vue 的 createElement 方法，简单的封装一个组件解决问题。

解决方法
第一版代码（直接在操作 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 方法：
export 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>

❾ Vue中用到的一些js基础知识

伪数组：不是一个真正的数组， 但是有 length 属性， 可以通过下标访问。
例如：

[].slice.call(obj)

参见 MDN关于nodeType的资料

IE8不支持Object.defineProperty, 所以在使用了此方法的vue版本中， vue项目不能在IE8上运行

返回所有的自身可枚举属性组成的数组。

返回一个布尔值， 表示prop是否是obj自身的属性

文档碎片
Document: 页面中用于保存多个element的容器，里面的元素如果发生改变， 势必会导致页面发生改变。 如果多个元素发生改变， 势必会影响页面的性能。
DocumentFragment： 内存中用于保存多个变量的容器，内部的元素发生改变， 不会影响界面。不属于dom树的一部分，如果多个元素需要修改内容， 将其放入文档碎片中， 一并修改（修改时不存在性能问题）， 再最终一次渲染到页面上， 可以极大的提升元素修改的性能。

参见 MDN关于文档碎片的说法

while(child=ul.firstChild) 做了两件事：

列表被更新了， 从原来的内容，从变成了 hiahiahia .
上面只有三个 li , 如果是很多给就能省下很多的性能开销。

❿ vue引用public中的js文件

由于一些演示，需要对编码名称等可快速进行修改，需要页面方便配置。由于build后的vue项目基本已经看不出原样，因此需要创建一个文件，并在打包的时候不会进行编译。

例如config.js定义了一个变量叫config，并在index.html页面引入后，那么在页面任何一处地方都可以直接使用。
config.js：

index.html：

页面使用：

在开发环境中，我在public下创建了config.js文件，并且用export default方法进行导出。在页面使用的地方使用import config from XXX进入引入。开发过程中，没有出问题，但是在打包发布以后，发现修改config文件并不生效。

经过排查才意识到：不打包编译的js文件不识别es6语法，并且不应该使用import方法进行引入，应该按照原生的js文件进行使用。

原文地址： https://www.cnblogs.com/luoxuemei/p/11926472.html