詳解.vue文件解析的實現(xiàn)

vue單文件

vue是現(xiàn)今非常流行的框架之一，整體給人的感覺就是優(yōu)雅，小巧，最近開始學(xué)習(xí)著使用該框架做一些項目，學(xué)習(xí)，當(dāng)然是從實踐開始，在瀏覽了一遍官方文檔之后，便開始用vue-cli腳手架來快速搭建一個vue項目，從實踐中快速學(xué)習(xí)。在看了一遍項目文件結(jié)構(gòu)后，對于.vue結(jié)尾的單文件卻是有很多不解的地方，具體碰到的問題如下：

什么是<template/>標簽

template是html5的一個新元素，主要用于保存客戶端中的內(nèi)容，表現(xiàn)為瀏覽器解析該內(nèi)容但不渲染出來，可以將一個模板視為正在被存儲以供隨后在文檔中使用的一個內(nèi)容片段。

關(guān)于單文件組件

vue的單文件相當(dāng)于一個頁面中的組件，包含了關(guān)于該組件的html-css-js文件集合，這么做的目的有利于項目的管理和整合，官方說法是有構(gòu)建步驟。

在<template/>標簽下只能有一個子節(jié)點元素，如果寫多個如<div/>這樣的標簽則會報錯，如下所示

<template>
 <div></div>
 <div></div>
</template>

//run --> throw error
-Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

.vue文件可包含html-css-js，webpack自動打包成三個文件？

在.vue文件中，dom結(jié)構(gòu)可以寫在<template/>標簽下，而針對該dom結(jié)構(gòu)的樣式文件則作為<template/>標簽的兄弟元素<style/>存在，同樣的控制該dom結(jié)構(gòu)的腳本程序?qū)懺诹硪粋€兄弟元素<script/>之中，這樣一來，每個組件自己對應(yīng)的結(jié)構(gòu)樣式都在同一個文件之中，便不會與其它的組件搞混了。

官方hello.vue實例

style標簽有哪些屬性？分別是什么意思？

<style/>標簽包含scoped和module屬性，分別表示css作用域和css模塊，一般會寫上scoped屬性，表示樣式僅對當(dāng)前組件以及其子組件的模板部分生效

script標簽中的export default是什么意思？

可以從全文僅有的一張圖中看到，<script/>標簽下第一行代碼是export default {……}，這是ES6新增的模塊部分的語法，采用模塊的方式，每個文件都自成一個模塊，采用export和import來暴露和引用接口。一個文件或模塊中，export 和 import可以有多個，但export default只能有一個，使用該命令之后別的模塊引用時就可以不需要知道所要加載的模塊變量名

export default下可以寫哪些東西？

可以寫很多東西，包括變量和方法，對象等，只要是想作為開放的接口都可以寫，在.vue文件中一般寫上data() {}以及method等,data指的是在該組件中定義的模板數(shù)據(jù)，而如果你對<template/>中的元素綁定了點擊方法，如<button @click="login">，則可如下所示：

<script>
export default {
 name: 'hello',
 data () {
 return {
 msg: 'Welcome to Your Vue.js App'
 }
 },
 methods: {
 login: function() {
 console.log(this.username,this.password);
 }
 }
}
</script>

剛剛接觸vue不久，相信學(xué)習(xí)最好的方法便是以戰(zhàn)養(yǎng)戰(zhàn)，不懂的一步步去弄懂相信會很有意思，如果上面出現(xiàn)一些錯誤希望能有人指出來，謝謝~

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com