前端培訓-中級階段（37）- vue 2.x 單文件組件

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，如今前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提高技術水平，打牢基礎知識的中心思想，咱們開課啦（每週四）。

上一節咱們說了 vue 2.x 組件定義和使用、組件間的通訊，這節咱們來講說若是使用單文件組件。

什麼是單文件組件？

咱們以前使用的是全局引用、全局定義的方式。

1. script 引入一個資源，而後全局綁定一個變量。好比 jQuery
2. 而後咱們用引入的資源操做。

由於這樣使用有一些弊端，而後出現了模塊化。
而單文件組件能夠理解爲 Vue 的模塊化使用，他解決了一下問題。

• 全局定義 (Global definitions) 強制要求每一個 component 中的命名不得重複
• 字符串模板 (String templates) 缺少語法高亮，在 HTML 有多行的時候，須要用到醜陋的 \
• 不支持 CSS (No CSS support) 意味着當 HTML 和 JavaScript 組件化時，CSS 明顯被遺漏
• 沒有構建步驟 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用預處理器，如 Pug (formerly Jade) 和 Babel

單文件組件的定義及使用

單文件組件的後綴名爲 .vue，咱們通常經過 webpack 來構建。

一直有個概念頁面爲 結構層（模板 html）、邏輯層（數據 邏輯 js）、表現層（樣式 css），正好這個在 Vue 的單文件組件中獲得了良好的實現。

相比 js 和 css 分家的組件來講。這樣的單文件組件我感受更香呀。

<template>
    <div>這裏是咱們的模板定義的地方。注意只能有一個根節點呀</div>
</template>
<script>
// 這裏是咱們組件的數據部分。
// 這裏不須要template，構建的時候會自動解析上面的模板
// 這裏須要 export default 或者 module.exports ，由於這樣才能夠傳遞出去。
export default {
   
}
</script>
<style scoped>
 /***
  * 這裏能夠放咱們的css，然編譯以後能夠抽離出去。
  * scoped 是讓css 只在當前組件生效
 /
</style>

如何使用

1. webpack
2. vue-loader

固然，vue 也有 Vue-CLI 工具。經過它咱們能夠很快的跑起咱們的頁面。

微信公衆號：前端linong

參考文獻

1. 前端培訓目錄、前端培訓規劃、前端培訓計劃
2. 單文件組件