? 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教程中，提到了一句話
我們也可以在這里綁定一個返回對象的**計算屬性**。這是一個常用且強大的模式。
我頓時蒙了，因為這句話后面，居然沒有例子了！
常用而強大的模式。。怎么常用，如何強大，完全不知道?。。。?/p>
于是乎，我自己寫了一個四不像的例子。
<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框架?。╮eact不是MVVM框架）
謝謝@阿炎
更正為：
react是一個專注于view層實現、構建組件化UI的js庫，他可以搭配Flux，AngularJS，Backbone.js 等來實現一個完整的MVC或者MVVM框架的應用。
有些文章提到Flux并不是一種框架，而是一種模式。這塊我自己也沒理解清楚，請大家自己甄別！
3、關于生活
這周有個北漂盆友失聯了，雖然最后發現是一個烏龍（僅僅是手機很多天沒開機）。
但是真的，真的給我很大的觸動。
我原來以為一個禮拜不打一個電話也沒什么，但是知道他媽媽坐飛機過來找他，各種著急，報警，找人！
最關心你的永遠是他們，一定要和家里常聯系！
4、打氣的話
人心其實很脆弱，所以我們要經常哄哄它，經常把手放在心臟旁，對自己說：Aai izz well，Aai izz well!
非常感謝小伙伴們看完文章！謝謝你們的支持，我會繼續努力的！
