Vue實戰079：常見的幾種CSS樣式文件引入方式詳解

SS樣式

CSS全稱Cascading Style Sheets（層疊樣式表），用于描述網頁上的信息格式化和顯示的方式。CSS能夠對網頁中元素進行精準控制并提供了豐富的樣式屬性，擁有對網頁對象和模型樣式編輯的能力。通過CSS對HTML標簽元素進行樣式描述可以定義其元素的顯示方式，最終在瀏覽器中顯示成為我們設置的樣式效果。

CSS樣式形式

根據項目的需求不同我們可以將CSS樣式分為3種類型，分別是：外聯css樣式、內聯css樣式和嵌入css樣式。外聯css樣式是引用外部的css文件，借用別人封裝好的樣式文件來達到我們想要的樣式效果，比如Bootstrap就提供了大量現成的樣式，引用Bootstrap可以幫助我們快速得到豐富的頁面效果。內聯css樣式是將樣式聲明在一個專門的CSS文件中，當HTML頁面需要使用時直接引用該樣式即可，這樣也可以提供樣式的復用性，讓多個頁面風格的保持統一。嵌入css樣式則是在HTML標簽元素創建時通過style直接定義當前標簽元素的樣式，或者在HTML文檔中的<head>中使用<style>標簽標記。

外聯樣式引用

這個只要在Vue項目的public目錄中找到index.html模板，在head標簽中通過link來引入外部的樣式文件。href可以連接在線的樣式文件，當然也可以引用本地的樣式文件。這種方式引入的樣式編譯在生成的html文件中，該樣式在整個項目都能夠公用。

內聯樣式引用

這個在Vue中可以全局引用也可以局部模板引用，全局引用的話需要在main.js入口文件中引入。當項目啟動時就會對css文件進行解析，將對應的css代碼插入生成html文件的style標簽中。這里可以將一些全局的或者公共的樣式文件引入，提高代碼的復用性。

Vue模塊中引用

除了在main.js中引入我們還可以在局部模板中引用樣式文件，在對應的模板.vue文件中通過@import ‘樣式文件路徑’。但是這樣引入發現一個問題：該模板標簽元素以上的樣式不生效，改用@import url(樣式文件路徑)后樣式生效了但是在index.html的head上會多出一個空的<style></style>樣式標簽。

嵌入css樣式使用

這個就不存在引入了，直接在當前的模板中編寫樣式即可。vue模板提供了一個style標簽專門用來描述HTML樣式，在style中申明scoped則該樣式只影響到當前頁面。也可以直接在標簽元素中通過style屬性來描述當前元素的樣式，通過屬性綁定的形式，將樣式對象應用到元素中，樣式對象也可以定義在data中，如果需要data上的多個樣式對象則可以在:style中通過數組引用。

總結：

CSS樣式在前端中是必不可少的成員之一，合理的利用樣式可以讓你的項目更加的簡單、快捷、高效。充分利用CSS樣式表的復用可以更大程度的縮減了頁面的體積，減少下載的時間，提升用戶體驗。以上內容是小編給大家分享的【Vue實戰079：常見的幾種CSS樣式文件引入方式詳解】，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。更多Vue實戰技巧可以參考以下專欄：

么是Vue.js

　　Vue.js是一個構建數據驅動的web界面的庫。技術上，它重點集中在MVVM模式的ViewModel層，因此它非常容易學習，非常容易與其它庫或已有項目整合。

　　Vue.js的目標是通過盡可能簡單的API實現響應的數據綁定和組合的視圖組件。

　　Vue.js 的核心是一個響應的數據綁定系統，它讓數據與DOM保持同步非常簡單。在使用jQuery手工操作DOM時，我們的代碼常常是命令式的、重復的與易錯的。Vue.js擁抱數據驅動的視圖概念。通俗地講，它意味著我們在普通HTML模板中使用特殊的語法將DOM “綁定”到底層數據。

安裝

獨立版本

