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