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小时内与您取得联系。

整合营销服务商