本篇文章給大家分享的是有關(guān) Vue.js 中 *.Vue文件的作用是什么,小編覺得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
成都創(chuàng)新互聯(lián)公司致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營銷,包括網(wǎng)站制作、成都網(wǎng)站建設(shè)、SEO優(yōu)化、網(wǎng)絡(luò)推廣、整站優(yōu)化營銷策劃推廣、電子商務(wù)、移動互聯(lián)網(wǎng)營銷等。成都創(chuàng)新互聯(lián)公司為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制及解決方案,成都創(chuàng)新互聯(lián)公司核心團(tuán)隊10多年專注互聯(lián)網(wǎng)開發(fā),積累了豐富的網(wǎng)站經(jīng)驗,為廣大企業(yè)客戶提供一站式企業(yè)網(wǎng)站建設(shè)服務(wù),在網(wǎng)站建設(shè)行業(yè)內(nèi)樹立了良好口碑。
什么是Vue.js?
vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架,它采用自底向上增量開發(fā)的設(shè)計。(自底向上設(shè)計方法是根據(jù)系統(tǒng)功能要求,從具體的器件、邏輯部件或者相似系統(tǒng)開始,憑借設(shè)計者熟練的技巧和豐富的經(jīng)驗,通過對其進(jìn)行相互連接、修改和擴(kuò)大,構(gòu)成所要求的系統(tǒng)。)Vue 的核心庫只關(guān)注視圖層,它不僅易于上手,還便于與第三方庫或既有項目整合。另一方面,當(dāng)與單文件組件和Vue生態(tài)系統(tǒng)支持的庫結(jié)合使用時,Vue 也完全能夠為復(fù)雜的單頁應(yīng)用程序提供驅(qū)動。
什么是*.vue文件
首先,我們用 vue-cli 腳手架搭建的項目,里面我們已經(jīng)遇到了很多,如 index.vue 或者 App.vue 這一的文件了。這到底是個什么東西?如果是初次接觸 vue 開發(fā)的同學(xué),可能之前沒有見過這個東西。*.vue 文件,是一個自定義的文件類型,用類似HTML的語法描述一個Vue組件。每個.vue文件包含三種類型的頂級語言塊 ,
以上就是一個簡單的 *.vue 文件的基本結(jié)構(gòu)。我們一部分一部分的來解釋。 template 部分 以下,我不再稱呼它為 *.vue 文件了。改成為 vue 組件。首先,一個 vue 組件,他的 template 則代表它的 html 結(jié)構(gòu),相信大家可以理解了。但是需要注意的是,我們不是說把代碼包裹在 中就可以了,而是必須在里面方置一個 html 標(biāo)簽來包裹所有的代碼。 本例子中,我們采用了
大家看到
script 部分
首先,我們需要兩個自定義組件,我們先引用進(jìn)來。如下格式,比較好理解吧。
import Header from '../components/header.vue' import Footer from '../components/footer.vue'
其次,除了引用的文件,我們將所有的代碼包裹于如下的代碼中間:
export default { // 這里寫你的代碼,外面要包起來。 }
我們先引入了 Header 和 Footer 這兩個組件的源文件,接下來,我們要把引用的組件給申明到 components 里面去。這樣,我們就可以在 template 里面使用了。
components: { Header, Footer },
data是我們的數(shù)據(jù)。我們的演示代碼,給了一個 list 的空數(shù)組數(shù)據(jù)。在 template 中,我們可以使用 this.list 來使用我們的數(shù)據(jù)。這個我們后面的文章中會講到,這里不去深入,認(rèn)識它就可以了。
data () { return { list: [] } },
created 表示當(dāng)我們的組件加載完成時,需要執(zhí)行的內(nèi)容。比如這里,我們就讓組件在加載完成時,執(zhí)行一個叫 this.getData() 的函數(shù)。另外created是vuejs中的勾子函數(shù)之一。(具體的勾子函數(shù)請參考附錄)
created () { this.getData() },
methods是我們的這個組件的方法,也可以說是函數(shù)。比如,上面的代碼就表示,我們的組件自定義了一個叫 getData() 的方法函數(shù)。
methods: { getData () { this.$api.get('topics', null, r => { console.log(r) }) } }
更多關(guān)于vue的語法解釋請參見:https://cn.vuejs.org/v2/guide/syntax.html
style 部分
這里比較簡單,就是針對我們的 template 里內(nèi)容出現(xiàn)的 html 元素寫一些樣式。如下,我的代碼:
到這里,我們應(yīng)該對 vue 組件文件有了一定的認(rèn)知。后面的博文中,將會涉及到比較多的各種寫法,因此,建議在閱讀完本文后,花比較多的時間,去查看 vue 的官方文檔。雖然文檔你不一定能全部看懂,但要有一個大概的認(rèn)識,否則下面的學(xué)習(xí)將會比較困難。
附錄
勾子,可以理解為vuejs的生命周期,而函數(shù)則是生命周期內(nèi)各個階段的事件方法。如下圖
以上就是 Vue.js 中 *.Vue文件的作用是什么,小編相信有部分知識點(diǎn)可能是我們?nèi)粘9ぷ鲿姷交蛴玫降摹OM隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。