Vue Loader 篇(下):編寫一個單文件 Vue 組件

2021-03-02 xueyuanjun
引入 Bootstrap 框架

開始之前,需要添加 Bootstrap 到 Vue CLI 項目,由於目前所有前端資源都已經通過 NPM 進行管理,所以需要安裝對應的依賴包:

npm install bootstrap jquery popper.js

然後在 src/main.js 中引入 Bootstrap 的腳本和樣式文件:

import Vue from 'vue'
import App from './App.vue'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

...

接下來,就可以正式編寫單文件組件了。

編寫 ModalExample 組件

我們將 vue_learning/component/slot.html 中的 modal-example 組件拆分出來,在 vue_learning/demo-project/src/components 目錄下新建一個單文件組件 ModalExample.vue,將 modal-example 組件代碼按照 Vue Loader 指定的格式填充到對應位置:

<template>
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">
            <slot name="header"></slot>
          </h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <ul>
            <li v-for="language in languages" v-bind:key="language.id">
              <slot v-bind:language="language">{{ language.name }}</slot>
            </li>
          </ul>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ModalExample',
  props: ['languages']
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul li {
  text-align: left;
}
</style>

除了父級作用域傳入的 languages 數據結構有所調整外,其他都保持一致,相信有了前面的鋪墊,看懂上面的組件代碼對你而言已經不是什麼難事。

註冊 ModalExample 組件

接下來,我們在 App.vue 中引入 ModalExample 組件:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <hr>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
      模態框
    </button>
    <!-- Modal -->
    <ModalExample :languages="this.languages">
      <template slot="header">{{ this.title }}</template>
      <template scope="bodyProps">
        {{ bodyProps.language.name }}
        <span v-if="bodyProps.language.name === 'PHP'">☑️</span>
      </template>
    </ModalExample>
  </div>
</template>

<script>
import ModalExample from './components/ModalExample.vue'

export default {
  name: 'App',
  data() {
    return {
      'title': 'Web 程式語言',
      'languages': [
        {'id': 1, 'name': 'PHP'},
        {'id': 2, 'name': 'JavaScript'},
        {'id': 3, 'name': 'Golang'}
      ]
    }
  },
  components: {
    ModalExample
  }
}
</script>

...

我們將之前的 HelloWorld 組件調整為 ModalExample 組件,可以看到,這裡只是按照 Vue Loader 單文件組件規範重新編排了代碼,主體邏輯和之前混合在 HTML 文檔中的組件註冊並沒有什麼差別。

驗證單文件組件渲染

需要指出的是,Vue CLI 項目在通過 npm run serve 命令啟動服務時,會附帶開箱即用的模塊熱重載(Hot Module Replacement),所以 src/main.js 及其依賴的任意 JavaScript 代碼(包括單文件 Vue 組件)調整並保存後,會自動進行重新編譯打包。

因此,在瀏覽器刷新 http://localhost:8080 頁面,就可以看到如下頁面渲染結果:

點擊「模態框」按鈕,可以看到彈出的模態框如下,和之前渲染的效果完全一致:

這同時也驗證了 Bootstrap 框架已經成功引入。

當然,這只是一個功能非常簡單的單文件 Vue 組件,接下來,學院君會陸續基於 Vue 組件實現一些更加複雜的功能,比如交互表單、單頁面應用等。

本系列教程首發在Laravel學院(laravelacademy.org),你可以點擊頁面左下角閱讀原文連結查看最新更新的教程。

