Vue 組件介紹

.vue 文件是一個自定義的文件類型,用類 HTML 語法描述一個 Vue 組件。
每個 .vue 文件包含三種類型的頂級語言塊 <template>、<script> 和 <style>，還允許添加可選的自定義塊：

開啟預設的檔案：src/components/Hello.vue

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

vue-loader 會解析文件，提取每個語言塊，如有必要會通過其它 loaders 處理，最後將他們組裝成一個 CommonJS 模塊，module.exports 出一個 Vue.js 組件對象。

vue-loader 支持使用非默認語言，比如 CSS 預處理器，預編譯的 HTML 模版語言，通過設置語言塊的 lang 屬性。
例如，你可以像下面這樣使用 SASS 語法編寫 style：

<style lang="sass">
  /* write SASS! */
</style>

語言塊

<template>

  • 默認語言：html。
  • 每個 .vue 文件最多包含一個 <template> 塊
  • 內容將被提取為字符串，將編譯並用作 Vue 組件的 template 選項。

<script>

  • 默認語言：js (ES2015 在檢測到配置 babel-loader 或 buble-loader 時自動支持).
  • 每個 .vue 文件最多包含一個 <script> 塊
  • script 在 CommonJS 環境中執行（就像通過 Webpack 打包的正常 js 模塊），這意味這你可以 require() 其它依賴；在 ES2015 在支持下，你也可以使用 import 和 export 語法。
  • script 必須導出 Vue.js 組件對象。也可以導出由 Vue.extend() 創建的擴展對象，但是普通對像是最好的選擇。

<style>

  • 默認語言： css。
  • 一個 .vue 文件可以包含多個 <style> 標籤。
  • <style> 標籤可以有 scoped 或者 module 屬性 (查看 CSS 作用域 和 CSS 模塊) 以幫助你將樣式封裝到當前組件。多個不同封裝的 <style> 標籤將會混合在一個組件中。
  • 默認情況下內容將會使用 style-loader 提取並通過 <style> 標籤動態加入文檔的 <head> 中，也可以配置 Webpack 將所有 styles 提取到單個 CSS 文件中。

自定義

只在 vue-loader 10.2.0+ 中支持

可以在 .vue 文件中填加額外的自定義塊來實現項目的特定需求，例如 <docs> 塊。
vue-loader 將會使用標籤名來查找對應的 webpack loaders 來應用在對應的塊上。
webpack loaders 需要在 vue-loader的選項 loaders 中指定。

Src 導入

分隔 .vue 文件到多個文件中，可通過 src 屬性導入外部文件：

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

需要注意的是 src 導入遵循和 require() 一樣的規則，這意味著你相對路徑需要以 ./ 開始，你還可以從 NPM 包中直接導入資源，
例如：

<style src="todomvc-app-css/index.css">

在自定義塊上同樣支持 src 導入，
例如：

<unit-test src="./unit-test.js">
</unit-test>

results matching ""

    No results matching ""