Vue項目中new?Vue()和export?default{}的區(qū)別說明
new Vue()和export default{}區(qū)別
在生成、導(dǎo)出、導(dǎo)入、使用 Vue 組件的時候,像我這種新手就會常常被位于不同文件的 new Vue() 和 export default{} 搞得暈頭轉(zhuǎn)向。它們含義到底是什么,又有什么異同呢?
new Vue()
首先,Vue 是什么?
我看其他博主的理解,很是贊同-> Vue 就是一個構(gòu)造函數(shù),生成的實例是一個巨大的對象,可以包含數(shù)據(jù)、模板、掛載元素、方法、生命周期鉤子等選項。
所以渲染的時候,可以使用構(gòu)造 Vue 實例的方式來渲染相應(yīng)的 html 頁面:
new Vue({ ? ? el: '#app' ? ? ... })
export default{}
export default{}又是什么呢?
ES6 Module語法中的命令,是為了方便 使用import命令時必須要知道所加載的變量名或函數(shù)名,否則無法加載的問題。
詳情可查看這里
export default命令并不是在每個文件中都是必須的。它的作用只是用于導(dǎo)出模塊,在別的模塊需要調(diào)用這個模塊的時候,可以通過import命令引入使用的。
假設(shè)我們寫了一個單頁面組件 A 文件,而在另一個文件 B 里面需要用到它,那么就要用 ES6 的 import/export 語法 ,在文件 A 中定義輸出接口 export **,在文件 B 中引入 import,然后再生成一個 Vue 實例 new Vue (),把引入的組件用起來,這樣就可以復(fù)用組件 A 去配合文件 B 生成 html 頁面了。
所以經(jīng)過查證,發(fā)現(xiàn)兩者之間是沒有任何聯(lián)系的。
import,export和export default注意問題
A.在公用js中,多個方法需要調(diào)用的話,可以在vue項目中進行export default,拋出一個變量,然后在vue中引入后來調(diào)用使用
1、common.js中
? ? var common = { ? ? //密碼檢測 ? ? ? checkPassword:function(password) { ? ? ? }, ? ? ? //微信環(huán)境支持 ? ? ? verifyWechat:function () { ? ? ? }, ? ? ? // ?手機號碼檢測 ? ? ? checkPhone:function (param_str) { ? ? ? ? } ? ? }; ? ? export default common;
2、在main.js中全局引用
import ?common from ?'../static/js/common' ?Vue.prototype.$common= common;
3、在vue中引用該方法
if(!this.$common.checkPhone(this.nameValue)){ }
B.在公用js中,單個方法需要調(diào)用的話,可以在vue項目中進行export,拋出方法名,然后在vue中引入后來調(diào)用使用
1、common.js中
? ? //密碼檢測 ? ? ? function checkPassword(password) { ? ? ? }, ? ? ? //微信環(huán)境支持 ? ? ? function verifyWechat() { ? ? ? }, ? ? ? // ?手機號碼檢測 ? ? ? function checkPhone(param_str) { ? ? ? ? } ? ? }; ? ? export{ ? ? ? ? common ? ? };
3、在vue中引用該方法
import {common} from ?'../static/js/common' ?if(!common.checkPhone(this.nameValue)){ }
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue無后端配合實現(xiàn)導(dǎo)出功能的示例代碼
這篇文章主要為大家詳細介紹了Vue如何在無后端配合的情況下實現(xiàn)導(dǎo)出功能,文中的示例代碼簡潔易懂,有需要的小伙伴可以跟隨小編一起了解一下2024-01-01解決vue+webpack項目接口跨域出現(xiàn)的問題
這篇文章主要介紹了解決vue+webpack項目接口跨域出現(xiàn)的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08解決elementui上傳組件el-upload無法第二次上傳問題
這篇文章主要介紹了解決elementui上傳組件el-upload無法第二次上傳問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03在Vue-cli里應(yīng)用Vuex的state和mutations方法
今天小編就為大家分享一篇在Vue-cli里應(yīng)用Vuex的state和mutations方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09