从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

回顾

哈喽大家好，前后端分离系列文章又开始了，今天周一，还是感谢大家花时间来观看我写的博客，周末呢，没有写文章，但是也没有闲着，主要是研究了下遗留问题，看过之前文章的应该知道，之前的在AOP使用Redis缓存的文章里，遗留了一个问题，周末苦思冥想还是不得其法，想了一个馊主意，但是肯定不是最终解决方案，感兴趣的可以看看，地址《框架之十一 || AOP自定义筛选，Redis入门 11.1》，然后呢，剩下的时间，就是简单搭建了下我在以后的Vue实战中用到的一个小项目，我会手把手在一户的文章中讲到，但是还在搭建中，预计下周可以接触到，因为Vue是重新开始的，所以在基础这一块儿说的比较多，主要也是希望都能好好学习下，也是希望能检查下去，看博客园粉丝破百的时候，能不能有啥小福利啥的哈哈哈

言归正传，上文咱们说到了vue基础的第二章 指令和计算属性，因为时间的问题，上次没有说到Class 与 Style 绑定，那今天咱们就简单说说这个绑定样式问题，然后重点说一下 Vue的生命周期，我感觉这个还是比较重要的，因为任何一个Web程序，生命周期都是重中之重，老生常谈的一个话题，今天咱们也说说。然后如果有时间，可以简单说下Vue的两大核心之组件（另一个大家应该也还记得，就是数据驱动，双向数据绑定，就是不用操作DOM的那个，嗯~），好啦，开始今天的讲解吧！

零、今天完成右下角橙色的部分

image

一、动态绑定class和style

之前咱们都已经了解到了，Vue是通过Data来控制DOM的，这样可以减少太多的JS操作，从而达到页面的无缝快速渲染的作用，这是一个很好的想法，我们可以想一下，页面内，除了各种标签的DOM需要操作修改以外，还有哪些因素呢，不过，你应该已经想到了，就是样式！页面的三大元素：HTML+CSS+JS。我们也可以使用相同的办法，通过操作Data来控制样式！对，Vue的设计者们也考虑到了这个问题，所以就出来了动态绑定class和style。操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

1、通过对象的方式动态修改页面内的 class，来实现删除效果

还记得当时我们给 a 标签是如何添加 src 的？对，就是 v-bind ，它就是用来统一操作页面内各种属性的，所以我们要修改 class 和 style 也得使用到 v-bind ，这里我们统一使用他们的缩写 （ ：），

在我们的博客首页 DEMO 中，我们都是通过这样的方法定义一个 class

现在我们需要实现一个删除效果，那就需要给文章列表 list ，动态的增加一个 deleted 的 class ，

   
   


        var vm = new Vue({
            el: '#app',//容器
 data: {
                author: "老张的哲学",
                task: {
                    name: '',//内容为空
                    id: 100,
                    date: " Just Now ",
                    finished: false,
                    deleted: false },
                list: [ //假数据
                    { name: " Vue前篇：ES6初体验 & 模块化编程", id: 9585766, date: "2018年9月5日", finished: false, **deleted: true** },//我们在这里定义一个删除的true
                    { name: "Vue前篇：JS对象&字面量&this", id: 9580807, date: "2018年9月4日", finished: false, deleted: false },
                    { name: " VUE 计划书 & 我的前后端开发简史", id: 9577805, date: "2018年9月3日", finished: false, deleted: false },
                    { name: " DTOs 对象映射使用，项目部署Windows+Linux完整版", id: 3800, date: "2018年9月1日", finished: false, deleted: false },
                    { name: " 三种跨域方式比较，DTOs(数据传输对象)初探", id: 4200, date: "2018年8月31日", finished: false, deleted: false },
                    { name: "VUE 计划书 & 我的前后端开发简史", id: 3200, date: "2018年9月2日", finished: false, deleted: false },
                    { name: "VUE 实战预告", id: 3200, date: "2018年9月12日", finished: false, deleted: false }
                ],
            },

            }
        }); 
    

从代码中我们可看到 :class="{ deleted: item.deleted}"，这是一个通过对象定义样式，第一个 deleted ，就是我们的样式 class ，第二个就是对应我们的 数据属性。deleted 这个 class 存在与否将取决于数据属性 list 中的 item.deleted 是否为 true，如果为 false，那么这个 class 就不会显示，这就达到了一个动态的效果，当然，你也可以在对象中传入更多属性来动态切换多个 class。

我们可以看一看结果：

image

2、通过数组的方式动态修改页面内的 class，主要的多个样式的时候

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

 

     Contact
 
 data: { 
 hrClass: 'hr',
 testClass:'test',

}

运行出来的结果就是酱紫的：

image

因此可以看得出来，数组中的值是我们的 Data 属性值，通过渲染，加载出我们对应的真是 class 值，这个在动态多个绑定的时候，还是很有用的。

3、绑定内联样式style

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

 data: {
  activeColor: 'red',
  fontSize: 30 }

但是这种写法并不是很好，因为会定义很多数据属性，所以我们一般是这么使用的，绑定一个样式对象：

 data: {
  styleObject: {
    color: 'red',
    fontSize: '13px' }
}

这样看起来，像不像我们把