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

vue單文件

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

什么是<template/>標(biāo)簽

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

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

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

在<template/>標(biāo)簽下只能有一個(gè)子節(jié)點(diǎn)元素，如果寫(xiě)多個(gè)如<div/>這樣的標(biāo)簽則會(huì)報(bào)錯(cuò)，如下所示

<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自動(dòng)打包成三個(gè)文件？

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

官方hello.vue實(shí)例

style標(biāo)簽有哪些屬性？分別是什么意思？

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

script標(biāo)簽中的export default是什么意思？

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

export default下可以寫(xiě)哪些東西？

可以寫(xiě)很多東西，包括變量和方法，對(duì)象等，只要是想作為開(kāi)放的接口都可以寫(xiě)，在.vue文件中一般寫(xiě)上data() {}以及method等,data指的是在該組件中定義的模板數(shù)據(jù)，而如果你對(duì)<template/>中的元素綁定了點(diǎn)擊方法，如<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)，不懂的一步步去弄懂相信會(huì)很有意思，如果上面出現(xiàn)一些錯(cuò)誤希望能有人指出來(lái)，謝謝~

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。