vue入門(二) ——監聽屬性，樣式綁定

時間 2019-11-16

標籤 vue 入門監聽屬性樣式綁定简体版

原文原文鏈接

感受寫博客好麻煩的.... 有的很小的知識點，我看的時候是記在筆記本上的，可是如今要再用博客寫一遍，就會整理好久，就想着乾脆簡單一點寫一點籠統的。以及一些須要時間思考的代碼，寫出邏輯javascript

監聽屬性css

用$watch響應數據變化學vue最大的感受就是感受不少指令啊屬性啊跟監聽是同樣的意思，都能實時的感覺到數據，交互性能真的很好，可是久了會有點難區分區別, 先看下面這個例子，是菜鳥給的第一個最簡單的例子html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
 6 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
 7 </head>
 8 <body>
 9 <div id = "app">
10  <p style = "font-size:25px;">計數器: {{ counter }}</p>
11  <button @click = "counter++" style = "font-size:25px;">點我</button>
12 </div>
13 <script type = "text/javascript">
14  var vm = new Vue({
15     el: '#app',
16     data: {
17        counter: 1
18     }
19  });
20  vm.$watch('counter', function(nval, oval) {
21     alert('計數器值的變化 :' + oval + ' 變爲 ' + nval + '!');
22  });
23 </script>
24 </body>
25 </html>

在button按鈕給了一個click事件綁的counter++ ，即直接點擊就counter++，這個時候 counter的監聽那些指令就作不到了，由於它不是在js邏輯里加一，而是在button直接++了，因此能夠用watch來響應數據變化前與變化後。（這裏的代碼形式是 vm.$watch(){} ）vue

由於對這種監聽還不是很能理解，看到菜鳥的一個demo是這樣的：java

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
 6     <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
 7 </head>
 8    <body>
 9       <div id = "computed_props">
10          公里 : <input type = "text" v-model = "kilometers">
11          米 : <input type = "text" v-model = "meters">
12       </div>
13        <p id="info"></p>
14       <script type = "text/javascript">
15          var vm = new Vue({
16             el: '#computed_props',
17             data: {
18                kilometers : 0,
19                meters:0
20             },
21             methods: {
22             },
23             computed :{
24             },
25             watch : {
26                kilometers:function(val) {
27                   this.kilometers = val;
28                   this.meters = val * 1000;
29                },
30                meters : function (val) {
31                   this.kilometers = val/ 1000;
32                   this.meters = val;
33                }
34             }
35          });
36          // $watch 是一個實例方法
37         vm.$watch('kilometers', function (newValue, oldValue) {
38             // 這個回調將在 vm.kilometers 改變後調用
39             document.getElementById ("info").innerHTML = "修改前值爲: " + oldValue + "，修改後值爲: " + newValue;
40         })
41       </script>
42    </body>
43 </html>

而後我想了一下，我以爲v-model也能夠作到，就本身寫了一個同樣功能的demo：數組

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
 6     <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
 7 </head>
 8    <body>
 9       <div id = "computed_props">
10          公里 : <input type = "text" v-model = "kilometers" v-on:input="ki">
11          米 : <input type = "text" v-model = "meters" v-on:input="me">
12       </div>
13 
14       <script type="text/javascript">
15          var vm = new Vue({
16             el:'#computed_props',
17             data:{
18                kilometers:0,
19                meters:0
20             },
21             methods:{
22                ki: function(){
23                   this.meters = this.kilometers*1000
24                },
25                me: function(){
26                   this.kilometers = this.meters/1000
27                }
28             }
29          })
30       </script>
31    </body>
32 </html>

首先 v-on 一開始感受只見到了跟click搭配，可是我這裏是想當我在input框裏輸值的時候觸發事件，因此查了一下，能夠v-on:input ，若是我是在公里那裏觸發事件，那我就處理meter的值，對米的觸發同理緩存

watch監聽的區別就是，我監聽它，而且保持了他們之間的數量關係，就不須要我觸發事件這種事情，它會時刻監聽，不須要特別的去處理數據，且watch是有兩個參數的，就能夠獲得以前的值和後來改變以後的值。因此若是這種狀況要用v-model的話，應該處理的就很複雜，由於改變以前還須要存起來..之類的。app

ps: 非vue的時候，有一個是oninput 跟click一個意思，就是輸入的時候觸發事件，可是在vue裏這樣寫是沒有做用的，且@oninput v-on:oninput 都是不能夠的函數

看了一下別人的博客，講一下本身對於watch method co的區別的理解和別人的博客理解（捂臉...又照搬，看着口語化的部分就是我寫的可能）性能

computed：計算屬性將被混入到 Vue 實例中。全部 getter 和 setter 的 this 上下文自動地綁定爲 Vue 實例。
methods：methods 將被混入到 Vue 實例中。能夠直接經過 VM 實例訪問這些方法，或者在指令表達式中使用。方法中的 this 自動綁定爲 Vue 實例。
watch：是一種更通用的方式來觀察和響應 Vue 實例上的數據變更。一個對象，鍵是須要觀察的表達式，值是對應回調函數。值也能夠是方法名，或者包含選項的對象。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每個屬性。