相關焦點

  • 【Vue.js入門到實戰教程】11-Vue Loader(下)| 編寫一個單文件 Vue 組件
    /App.vue'import 'bootstrap'import 'bootstrap/dist/css/bootstrap.min.css'...接下來,就可以正式編寫單文件組件了。編寫 ModalExample 組件我們將 vue_learning/component/slot.html 中的 modal-example 組件拆分出來,在 vue_learning/demo-project/src/components 目錄下新建一個單文件組件 ModalExample.vue,將 modal-example 組件代碼按照 Vue Loader 指定的格式填充到對應位置
  • vue中組件的使用(下)
    組件系統是vue的一個重要概念。利用它,我們可以將一個大型應用項目簡化成若干層和若干個小的組件模塊,使項目和代碼結構都更加清晰明確,同時這也對項目開發效率和維護成本提供了很有利的幫助。;div>這樣的容器標籤,因為vue規定每個組件必須只有一個根元素。
  • vue-cli安裝步驟詳解
    內容導讀四月份已經要悄悄過去了,從三月份辭職到進入新的公司,一切都顯得特別的快,心情也是越發的靜不下來,趁著今天心情特別輕鬆越快,感緊來寫篇筆記先。腳手架是指通過輸入簡單指令幫助你快速搭建好一個基本環境的工具。
  • webpack的幾個常見loader源碼淺析,以及動手實現一個md2html-loader
    像流水線一樣,挨個處理每個loader,前一個loader的結果會傳遞給下一個loader,最後的 Loader 將處理後的結果以 String 或 Buffer 的形式返回給 compiler。源碼簡析首先看下跳過loader的配置處理,看下babel-loader輸出
  • 想上手Vue2.0,不知道怎麼學效率最高?那就看這篇文章
    想起來自己之前入坑的時候,無意中找到過一篇文章,文章是一個大佬對學習路線的分享。所以這篇文章把這個影響我很久學習進程的內容貼出來,希望可以給更多的人帶來幫助~先貼一下,之前的vue面經文章。Webpack 是一個極其強大同時也複雜的工具,作為起步,理解它的『一切皆模塊』的思想,並基本了解其常用配置選項和 loader 的概念/使用方法即可,比如如何搭配 Webpack 使用 Babel。學習 Webpack 的一個挑戰在於其本身文檔的混亂,建議多搜索搜索,應該還是有質量不錯的第三方教程的。
  • 最全Vue2.0學習路線,各個階段適用
    照著官網上的示例,自己想一些類似的例子,模仿著實現來練手,加深理解,一定要跟著手動敲,比如寫一個編輯器什麼的啦。4. 閱讀官方教程進階篇的前半部分,到『自定義指令 (Custom Directive) 』為止。著重理解 Vue 的響應式機制和組件生命周期。『渲染函數(Render Function)』如果理解吃力可以先跳過。
  • Vue入門10 vue+elementUI
    -- 引入組件庫 --><script src="https://unpkg.com/element-ui/lib/index.js"></script>通過CDN的方式我們可以很容易地使用Element寫出一個Hello world頁面。<!
  • 七種需要避免的Vue.js常見錯誤
    它的作用是通過函數調用的方式,僅替換那些模板字符串,進而創建一個虛擬的DOM節點。該問題未在單文件組件中發生的主要原因是:單文件組件使用了vue-loader和vueify工具。這兩個工具都能夠通過使用渲染函數所定義的模板,來生成簡單的JavaScript組件。因此,要避免該問題,您需要在導入期間指定正確的構建版本。
  • Vue2.0父子組件間通信
    vue2.0Vue.js是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是,Vue 從根本上採用最小成本、漸進增量的設計。Vue 的核心庫只專注於視圖層,並且很容易與其他第三方庫或現有項目集成。另一方面,當與單文件組件和 Vue 生態系統支持的庫結合使用時,Vue 也完全能夠為複雜的單頁應用程式提供有力驅動。
  • Vue.js 2.5 發布,而這個會玩的團隊已經自研出用 Vue 開發小程序的...
    從 Release Notes 可以看到,Vue.js 2.5 有著更好的 TypeScript 集成,更好的錯誤處理,更好地支持單文件組件中的函數式組件以及與環境無關的服務端渲染。它也可以在單文件組件中工作!基於組件的 props 選項,對於 this 中的 props 輸入推斷。最重要的是, 這些改進也使得純 JavaScript 用戶受益匪淺! 如果你使用 VSCode 與超級棒的的 Vetur 擴展,你將獲得大大改進的自動完成建議,甚至在Vue組件中使用純 JavaScript 時也能獲得輸入提示!
  • Vux v0.1.2 發布,基於 Vue 和 WeUI 的 UI 組件庫
    reset樣式可以根據需要自行編寫或者直接引入。具體調整如下:不再需要也不推薦引入vux.css, 這是所有組件的樣式集合手動引入reset樣式或者自行實現vue-cli項目不再需要任何其他樣式,組件裡已經包含了樣式 常規項目需要手動引入每個組件的樣式
  • 推薦8 個漂亮實用的 vue.js 進度條組件
    為大家精心挑選了 8 個漂亮的 Progress Bars 組件,並附上 GitHub 連結和 vue.js 代碼示例,以及Vue3 快速深入全攻略。1.easy-circular-progress一個簡單的循環進度組件,帶有計數效果。
  • Vue2.5+ Typescript 引入全面指南
    Typescript,因此這篇文章更像個入門指引。$/,      loader: 'ts-loader',          exclude: /node_modules/,      options: {              appendTsSuffixTo: [/\.vue$/]      }    }  ]}tsconfig.json項目根路徑下添加文件tsconfig.json
  • 【Vue.js 入門到實戰教程】09-Vue 組件插槽 | 父子組件間的內容分發和插槽作用域
    來源 | https://xueyuanjun.com/post/21939插槽的作用在組件入門這篇教程中,
  • 深入認識 vue-cli:能做的不僅僅是初始化 vue 工程
    藉助 vue-cli,我們通過非常簡單的問答形式,方便地初始化一個vue工程,完全不需要擔心繁複的webpack、eslint配置等等。但是,仍然有許多同學沒有搞清楚 vue-cli和 vue工程之間的關係,導致沒有充分發揮 vue-cli的功能。在這篇文章中,我將從底層原理開始並結合幾個例子,告訴大家 vue-cli還能這樣用。
  • Vue造輪子必備*.vue文件源碼讀取並高亮展示
    實現思路通過  vue-loader 自定義塊 功能,獲取目標文件的文件路徑,然後通過 fs 讀取源碼,再用 @vue/compiler-core 的 API baseParse將讀取到的內容轉換成 AST 語法抽象樹,然後將 fs 讀取的內容中 抽離出 自定義塊內容 和 需要的源碼,最後再將以上兩個內容重新掛到組件對象上,直接讀取組件相應的欄位就可以
  • 什麼是vue?在項目開發中為什麼要用vue?
    在近兩年的web及項目開發中,vue技術的使用越來越普遍,其各種資料、介紹以及使用攻略內容資料非常多,那麼vue到底什麼?在項目開發中,vue起到什麼作用?它與傳統的html+css+js+lamp開發網站項目又有什麼區別呢?
  • Vue-使用vue-video-player組件
    在實際開發過程中會有添加視頻的需求在vue項目中添加視頻可以使用vue-video-player組件來實現實現步驟:1.安裝在控制臺輸入: npm install vue-video-player –s
  • 這些超火的Vue組件你還沒有用過嗎?
    首先,beta 階段意味著: 已合併所有計劃內的 RFC 已實現所有被合併的 RFC Vue CLI 現在通過 vue-cli-plugin-vue-next 提供了實驗性支持 此外還提供了一個用於 Vue 3 的最小化 webpack 配置,支持單文件組件其中有一個主要的
  • 使用Vue CLI和ESRI Loader創建ArcGIS API for JavaScript框架
    安裝最新版本的VUE,執行命令npm install -g @vue/cli查看當前VUE版本,執行命令vue –version 或 vue -V>二、 項目開發框架搭建打開Visual Studio Code,調出終端,輸入vue create arcgis-vue-app 創建項目框架,如下圖所示:切換到項目目錄,然後輸入npm install –save