詳解.vue文件解析的實現

vue單文件

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

什么是<template/>標簽

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

關于單文件組件

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

在<template/>標簽下只能有一個子節點元素，如果寫多個如<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結構可以寫在<template/>標簽下，而針對該dom結構的樣式文件則作為<template/>標簽的兄弟元素<style/>存在，同樣的控制該dom結構的腳本程序寫在另一個兄弟元素<script/>之中，這樣一來，每個組件自己對應的結構樣式都在同一個文件之中，便不會與其它的組件搞混了。

官方hello.vue實例

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

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

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

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

export default下可以寫哪些東西？

可以寫很多東西，包括變量和方法，對象等，只要是想作為開放的接口都可以寫，在.vue文件中一般寫上data() {}以及method等,data指的是在該組件中定義的模板數據，而如果你對<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不久，相信學習最好的方法便是以戰養戰，不懂的一步步去弄懂相信會很有意思，如果上面出現一些錯誤希望能有人指出來，謝謝~

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。