關於.vue文件解析的實現

這篇文章主要介紹了詳解.vue檔案解析的實現，內容挺不錯的，現在分享給大家，也給大家做個參考。

vue單一檔案

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

##什麼是

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

關於單一檔案元件

vue的單一檔案相當於一個頁面中的元件，包含了關於該元件的html -css-js檔案集合，這麼做的目的有利於專案的管理和整合，官方說法是有建構步驟。

在標籤下只能有一個子節點元素，如果寫多個如

這樣的標籤則會報錯，如下所示

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

 

官方hello.vue實例

style標籤有哪些屬性？分別是什麼意思？

標籤包含scoped和module屬性，分別表示css作用域和css模組，一般會寫上scoped屬性，表示樣式只對目前元件以及其子元件的模板部分生效

script標籤中的export default是什麼意思？

可以從全文僅有的一張圖中看到，<script></script>標籤下第一行程式碼是export default {…}，這是ES6新增的模組部分的語法，採用模組的方式，每個檔案都自成一個模組，採用export和import來暴露和引用介面。在一個檔案或模組中，export 和import可以有多個，但export default只能有一個，使用該指令之後別的模組引用時就可以不需要知道所要載入的模組變數名稱

export default下可以寫哪些東西？

可以寫很多東西，包括變數和方法，物件等，只要是想作為開放的介面都可以寫，在.vue檔案中一般寫上data() {}以及method等,data指的是該組件中定義的模板數據，而如果你對中的元素綁定了點擊方法，如 ，則可如下所示：

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

剛剛接觸vue不久，相信學習最好的方法便是以戰養戰，不懂的一步步去弄清楚相信會很有意思，如果上面出現一些錯誤希望能有人指出來，謝謝~

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關建議：

VUEJS 2.0 子元件存取/呼叫父元件

關於vue-admin和後端( flask)分離結合的解析

#

以上是關於.vue文件解析的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！