初識 Vue.js 中的 *.Vue文件
什么是Vue.js?
vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架,它采用自底向上增量開發(fā)的設(shè)計(jì)。(自底向上設(shè)計(jì)方法是根據(jù)系統(tǒng)功能要求,從具體的器件、邏輯部件或者相似系統(tǒng)開始,憑借設(shè)計(jì)者熟練的技巧和豐富的經(jīng)驗(yàn),通過對其進(jìn)行相互連接、修改和擴(kuò)大,構(gòu)成所要求的系統(tǒng)。)Vue 的核心庫只關(guān)注視圖層,它不僅易于上手,還便于與第三方庫或既有項(xiàng)目整合。另一方面,當(dāng)與單文件組件和Vue生態(tài)系統(tǒng)支持的庫結(jié)合使用時(shí),Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用程序提供驅(qū)動。
什么是*.vue文件
首先,我們用 vue-cli 腳手架搭建的項(xiàng)目,里面我們已經(jīng)遇到了很多,如 index.vue 或者 App.vue 這一的文件了。這到底是個(gè)什么東西?如果是初次接觸 vue 開發(fā)的同學(xué),可能之前沒有見過這個(gè)東西。*.vue 文件,是一個(gè)自定義的文件類型,用類似HTML的語法描述一個(gè)Vue組件。每個(gè).vue文件包含三種類型的頂級語言塊 <template>, <script> 和 <style>。這三個(gè)部分分別代表了 html,js,css。
其中 <template> 和 <style> 是支持用預(yù)編譯語言來寫的。比如,在我們的項(xiàng)目中,我們就用了 scss 預(yù)編譯,因此,我們是這樣寫的:
<style lang="scss">
html 也有自己的預(yù)編譯語言, vue 也是支持的,不過一般來說,我們前端人員還是比較中意 html 原生語言,所以,我就不過多闡述了。
另外,我在 App.vue 文件中,已經(jīng)用一句 @import "./style/style"; 將我們的樣式給寫到指定的地方去了。所以,在后面所有的我的文章中,是不會出現(xiàn)這個(gè)部分的內(nèi)容的。所有樣式,都會在 src/style/ 文件夾中對應(yīng)的位置去寫。我這樣做的好處是,不需要重復(fù)的引入各種 scss 基礎(chǔ)文件,并且做到了項(xiàng)目的樣式代碼的可管控。
*.vue 文件代碼解析
首先,我們來簡單看一下:
<template> <div> <Header></Header> <div class="article_list"> <ul> <li></li> </ul> </div> <Footer></Footer> </div> </template> <script> import Header from '../components/header.vue' import Footer from '../components/footer.vue' export default { components: { Header, Footer }, data () { return { list: [] } }, created () { this.getData() }, methods: { getData () { this.$api.get('topics', null, r => { console.log(r) }) } } } </script> <style> .article_list {margin: auto;} </style>
以上就是一個(gè)簡單的 *.vue 文件的基本結(jié)構(gòu)。我們一部分一部分的來解釋。
template 部分
以下,我不再稱呼它為 *.vue 文件了。改成為 vue 組件。首先,一個(gè) vue 組件,他的 template 則代表它的 html 結(jié)構(gòu),相信大家可以理解了。但是需要注意的是,我們不是說把代碼包裹在 <template></template> 中就可以了,而是必須在里面方置一個(gè) html 標(biāo)簽來包裹所有的代碼。 本例子中,我們采用了 <div></div>標(biāo)簽。
大家看到 <Header></Header> 這個(gè)代碼的時(shí)候肯定很奇怪,這是個(gè)什么玩意兒。其實(shí),這是一個(gè)自定義組件。我們在其他地方寫好了一個(gè)組件,然后就可以用這種方式引入進(jìn)來。同樣 <Footer></Footer> 也是一個(gè)組件。
script 部分
首先,我們需要兩個(gè)自定義組件,我們先引用進(jìn)來。如下格式,比較好理解吧。
import Header from '../components/header.vue' import Footer from '../components/footer.vue'
其次,除了引用的文件,我們將所有的代碼包裹于如下的代碼中間:
export default { // 這里寫你的代碼,外面要包起來。 }
我們先引入了 Header 和 Footer 這兩個(gè)組件的源文件,接下來,我們要把引用的組件給申明到 components 里面去。這樣,我們就可以在 template 里面使用了。
components: { Header, Footer },
data是我們的數(shù)據(jù)。我們的演示代碼,給了一個(gè) list 的空數(shù)組數(shù)據(jù)。在 template 中,我們可以使用 this.list 來使用我們的數(shù)據(jù)。這個(gè)我們后面的文章中會講到,這里不去深入,認(rèn)識它就可以了。
data () { return { list: [] } },
created 表示當(dāng)我們的組件加載完成時(shí),需要執(zhí)行的內(nèi)容。比如這里,我們就讓組件在加載完成時(shí),執(zhí)行一個(gè)叫 this.getData() 的函數(shù)。另外created是vuejs中的勾子函數(shù)之一。(具體的勾子函數(shù)請參考附錄)
created () { this.getData() },
methods是我們的這個(gè)組件的方法,也可以說是函數(shù)。比如,上面的代碼就表示,我們的組件自定義了一個(gè)叫 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 元素寫一些樣式。如下,我的代碼:
<style> .article_list {margin: auto;} </style>
到這里,我們應(yīng)該對 vue 組件文件有了一定的認(rèn)知。后面的博文中,將會涉及到比較多的各種寫法,因此,建議在閱讀完本文后,花比較多的時(shí)間,去查看 vue 的官方文檔。雖然文檔你不一定能全部看懂,但要有一個(gè)大概的認(rèn)識,否則下面的學(xué)習(xí)將會比較困難。
附錄
勾子,可以理解為vuejs的生命周期,而函數(shù)則是生命周期內(nèi)各個(gè)階段的事件方法。如下圖
總結(jié)
以上所述是小編給大家介紹的初識 Vue.js 中的 *.Vue文件,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
vue element實(shí)現(xiàn)將表格單行數(shù)據(jù)導(dǎo)出為excel格式流程詳解
這篇文章主要介紹了vue element實(shí)現(xiàn)將表格單行數(shù)據(jù)導(dǎo)出為excel格式流程,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12Vue全局監(jiān)測錯誤并生成錯誤日志實(shí)現(xiàn)方法介紹
在做完一個(gè)項(xiàng)目后,之后的維護(hù)尤為重要。這時(shí),如果項(xiàng)目配置了錯誤日志記錄,這樣能大大減少維護(hù)難度。雖然不一定能捕獲到全部的錯誤,但是一般的錯誤還是可以監(jiān)測到的。這樣就不用測試人員去一遍一遍復(fù)現(xiàn)bug了2022-10-10Vue 幸運(yùn)大轉(zhuǎn)盤實(shí)現(xiàn)思路詳解
這篇文章主要介紹了Vue 幸運(yùn)大轉(zhuǎn)盤實(shí)現(xiàn)思路詳解,需要的朋友可以參考下2019-05-05如何在Vue單頁面中進(jìn)行業(yè)務(wù)數(shù)據(jù)的上報(bào)
為什么要在標(biāo)題里加上一個(gè)業(yè)務(wù)數(shù)據(jù)的上報(bào)呢,因?yàn)樵谠蹅兦岸隧?xiàng)目中,可上報(bào)的數(shù)據(jù)維度太多,比如還有性能數(shù)據(jù)、頁面錯誤數(shù)據(jù)、console捕獲等。這里我們只講解業(yè)務(wù)數(shù)據(jù)的埋點(diǎn)。2021-05-05Vue CLI項(xiàng)目 axios模塊前后端交互的使用(類似ajax提交)
這篇文章主要介紹了Vue-CLI項(xiàng)目-axios模塊前后端交互的使用詳解(類似ajax提交),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09