computed 計算屬性，是頁面加載以後就能夠執行的，賦值什麼的（給我一種onload函數的感受，我也不是很清楚）

methods 是要觸發才執行的一些函數如上述代碼裏的

watch就是響應數據變化，對應一個對象，鍵是觀察表達式，值是對應回調。值也能夠是方法名，或者是對象，包含選項。

因此他們的執行順序爲：默認加載的時候先computed再watch，不執行methods；等觸發某一事件後，則是：先methods再watch。（由於這個時候早就加載完了）

最類似的就是watch和computed，他們兩個對數據都挺敏感，當某一個數據（稱它爲依賴數據）發生變化的時候，全部依賴這個數據的「相關」數據「自動」發生變化，也就是自動調用相關的函數去實現數據的變更。

computed 計算屬性只有在相關的數據發生變化時纔會改變要計算的屬性，當相關數據沒有變化是，它會讀取緩存。而沒必要想 motheds方法和 watch 方法是的每次都去執行函數。因此有一些數據響應仍是用computed會更好（人家博客的例子）

樣式綁定

class屬性綁定：（其實在上一篇裏提到了一個demo v-bind的那個）

v-bind:class 設置對象，能夠動態的切換class true就綁定這個選擇器，用這種樣式

也能夠在對象中傳入更多屬性用來動態切換多個 class 。跟綁定一個有一點點區別，貼上代碼

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
 6 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
 7 <style>
 8 .active {
 9     width: 100px;
10     height: 100px;
11     background: green;
12 }
13 .text-danger {
14     background: red;
15 }
16 </style>
17 </head>
18 <body>
19 <div id="app">
20   <div class="static"  v-bind:class="{ 'active': isActive,'text-danger': hasError }">
21   </div>
23 </div>
24 
25 <script>
26 new Vue({
27   el: '#app',
28   data: {
29     isActive: true,
30     hasError: true
31   }
32 })
33 </script>
34 </body>
35 </html>

第20行是想對兩個選擇器都切換，若是都是true就至關於

1 <div class="static active text-danger"></div

的意思，可是active能夠加引號，也能夠不加，通過實踐，後面的那個選擇器必須得加引號。

也能夠直接綁定數據裏的一個對象：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
 6 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
 7 <style>
 8 .active {
 9     width: 100px;
10     height: 100px;
11     background: green;
12 }
13 .text-danger {
14     background: red;
15 }
16 </style>
17 </head>
18 <body>
19 <div id="app">
20   <div v-bind:class="classObject"></div>
21 </div>
22 
23 <script>
24 new Vue({
25   el: '#app',
26   data: {
27     classObject: {
28       active: true,
29       'text-danger': true
30     }
31   }
32 })
33 </script>
34 </body>
35 </html>

我乍一看的時候，忽然有點看不太懂。如今這個意思就是我直接綁了個classObject（說到了這個，以前看書的時候想起來有個地方駝峯寫法會自動轉化爲），而後把以前那兩個選擇器放在data下面classObject裏

也能夠在這裏綁定返回對象的計算屬性，進階版demo：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
 6 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
 7 <style>
 8 .active {
 9     width: 100px;
10     height: 100px;
11     background: green;
12 }
13 .text-danger {
14     background: red;
15 }
16 </style>
17 </head>
18 <body>
19 <div id="app">
20   <div v-bind:class="classObject"></div>
21 </div>
22 
23 <script>
24 new Vue({
25   el: '#app',
26   data: {
27   isActive: true,
28   error: null
29   },
30   computed: {
31     classObject: function () {
32       return {
33         active: this.isActive && !this.error,
34         'text-danger': this.error && this.error.type === 'fatal',
35       }
36     }
37   }
38 })
39 </script>
40 </body>
41 </html>

==用於通常比較，===用於嚴格比較，==在比較的時候能夠轉換數據類型，===嚴格比較，只要類型不匹配就返回flase。

能夠看到這裏，data裏沒有我所要的選擇器，只有一些判斷用的值（我不知道怎麼描述）而後我經過return的時候計算屬性，（即 this.誰誰巴拉巴拉）而後給選擇器真或假，至於綁定仍是用的classObject 返回對象的計算屬性。（說它是經常使用且強大的計算模式，我暫時想不到它能夠幹嗎用，還沒想到他有啥很好的地方）

能夠把一個數組傳給 v-bind:class 這個很容易理解，activeClass, errorClass所對應的類名在data裏會賦值的，就不涉及true false 直接類

1 <div v-bind:class="[activeClass, errorClass]"></div>

三元來作這個切換也能夠

1 <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>//errorClass 是始終存在的，isActive 爲 true 時添加 activeClass 類

能夠在 v-bind:style 直接設置樣式（內聯）

1 <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鳥教程</div>

也能夠直接綁定到一個樣式對象，v-bind:style 也可使用數組將多個樣式對象應用到一個元素上

注意：當 v-bind:style 使用須要特定前綴的 CSS 屬性時，如 transform ，Vue.js 會自動偵測並添加相應的前綴。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。