学习之路，长路漫漫，写学习笔记的过程就是把知识讲给自己听的过程。这个过程中，我们去记录思考的过程，便于日后复习，梳理自己的思路。学习之乐，独乐乐，不如众乐乐，把知识讲给更多的人听，何乐而不为呢?
- 项目中解决的问题
使用v-bind指令绑定class和style
- 做题思路
给v-bind:class设置一个对象，可以动态地切换class，在Directive.vue组件中完成
<template> <div class="page"> <a v-bind:href="url">链接</a> <!--v-bind可以省略，缩写为 --> <br> <a :href="url">链接</a> <div :class="{ active: isActive }">对象语法</div> </div> </template> <script> export default { data() { return { url: "https://github.com", isActive: true }; } }; </script> <style scoped> .active{ border: 1px solid #000; } </style>
在浏览器中运行，显示效果
类名active依赖于数据isActive，当其为true时，div会拥有类名active的样式，为false时，则没有，所以“对象语法”存在1px的黑色边框。
对象中也可以传入多个属性来动态切换 class。特别强调一点，动态绑定的 class 可以与普通的class共存，
<template> <div class="page"> <!-- 省略部分代码 --> <div :class="{ active: isActive }">对象语法</div> <div class="static" :class="{ active: isActive, danger: hasError }">多个属性的对象语法</div> </div> </template> <script> export default { data() { return { url: "https://github.com", isActive: true, hasError:false }; } }; </script> <style scoped> .static { margin: 5px 0; font-size: 20px; } .active{ border: 1px solid #000; } .danger { background: #ff0; } </style>
:class内的表达式某项为真时，对应的类名就会加载，示例8渲染后的结果为：
<div class="static active">多个属性的对象语法</div>
当数据isActive或hasError变化时，对应的class类型也会更新，比如hasError为true时，渲染后的结果为：
<div class="static active danger">多个属性的对象语法</div>
- 绑定内联样式
使用 v-bind:style（即:style）可以给元素绑定内联样式，方法与:class 类似。也存在对象语法和数组语法，看起来很像在元素上直接写CSS。
在components文件夹下新建BindStyle.vue组件，写入如下示例所示代码，并在路由index.js中进行配置。
<template> <div class="page"> <div :style="{border: activeColor, fontSize: fontSize + 'px'}">绑定内联样式</div> </div> </template> <script> export default { data() { return { activeColor: "1px solid #000", fontSize: 22 }; } }; </script> <style scoped> </style>
CSS属性命名使用驼峰命名法或短横分割法，示例渲染后的结果为：
<div :style="border: 1px solid rgb(0, 0, 0); font-size: 22px;">绑定内联样式</div>
大多数情况下，直接写一长串的样式不便于阅读和维护，因此实际的开发中往往是写在data或者computed计算属性里。
<template> <div class="page"> <div:style="styles">绑定内联样式</div> </div> </template> <script> export default{ data(){ return{ styles:{ border:'1px solid#000', fontSize:22+'px' } }; } }; </script> <style scoped> </style>
总结
指令（Directive）是特殊的带有“v-”前缀的命令，其作用是当表达式的值改变时，将某些行为应用到DOM上。举一个简单的例子，单击某一个按钮，会显示div，再次单击div隐藏，这里就可以通过设置属性的真假，将指令作用到div上来控制显示或隐藏。
为什么要使用指令呢？最重要的原因是使用指令可以简化操作，可以更加方便地完成一些业务代码。例如之前传统开发中的条件判断，一定要写到JavaScript中才能完成，但是现在使用指令就可以完成。
Vue.js指令的书写位置可以是在任意HTML元素的开始标签内，可以写入多个指令，多个指令间使用空格分隔。例如给a标签添加两个指令，分别为v-bind指令和v-on指令。
<a href="#"v-bind:class="{active:timeflag}"v-on:click="queryAll('time')">全部</a>
