【Vue.js 牛刀小试】：第四章 - 页面元素样式的设定

系列目录地址

• 1、基础知识概览
  • 第一章 - 一些基础概念（posted at 2018-10-31）
  • 第二章 - 常见的指令的使用（posted at 2018-11-01）
  • 第三章 - 事件修饰符的使用（posted at 2018-11-02）
  • 第四章 - 页面元素样式的设定（posted at 2018-11-05）

前言

        前端开发中有三大件：HTML、CSS、JavaScript，在前面的学习中，不论是学习 Vue 的指令系统仍是 Vue 的事件修饰符，主要仍是针对的是咱们在前端开发中的 JavaScript 这一块，而在实际的开发中一定会须要涉及到对于页面布局的设计。即便你采用的是使用第三方的 UI 组件，当咱们实际开发中时，仍是须要本身写一些样式去知足本身的需求，如何实如今 Vue 中对元素设置样式则是本章学习的重点

        仓储地址：Chapter01-Rookie Style

干货合集

        咱们知道，为页面的元素设置样式主要有如下的三种方式：

        一、内联样式（行内样式）：即咱们直接在标签元素的 style 属性中设置样式，设置的样式只能做用于当前的元素

        二、内部样式（内嵌样式）：即咱们在页面的 head 标签中使用 style 标签设置的 CSS 样式，它能够应用于当前的整个页面

        三、外部样式：即咱们在须要使用样式的页面的 head 标签中经过 link 导入一个 css 样式文件，或者，咱们也可使用 @import 关键字在 style 标签中引入 CSS 样式文件，所以，使用外部样式方式设置的样式能够整个网站。

        1、经过属性为元素设置 class 样式

        在之前的前端开发中，咱们能够直接在 class 属性中写上须要设置的元素样式，浏览器就会自动帮咱们渲染完成，例如咱们常用到的 Boostrap 这一类的 UI 框架，当咱们在页面中引入了样式文件，再去使用其中的样式，只须要在 class 属性中指明样式名称便可。例以下面的代码中咱们建立了一个固定宽度并支持响应式布局的 div。

<div class="container"></div>
复制代码

        而当咱们想以一样的方法为元素的 class 属性设置样式时，咱们能够发现咱们指望的结果并无出现。打开控制台，咱们能够看到 vue 给咱们提供了一个报错信息：当前实例上找不到名为 textRed 的属性或是方法。经过在以前学习 v-bind 指令的时候了解到，这里绑定的实际上是一个js变量，因此在这里咱们对于样式的绑定并不会生效。

<style> .textRed { color: red } </style>

<h2 :class="textRed"></h2>
复制代码

        一、数组语法

        vue 中给咱们提供了使用数组进行绑定样式的方式，这里咱们能够直接在数组中写上样式的类名便可。注意：这里若是不使用单引号包裹类名，其实表明的仍是一个变量的名称，所以，仍是会出现错误信息。

<style> .textRed { color: red } .textThin { font-weight: 200 } </style>

<div id="app">
    <h2 :class="['textRed','textThin']">我是标题标题标题标题标题标题啊啊啊啊~~~</h2>
</div>
复制代码

        固然，若是你就是想以变量的方式，就须要你先定义好这个变量。

<style> .textRed { color: red } .textThin { font-weight: 200 } </style>

<div id="app">
    <h2 :class="[textRed,textThin]">我是标题标题标题标题标题标题啊啊啊啊~~~</h2>
</div>

<script> var vm = new Vue({ el: '#app', data: { textRed: 'active', textThin: 'text-danger' }, methods: {} }) </script>
复制代码

        当咱们须要设置多个样式时，只须要在这个数组中增长样式类名便可，咱们经过查看元素能够发现，这里已经自动渲染成了浏览器能够识别的写法。可能你会发现，这样写好像没有什么好处啊，反而比以前更麻烦了。不过，在这里咱们可使用三元表达式根据条件切换列表中的 class ，嗯，这种写法原来的写法是不能够的。

<style> .textRed { color: red } .textThin { font-weight: 200 } .textAquamarine { color: aquamarine } </style>

<div id="app">
    <h2 :class="[flag?'textAquamarine':'textRed','textThin']">我是标题标题标题标题标题标题啊啊啊啊~~~</h2>
