js文件如何使用vue文件中的方法

1. vue中怎麼調用js方法

定義Vue全局方法。

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

• 子組件調用：this.myfunction();

定義Window對象全局方法。

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

• 子組件調用：myfunction();

2. 我拿到一個js格式的data數據，怎麼引入到vue文件中

一般請求的都是json格式的數據

例如

{
"status":200,
"message":[
{'name':'zs','age':15,'gender':'male'},
{'name':'ls','age':20,'gender':'female'},
{'name':'ww','age':25,'gender':'male'}
]
}

那你就需要發起ajax請求（按需引入axios），分為本地和外部請求(get/post, url等)。

本地json文件放在static文件夾下

created(){
this.$axios.get('static/json/getUser.json')
.then(res=>{
console.log(res.data.message)
console.log(res.data.message[0].name)//輸出zs
console.log(res.data.message[1].age)//輸出20
})
.catch(err=>{
console.log(err)
})
}

3. 2018-09-06 關於在vue中使用外部js，css的過程

  走訪了好幾個移動框架，來回切換了幾次，發現都不是很適合我使用，要麼是組件不夠用，要麼是組件無法二次封裝。我在自己的項目中大多是需要使用框架之樣式，所以思來想去還是用比較熟悉的mui移動框架（ 官方網址 ）。但是mui是沒法使用npm進行安裝的（一大遺憾），思來想去於是將mui框架所需的js,css文件放在static目錄下：

在index.html中以靜態資源的方式進行引用。

當然想要在組件中直接使用mui這個變數，需要在build/webpack.base.conf.js文件中進行配置

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

以上是我在項目中遇到問題的一些解決方案，謝謝。

4. vue中導入外鏈css或js

在vue中導入自定義的css文件或js文件

css文件
在main.js中導入公共的css
import '../static/css/common.css' //引入公用css

在頁面中引入單獨css
<style scoped>
@import '../../static/css/header.css';
</style>

Js文件

自定義js 中寫：
function title(t){
alert(t);
}

export {
title //多個方法在此處json中export出去
}

頁面中使用：
<template>
<div>
<button class="btn" @click="clickme">click me</button>
</div>
</template>
<script>
import {title} from './js/common.js' //可以選擇需要的方法引入
export default {
data(){
return{
}
},
methods:{
clickme(){
title('你點我了');
}
}
}
</script>

或者

import Comjs from './js/common.js' //引入公用js
Vue.prototype.$comjs = Comjs; //添加到vue屬性中

自定義js 中寫：
const comjs = {

}

comjs.title = function (title) {
alert(title)
}

export default comjs;

頁面中使用：
<template>
<div>
<button class="btn" @click="clickme">click me</button>
</div>
</template>

<script>
export default {
data(){
return{
}
},
methods:{
clickme(){
this.$comjs.title('你點我了');
}
}
}
</script>

5. vue文件裡面怎麼引用外部的js文件

• 步驟：

1. 首先。我們要改造我們要映入的外部js文件，改成下面這個格式。主要是紅色方塊內部代碼，我們需要將我們的模塊「拋出」，讓人能獲取到以下及相應代碼：

   

6. 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

7. web前端開之網站搭建框架之vue詳解

網站搭建框架之vue

Vue是web前端快速搭建網站的框架之一。它與jQuery有所不同，是以數據驅動web界面（以操作數據改變頁面，而jQuery是以操作節點來改變頁面），同時，vue還實現了數據的雙向綁定，可及時響應用戶的輸入。最主要的是vue的寫法簡單，容易掌握，組件形式可以大大提高工作效率。

對於vue的使用可以分為兩種使用形式：1.引入vue.js文件，在js中將vue實例化；2.通過node安裝第三方包--vue，搭建腳手架，用腳手架將頁面分成幾個組件編寫，從而利用組件來搭建頁面。

引入vue.js的寫法

Vue分為V層（視圖層）和M層（數據層），一般都是由M層的數據來驅動V層的改變。而vue的常用指令數量不多且寫法簡單。常用的有v-html、v-text、v-show、v-if、v-else、v-for、v-bind:、v-model。v-html和v-text都是將數據寫進標簽內，但它們的不同之處在於v-text會將標簽當做文本內容寫入

，而v-html則會對標簽進行編譯，只顯示標簽內的內容。

至於v-show、v-if、v-else這三個指令都是通過布爾值的判斷來執行的，當布爾值為真時，設置了v-show、v-if指令的標簽會顯示出來，當布爾值為假時，標簽隱藏；而v-else與這兩個指令相反。除此之外，v-show和v-if、v-else之間也有差別，v-show是改變標簽的display屬性來使標簽顯示或隱藏；而v-if、v-else是通過添加或刪除節點，來顯示或隱藏標簽的。

V-for是vue的一種遍歷方法，這個方法極大的簡化了數組或對象的遍歷並顯示到頁面的步驟

而v-bind：是對html屬性或自定義屬性的數據驅動方式，格式為v-bind:href，可簡寫為：href。對於類（class）的操作是通過布爾值來判斷增加或者隱藏類，同時。類和樣式（style）所接受的數據類型為對象。

V-model指令的作用是將數據進行雙向綁定，僅限於輸入類型標簽。當用戶在頁面輸入時，數據層的數據會跟著改變。這是VM模式。由v驅動m。

除了這些普通的指令之外，還有事件指令v-on:，可簡寫為@+事件名，例如：@click，並將執行函數寫到vue的methods中

通過腳手架來寫項目的話，可用通過寫組件，再將組件引入（注冊）到另一個vue文件里拼接在一起，從而構建出一個頁面。

（組件書寫格式）

（組件整合）

（注冊路由）

路由是通過vue-router來實現的，在注冊路由的時候要將router實例化。不同的路由跳轉不同的頁面，這是搭建單頁面應用的優勢。

而父組件與子組件之間的通訊可以通過props將父組件的信息傳遞給子組件，改變子組件的內容，這樣子組件的復用就不會有障礙了，而子組件傳遞信息給父組件或者其他組件的通訊則需vuex。

通過引入vuex並實例化一個Vuex.Store作為一個公共平台，將數據進行傳輸。通過vue的computed方法接收數據，通過methods方法改變數據。而這個公用平台可以實現組件與組件之間的信息傳遞，從而實現組件之間的交互。

通過一個星期的實戰，深深的體會到了vue的優勢，在構建移動端這方面的效率很高。但在搭建的過程中，還是少不了與jQuery結合，畢竟每個工具都有其優點，擇其優而用是明智的選擇。

8. vue 引入js文件中的方法，在html中使用報錯的問題

utils/util.js

index.vue

以上用法會出現報錯：Property or method "timeLength" is not defined

雖然vue組件中HTML，css，js可以在同一個頁面書寫，但是js裡面的函數、變數是需要使用export default{ }拋出之後html才能使用的。

解決方法：
需要在methods裡面再聲明一下這個方法

重新定義一個方法，在這個方法裡面使用它

9. js文件調用vue里methods的方法

提示：因為js里絕大部分的this指向都是window,所以不能直接this.方法() 觸發
因為vue本身就是一個對象
可以直接 vue.方法()來調用