© fengyu学习
不出所料，上班果然放松了我学习的心底防线
这篇文章是工作日写好了大半的，今天整理出来，和大家一块分享一下
今天的主要学习内容：Vue.js bind指令 与 DOM 样式不得不说的秘密
1、Vue.js bind指令 与 DOM 样式不得不说的秘密
仔仔细细的看了一遍 Class-Style这一章教程！
发现一个样式都快被绑定出花来，毕竟样式是前端3大模块的一部分，壮哉我大CSS。
既然是绑定样式，怎么能没有样式代码呢！
<style>
.a{
color: red;
}
.b{
background-color: green;
}
</style>
好吧，请略过我毫无语义的 className，欣赏一下我的配色方案 red + green better than dog XXX 。
下面让我们看看以下这5种绑定样式的方法吧
让我们先看1、2两种方式：
<div id="vue_demo" :class="{'a':a, 'b':b}">
{{content}}
</div>
<script>
var demo = new Vue({
el: '#vue_demo',
data: {
a: true,
b: false,
content: '第一种bind绑定样式方式, class="{\'类名\':true|false, …… }"'
}
})
</script>
<div id="vue_demo1" :class="myClass">
{{ content }}
</div>
<script>
var demo1 = new Vue({
el: '#vue_demo1',
data: {
myClass : {
'a' : true,
'b' : false
},
content: '第二种bind绑定样式方式, class="Vue实例对象的属性值，属性格式为{\'类名\' : true|false}"'
}
})
</script>
-
bind指令绑定样式方式1：
:class="{\'类名\':true|false, …… }" -
bind指令绑定样式方式2：
:class="Vue实例对象的属性值"属性值格式为{\'类名\' : true|false}
相较之下，第二种方式明显更优，因为它可以形成语义！
在两种方式介绍完后，Class-Style教程中，提到了一句话
我们也可以在这里绑定一个返回对象的**计算属性**。这是一个常用且强大的模式。
我顿时蒙了，因为这句话后面，居然没有例子了！
常用而强大的模式。。怎么常用，如何强大，完全不知道！！！！
于是乎，我自己写了一个四不像的例子。
<div id="vue_demo2" :class="myClass">
{{ content }}
</div>
<script>
var demo2 = new Vue({
el: '#vue_demo2',
data: {
style1: {
'a' : true
},
style2: {
'b' : false
},
content: '第三种bind绑定样式方式, class="Vue实例对象的计算值，计算值可由多个样式参数拼接"',
extend: function(o1, o2, override){
var o = {};
var fun = function(arg){
for(key in arg){
if( (!o.hasOwnProperty(key) && arg.hasOwnProperty(key)) || override){
o[key] = arg[key];
}
}
}
fun(o1);
fun(o2);
return o;
},
},
computed: {
myClass: function(){
return this.extend(this.style1, this.style2);
}
}
})
</script>
我按照文章的描述，使用了一个计算属性，作为样式。但是我确实没有发现这么做有什么比第二种方式高大上的地方。
常用而强大的形容，并没有得到良好的体现，而且我自己还被迫实现了一个合并 js 对象的方法
我在这块的疑惑，希望能有小伙伴可以帮我解答一下！
尽管四不像给我带来了疑惑，但我还是得继续把文章看完
看下面这种绑定方式，v-bind + 数组 绑定样式
<div id="vue_demo3" :class="[a,b]">
{{ content }}
</div>
<script>
var demo3 = new Vue({
el: '#vue_demo3',
data: {
a: 'a',
b: 'b',
content: '第四种bind绑定样式方式, class="[Vue对象属性值1，Vue对象属性值2]"'
}
})
</script>
仅仅从数组的角度来看这种方式，其实平淡无奇，但这个时候，我想到文章刚才提到的计算属性，且看我一试_!
<div id="vue_demo4" :class="myClass">
{{ content }}
</div>
<script>
var demo4 = new Vue({
el: '#vue_demo4',
data: {
a: 'a',
b: 'b',
isA : true,
isB : false,
content: '第五种bind绑定样式方式, class="计算属性，值为[Vue对象属性值1, Vue对象属性值2]"'
},
computed: {
myClass : function() {
var myClass = [];
if(this.isA) myClass.push(this.a);
if(this.isB) myClass.push(this.b);
return myClass;
}
}
})
</script>
数组的累加颇为简单，只需要用push方法就可以了，而且我们还可以很清晰的加入判断条件。
哇塞，莫非我主角光环附身了！
我们也可以在这里绑定一个返回对象的**计算属性**。这是一个常用且强大的模式。
指的就是这种用法（个人猜测）！
最后讲一讲利用 v-bind 绑定style属性！
可能大家会很奇怪，既然都用 class 绑定了，何必需要 style 属性再来搅动风云呢？
因为绑定 style 属性居然可以 自动添加样式前缀 。
什么？我没听错吧，真的吗？这么666的功能吗？
让我来测试一下！必须找个浏览器兼容性不是很好的属性，就选 flex 吧！
<div id="vue_demo5" :style="style">
{{ content }}
</div>
<script>
var demo5 = new Vue({
el: '#vue_demo5',
data: {
content: "css 自动添加前缀",
style: {
display: 'flex'
}
}
})
</script>
莫非我手头的浏览器都太新了，没有一点点变化，0.0。。有兴趣的朋友可以自己试试！
2.结语
不提我的惰性导致blog迟迟不写了，讲一些这个礼拜发生的事情吧，生活，学习，工作都有！
1、移动端图片压缩，拍照图片（不论怎么拿着相机拍的）调整为正确的方向！
之前也一直在使用这个工具，兼容性超过一大批百度到的压缩js插件。
think2011编写维护的localResizeIMG
不过iPhone4S 6.2.1系统有个bug，我用自己的思路改了改，至少在我的工程里是好用的
iPhone4S 拍照后预览图片有黑边的bug
题外话，这个js库的最大问题在于内存占用有点高，低端机在webview中可能会在此功能上闪退，我曾试过百度的webuploader，好像在这块处理的比较好。
但是代码有点多，分散在各个模块，我没有研究透，有兴趣的小伙伴可以自己看看！
2、react
公司里决定开始使用react，听到这个消息，我十分开心。这代表前端还是在公司中在持续发展的！
有位大哥分享了react的初学经验，混合讲了一些工程化工具的使用，如webpack。
但是既然我选择了Vue.js就好好的把Vue看完吧。
原文有误：
毕竟这两个东西的思想还是不太一致的，虽然都是MVVM框架！（react不是MVVM框架）
谢谢@阿炎
更正为：
react是一个专注于view层实现、构建组件化UI的js库，他可以搭配Flux，AngularJS，Backbone.js 等来实现一个完整的MVC或者MVVM框架的应用。
有些文章提到Flux并不是一种框架，而是一种模式。这块我自己也没理解清楚，请大家自己甄别！
3、关于生活
这周有个北漂盆友失联了，虽然最后发现是一个乌龙（仅仅是手机很多天没开机）。
但是真的，真的给我很大的触动。
我原来以为一个礼拜不打一个电话也没什么，但是知道他妈妈坐飞机过来找他，各种着急，报警，找人！
最关心你的永远是他们，一定要和家里常联系！
4、打气的话
人心其实很脆弱，所以我们要经常哄哄它，经常把手放在心脏旁，对自己说：Aai izz well，Aai izz well!
非常感谢小伙伴们看完文章！谢谢你们的支持，我会继续努力的！
网友评论