　　直接下載并用 < script > 標簽引入，Vue會被注冊為一個全局變量。如下代碼，這樣就可以在腳本中使用Vue.js了。

<script src="lib/vue.js"></script>

CDN

　　也可以在 jsdelivr或 cdnjs獲取 (版本更新可能會略滯后)。

NPM

　　在用 Vue.js 構建大型應用時推薦使用 NPM 安裝，NPM 能很好地和諸如 Webpack 或 Browserify 的 CommonJS 模塊打包器配合使用。Vue.js 也提供配套工具來開發單文件組件。

$ npm install vue
`# 獲取CSP兼容版本：
`$ npm install vue@csp
`# 獲取最新開發版本(來自于GitHub):
$ npm install yyx990803/vue#dev

Hello World

　　現在就讓我們來寫第一個vue.js的實例。如下代碼：

html代碼：

<div id="demo">
  {{ message }}
</div>

JavaScript代碼:

new Vue({
  el: '#demo',
  data: {
    message: 'Hello World!'
  }
})

　　上面代碼中div中的部分 {{ message }}為數據綁定，我們將會在后面的學習中講到。而vue.js代碼是實例化一個Vue對象。在使用vue之前必須要實例化。

構造器

　　每個Vue.js應用的起步都是通過構造函數Vue創建一個Vue的根實例：

var vm = new Vue({
  // 選項
})

　　一個Vue實例其實正是一個MVVM模式中所描述的 ViewModel - 因此在文檔中經常會使用vm這個變量名。

屬性與方法

　　每個Vue實例都會代理其data對象里所有的屬性，如下代碼：

var data = { a: 1 }
var vm = new Vue({
  data: data
})
//vm.a === data.a  -> true
// 設置屬性也會影響到原始數據
vm.a = 2
// data.a  -> 2
// ... 反之亦然
data.a = 3
//vm.a -> 3

　　注意只有這些被代理的屬性是響應的。如果在實例創建之后添加新的屬性到實例上，它不會觸發視圖更新。

　　除了前面這些數據屬性，Vue 實例還有一些有用的實例屬性與方法。這些屬性與方法都有前綴 $，以便與代理的數據屬性區分。例如：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true

// $watch 是一個實例方法
vm.$watch('a', function (newVal, oldVal) {
  // 這個回調將在 `vm.a`  改變后調用
})

插值

　數據綁定最基礎的形式是文本插值，使用 {{}} 語法（雙大括號）：

<span>Message: {{ msg }}</span>

　　{{ msg }} 標簽會被相應數據對象的 msg 屬性的值替換。每當這個屬性變化時它也會更新。

　　也可以只處理單次插值，今后的數據變化就不會再引起插值更新了：

<span>This will never change: {{* msg }}</span>

如下JavaScript代碼:

var data={msg:'Hello Vue.js!'};
new Vue({
  el: '#demo',
  data: data
 })
data.msg="Hello World!";

原始的HTML

　　雙大括號標簽將數據解析為純文本而不是HTML。為了輸出真的HTML字符串，需要用三大括號標簽：

<div>{{{ msg }}}</div>

　　如下javascript代碼：


var data={msg:'<p>Hello Vue.js!</p>'};
new Vue({
    el: '#demo',
    data: data
   })

HTML特性

　　雙大括號標簽也可以用在 HTML 特性 (Attributes) 內：

<div id="{{ id }}"></div>

javascript代碼如下：

var data={id:'demo'};
new Vue({
  el: 'div',
  data: data
 })

我們去查看HTML源碼，是不是id已經變成我們設置的id了。

JavaScript表達式

　　Vue.js 在數據綁定內支持全功能的JavaScript表達式：

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

過濾器

　　Vue.js 允許在表達式后添加可選的“過濾器 (Filter) ”，以“管道符(|)”指示。過濾器本質上是一個函數，這個函數會接收一個值，將其處理并返回。

{{ message | uppercase }}

　　這里我們將表達式 message 的值“管輸（pipe）”到內置的 uppercase 過濾器，這個過濾器其實只是一個 JavaScript 函數，返回大寫化的值。Vue.js 提供數個內置過濾器，在后面我們會談到如何開發自己的過濾器。

　　可以串聯多個過濾器：

{{ message | filterA | filterB }}

html代碼：　　


<div id='demo'>
<span>{{msg | lowercase | capitalize}}</span>
</div>

javaScript代碼：


 var data={msg:'heLLO!'};
 new Vue({
  el: '#demo',
  data: data
 })

運行結果為：Hello

指令

　　Vue.js指令 (Directives) 是特殊的帶有前綴 v- 的特性。本質是模板中出現的特殊標記，讓處理模板的庫知道需要對這里的DOM元素進行一些對應的處理。指令的職責就是當其表達式的值改變時把某些特殊的行為應用到 DOM 上。

<p v-if="msg">Hello!</p>

　　這里 v-if 指令將根據表達式 msg 值的真假刪除/插入 < p > 元素。

　　在Vue.js中為我們提供了一些指令：v-text，v-html，v-model，v-on，v-else等等，同學們可以去查看Vue.js的指令api(cn.vuejs.org/api/#指令)。

javascript代碼：

 var data={msg:0};
 new Vue({
  el: '#demo',
  data: data
 })

計算屬性

　　在模板中表達式非常便利，但是它們實際上只用于簡單的操作。模板是為了描述視圖的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什么 Vue.js 將綁定表達式限制為一個表達式。如果需要多于一個表達式的邏輯，應當使用計算屬性。

　　在 Vue.js 中，你可以通過 computed 選項定義計算屬性：

<div id="example">
  a={{ a }}, b={{ b }}
</div>
var vm = new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    // 一個計算屬性的 getter
    b: function () {
      // `this` 指向 vm 實例
      return this.a + 1
    }
  }
})

運行結果為：a=1,b=2。

更多內容如 Class 與 Style 綁定、渲染指令、表單控件綁定、自定義指令和過濾器、方法與事件處理器、組件等請參考： http://www.hubwiz.com/course/566e67417e7d40946afc5ddc/

果你是 Vue 開發新手，可能已經聽過很多行話術語，比如單頁面應用程序、異步組件、服務器端渲染，等等。你可能還聽說過與 Vue 有關的一些工具和庫，比如 Vuex、Webpack、Vue CLI 和 Nuxt。

浸沒在術語和工具的浩瀚海洋中難免會令人感到沮喪，但其實并不是只有你一個人有這種感受，所有經驗水平的開發人員都會持續感覺到這種莫名的壓力。

一口氣吃不成胖子，試圖一下子學習所有東西可能是徒勞的，所以我將在這篇文章中展示一個高級“知識地圖”，它包含了與 Vue 開發相關的關鍵領域，你可以使用這張地圖作為 2019 年學習 Vue 的圖鑒。

0. JavaScript 和基本的 Web 開發

如果我要你學習中文書籍中所寫的內容，你首先要學會中文，對吧？

同樣，Vue 是一個用于構建 Web 用戶界面的 JavaScript 框架。在開始使用 Vue 之前，你必須了解 JavaScript 和 Web 開發的基礎知識。

1. Vue 基本概念

如果你是 Vue 開發新手，應該專注于 Vue.js 生態系統的核心，包括 Vue 核心庫、Vue Router 和 Vuex。

這些工具將被用在大多數 Vue 應用程序中，并為本文中提到的其他領域提供了一個構建框架。

Vue 核心功能

從根本上說，Vue 用于同步網頁和 JavaScript。實現這一目標的關鍵特性是反應式（reactive）數據，以及指令和插值等模板功能。這些東西在一開始就要學習。

要構建你的第一個 Vue 應用程序，你還需要知道如何在網頁中安裝 Vue，并了解 Vue 實例的生命周期。

組件

Vue 組件是獨立的可重用 UI 元素。你需要了解如何聲明組件，以及如何通過 prop 和 event 在它們之間發生交互。

了解如何組合組件也很重要，因為這對使用 Vue 構建健壯、可伸縮的應用程序來說至關重要。

單頁面應用程序

單頁面應用程序（SPA）架構通過單個網頁實現傳統多頁面網站一樣的功能，而且不會在每次用戶觸發導航時重新加載和重建頁面。

在將“頁面”構建為 Vue 組件之后，就可以使用 Vue Router 將每個“頁面”映射到一個唯一的路徑，Vue Router 是一個用于構建 SPA 的工具，由 Vue 團隊維護。

狀態管理

隨著應用程序變得越來越大，SPA 頁面中會有很多組件，管理全局狀態變得很困難，而且隨著 prop 和 event 監聽器的增加，組件變得越來越臃腫。

一種稱為“Flux”的特殊模式可以將數據保存在可預測且穩定的中央存儲中。由 Vue 團隊維護的 Vuex 庫可以幫助你在 Vue.js 應用程序中實現 Flux。

2. 現實世界中的 Vue

以上的知識可用于構建高性能的 Vue 應用程序，但如何將它們部署到生產環境中？

如果你想將基于 Vue.js 的產品發送給真實用戶，你還需要了解更多東西！

項目腳手架

如果你經常構建 Vue 應用程序，你會發現幾乎每個項目都需要提供配置、設置和開發者工具。

Vue 團隊維護了一個叫作 Vue CLI 的工具，讓你可以在幾分鐘內啟動一個強大的 Vue 開發環境。

全棧或認證的應用程序

真實的 Vue 應用程序通常是由數據驅動的用戶界面。數據通常來自使用 Node、Laravel、Rails、Django 或其他服務器框架開發的 API。

這些數據可能是由傳統的 REST API 或 GraphQL 提供的數據，也可能是通過 Web 套接字提供的實時數據。

你還需要了解將 Vue 集成到完整技術棧中常用設計模式，以及確保 Vue 應用程序用戶數據的安全性。

測試

如果你想開發出可維護且穩定的 Vue 應用程序，需要對它們進行測試。

在 Vue 應用程序中，可以通過單元測試來確保你的組件能夠為給定輸入（即 prop 或用戶輸入）提供相同的輸出（即重新渲染的 HTML 或發出的事件）。

Vue 團隊維護了一個叫作 Vue Test Utils 的工具，用于測試單獨的 Vue 組件。

優化

當你將應用程序部署到遠程服務器并且用戶通過慢連接訪問它時，它與你在開發環境中測試的速度和效率是不一樣的。

為了優化 Vue 應用程序，我們可以采用各種技術，包括服務器端渲染，也就是在服務器端執行 Vue 應用程序，然后輸出 HTML 頁面并傳給用戶。

其他優化手段還包括使用異步組件和渲染函數。

3. 關鍵的相關工具

到目前為止，我們所看到的一切都來自 Vue.js 核心，或來自生態系統中的工具。但 Vue 不是孤立存在的，它只是前端技術棧中的一層。

高級 Vue 開發人員不僅需要熟悉 Vue，還需要熟悉每個 Vue 項目的關鍵工具。

現代 JavaScript 和 Babel

Vue 應用程序可以使用 ES5 開發，ES5 是幾乎所有瀏覽器都支持的 JavaScript 標準。

要獲得增強的 Vue 開發體驗，并利用新的瀏覽器功能，你可以使用最新的 JavaScript 標準 ES2015 和 ES2016 或更高版本提供的功能來構建 Vue 應用程序。

不過，如果你選擇使用現代 JavaScript，就需要提供一種支持舊版瀏覽器的方法，否則你的產品可能無法為大多數用戶提供服務。

要實現這一目的，需要使用 Babel。它的作用是在應用程序發布之前將你的現代功能“轉換”（翻譯和編譯）為標準功能。

WebPack

Webpack 是模塊捆綁器，如果你的代碼跨越了不同模塊（例如不同的 JavaScript 文件），Webpack 可以將這些零散的代碼“構建”到瀏覽器可讀的單個文件中。

Webpack 還可以作為構建管道，你可以在構建代碼之前對代碼進行轉換，例如使用 Babel、Sass 或 TypeScript，還可以使用一系列插件來優化你的應用程序。

很多開發人員覺得 Webpack 難以掌握，配置起來也很麻煩，但如果沒有它，將無法使用 Vue 的一些有用的功能（如單文件組件）。

最近發布的 Vue CLI 3 提供了一種用于在 Vue 項目中抽象和自動配置 Webpack 的解決方案。

這是否意味著你不需要學習 Webpack 了？當然不是，因為你仍然不可避免地需要進行定制或調試 Webpack 配置。

TypeScript

TypeScript 是 JavaScript 語言的超集，為我們提供了類型（String、Boolean、Number 等），這樣我們就可以編寫健壯的代碼，并盡早發現錯誤。

Vue.js 3 將于 2019 年推出，將完全使用 TypeScript 編寫。但這并不意味著你一定要在你的 Vue 項目中使用它，但如果你想要為 Vue 貢獻代碼，或者想要理解它的內部工作原理，就需要了解 TypeScript。

4. Vue 的框架

構建在 Vue 之上的框架讓你無需從頭開始實現服務器端渲染，還可以創建自己的組件庫以及完成很多其他常見任務。

有很多很好的 Vue 框架，在這里我們只列出使用最為廣泛和最重要的三個框架。

Nuxt.js

如果你想要構建一個高性能的 Vue 應用程序，就需要基于組件的路由、服務器端渲染、代碼拆分和其他尖端的功能。你還需要像 SEO 標簽這樣的功能。

Nuxt.js 通過各種社區插件提供了這些開箱即用的功能，以及更多的功能選項，如 PWA。

Vuetify

谷歌的 Material Design 是一個使用十分廣泛的指南，用于構建漂亮的邏輯用戶界面，并被用在谷歌的產品（如 Android 和 Web）當中。

Vuetify 在一系列 Vue 組件中實現了 Material Design。因此，你可以使用 Material Design 布局和樣式快速構建 Vue 應用程序，以及模態、警報、導航欄、分頁等小部件。

NativeScript-Vue

Vue.js 是一個用于構建 Web 用戶界面的庫。如果你想將它用于原生移動界面，可以使用 NativeScript-Vue 框架。

NativeScript 是一個用于在 iOS 和 Android 上使用原生用戶界面組件構建應用程序的系統，而 NativeScript-Vue 是一個基于 NativeScript 的框架，提供了 Vue 的語法和組件的使用方式。

5. 雜項

在最后一部分，我們將介紹其他一些內容。

插件開發

如果要在項目中重用 Vue 功能或為 Vue 生態系統做貢獻，可以將功能作為 Vue 插件來開發。

動畫

如果你需要使用動畫，請了解一下 Vue 的過渡系統，它也是 Vue 核心的一部分。你可以在向 DOM 添加元素或從 DOM 中刪除元素時應用動畫。

你需要創建 CSS 類來定義所需的動畫效果，無論是淡入淡出、更改顏色還是你喜歡的其他方式。當向 DOM 中添加元素或從 DOM 中刪除元素時，Vue 會檢測到這些變更，并在過渡期間添加或刪除相應的 CSS 類。

漸進式 Web 應用程序

漸進式 Web 應用程序（PWA）就像普通的 Web 應用程序一樣，只是加入了改進的用戶體驗。例如，PWA 可能包括脫機緩存、服務器端渲染、推送通知等。

大多數 PWA 功能可以通過 Vue CLI 3 插件或使用 Nuxt.js 等框架添加到 Vue 應用程序中，但你仍然需要了解一些關鍵技術，包括 Web App Manifest 和 ServiceWorker。

英文原文：

https://vuejsdevelopers.com/2018/12/04/vue-js-2019-knowledge-map/

在線咨詢

上一篇：css怎么引入html
下一篇：textarea中提示文本的實現，默認顯示，點擊消失

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商