</div>

<script> var vm = new Vue({ el: '#app', data: { flag: true }, methods: {} }) </script>
复制代码

        在这里，咱们就能够根据 flag 的值去加载不一样的样式。不过当有多个条件 class 时这样写有些繁琐。因此在数组语法中也可使用对象语法：

<h2 :class="[{'textAquamarine':flag,'textRed':!flag},'textThin']">我是标题标题标题标题标题标题啊啊啊啊~~~</h2>
复制代码

        二、对象语法

        在上面的例子的最后，咱们在数组中使用了对象的形式来设置样式，而在 vue 中，咱们也能够直接使用对象的形式来设置样式。此时，对象的属性为样式的类名，value 则为 true or false，当值为 true 时则显示样式。这里，因为对象的属性能够带引号，也可不带引号，因此属性就按照你本身的习惯写法就能够了。

<h2 :class="{textAquamarine:flag,textThin:flag}">我是标题标题标题标题标题标题啊啊啊啊~~~</h2> 
复制代码

        当对象中的属性过多时，若是咱们仍是采用直接所有写到元素上时，势必会显得比较繁琐，这时，咱们一样能够在元素上只写上对象变量就能够了，固然，别忘了在 vue 实例中定义。

<h2 :class="styleObject">我是标题标题标题标题标题标题啊啊啊啊~~~</h2>

<script> var vm = new Vue({ el: '#app', data: { styleObject: { textAquamarine: true, textThin: true } }, methods: {} }) </script>
复制代码

        2、经过属性为元素设置 style 样式

        一、对象语法

        与使用属性为元素设置 class 样式相同，在 vue 中，咱们也可使用对象的方式，为元素设置 style 样式。

        v-bind:style 的绑定对象的语法虽然像 CSS，但其实实质上仍是一个 JavaScript 对象。CSS 属性名能够用驼峰命名法 (camelCase) 或短横线分隔 (kebab-case，需使用单引号括起来) 来命名。

<h2 :style="{color:'aquamarine','font-weight': '200'}">我是标题标题标题标题标题标题啊啊啊啊~~~</h2>
复制代码

        一样的，能够直接绑定一个样式对象变量，这样的话代码看起来也会更简洁美观。

<h2 :style="styleObject">我是标题标题标题标题标题标题啊啊啊啊~~~</h2>

<script> var vm = new Vue({ el: '#app', data: { styleObject: { color: 'aquamarine', 'font-weight':200 } }, methods: {} }) </script>
复制代码

        二、数组语法

        当咱们使用数组的方式为 style 属性设置样式的时候，数组中每一项都是 vue 实例中 data 中的样式对象，即咱们能够设置多个样式对象，经过数组的方式，所有应用到元素上。

<h2 :style="[baseStyle,additionStyle]">我是标题标题标题标题标题标题啊啊啊啊~~~</h2>

<script> var vm = new Vue({ el: '#app', data: { baseStyle: { color: 'aquamarine' }, additionStyle: { 'font-weight': '200' } }, methods: {} }) </script>
复制代码

总结

        一、在 vue 中可使用数组语法、对象语法对绑定的 class、style 属性的元素设定样式。

        对于数组语法来讲，绑定 class 属性的元素在设置样式时在数组中放置的元素为各个样式类的类名（直接放置类名须要加上单引号）；而绑定 style 属性的元素在设置样式时再数组中放置的则是一个个包含样式的对象。

        对于对象语法来讲，绑定 class 属性的元素在设置样式时对象的每个属性为样式类名，对应的属性值则是布尔值，咱们则能够经过更改属性值的 true or false 来设置样式的是否启用；而对于绑定 style 属性的元素在设置样式时，对象中的属性则是一个个的 css 内置属性，而对应的属性值则是这个 css 属性的自定义值。

        二、当 v-bind:style 使用须要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀

占坑

        做者：墨墨墨墨小宇
        我的简介：96年生人，出生于安徽某四线城市，毕业于Top 10000000 院校。.NET程序员，枪手死忠，喵星人。于2016年12月开始.NET程序员生涯，微软.NET技术的坚决坚持者，立志成为云养猫的少年中面向谷歌编程最厉害的.NET程序员。
        我的博客：yuiter.com
        博客园博客：www.cnblogs.com/danvic712