[轉]vue數據綁定(數據,樣式,事件)

時間 2019-12-07

標籤 vue 數據綁定樣式事件简体版

原文原文鏈接

1.mounted 與 methods 與 computed 與 watched區別

From:https://blog.csdn.net/qinlulucsdn/article/details/80473382html

首先講一下vue的生命週期前端

beforecreate : 舉個栗子：能夠在這加個loading事件 vue

created ：在這結束loading，還作一些初始化，實現函數自執行（data數據已經初始化可是 dom結構渲染完成組件沒有加載）git

mounted ：在這發起後端請求，拿回數據，配合路由鉤子作一些事情（dom渲染完成組件掛載完成）github

beforeDestroy：你確認刪除XX嗎？（簡單來講就是組件還存在）chrome

destroyed ：當前組件已被刪除，清空相關內容（組件已經銷燬）express

因此說 mounted 是生命週期方法之一，會在對應生命週期時執行。json

而 methods 是Vue實例對象上綁定的方法，供當前Vue組件做用域內使用，未調用不會執行。後端

而 computed 是計算屬性屬性 method是方法 api

在使用時 computed函數直接使用 method須要加上（）【如method（）】來執行

computed計算的結果若是不發生改變就不會觸發。而methods中通常都是定義的須要事件觸發的一些函數。每次只要觸發事件，就會執行對應的方法。若是把computed中的方法寫到method中會浪費性能。computed必須返回一個值頁面綁定的才能取得值，而methods中能夠只執行邏輯代碼，能夠有返回值，也能夠沒有。

對於watched 屬性監聽須要本身手動去寫監聽的值會大大的浪費必定性能去作監聽這種事情不像computed是自動的

2.1. 什麼是雙向綁定？

From:https://www.cnblogs.com/fly_dragon/p/6218675.html

Vue框架很核心的功能就是雙向的數據綁定。雙向是指：HTML標籤數據綁定到 Vue對象，另外反方向數據也是綁定的。通俗點說就是，Vue對象的改變會直接影響到HTML的標籤的變化，並且標籤的變化也會反過來影響Vue對象的屬性的變化。
這樣以來，就完全變革了以前Dom的開發方式，以前Dom驅動的開發方式尤爲是以jQuery爲主的開發時代，都是dom變化後，觸發js事件，而後在事件中經過js代碼取得標籤的變化，再跟後臺進行交互，而後根據後臺返回的結果再更新HTML標籤，異常的繁瑣。有了Vue這種雙向綁定，讓開發人員只須要關心json數據的變化便可，Vue自動映射到HTML上，並且HTML的變化也會映射回js對象上，開發方式直接變革成了前端由數據驅動的開發時代，遠遠拋棄了Dom開發主導的時代了。

2.2. Vue綁定文本

數據綁定最多見的形式就是使用「Mustache」語法（雙大括號）的文本插值，好比模板引擎：handlebars中就是用的{{}}.
建立的Vue對象中的data屬性就是用來綁定數據到HTML的。參考以下代碼：

<span>Message: {{ msg }}</span>
<script>
  var app = new Vue({         // 建立Vue對象。Vue的核心對象。
    el: '#app',               // el屬性：把當前Vue對象掛載到 div標籤上，#app是id選擇器
    data: {                   // data: 是Vue對象中綁定的數據
      msg: 'Hello Vue!'   // message 自定義的數據
    }
  });
</script>

2.3. 綁定數據中使用JavaScript表達式

對於全部的數據綁定， Vue.js 都提供了徹底的 JavaScript 表達式支持。

<span>Message: {{ msg + ' - ' + name }}</span>
<script>
  var app = new Vue({         // 建立Vue對象。Vue的核心對象。
    el: '#app',               // el屬性：把當前Vue對象掛載到 div標籤上，#app是id選擇器
    data: {                   // data: 是Vue對象中綁定的數據
      msg: 'Hi',              // message 自定義的數據
      name: 'flydragon'       // name自定義的屬性，vue能夠多個自定義屬性，屬性類型也但是複雜類型
    }
  });
</script>

結果：

Hi - flydragon

固然Vue還能夠支持表達中的任何計算、函數處理等。參考下面的綜合點的案例。

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入門之數據綁定-表達式運算</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{ msg + ' - ' + name }}
    <p>
      {{ isOk ? '123' : '456' }}
    </p>
    <p>個人年齡是： {{ age *2 }}</p>
  </div>

  <script>
  var app = new Vue({         // 建立Vue對象。Vue的核心對象。
    el: '#app',               // el屬性：把當前Vue對象掛載到 div標籤上，#app是id選擇器
    data: {                   // data: 是Vue對象中綁定的數據
      msg: 'Hi',              // message 自定義的數據
      name: 'flydragon',
      isOk: true,
      age: 18
    }
  });
  </script>
</body>
</html>

2.4. Vue屬性綁定

Vue中不能直接使用{{ expression }} 語法進行綁定html的標籤，而是用它特有的v-bind指令（就是一種寫法，先按照格式走，具體指令是什麼能夠後續再瞭解）。

綁定的語法結構：

<標籤 v-bind:屬性名="要綁定的Vue對象的data裏的屬性名"></標籤>
例如:
<span v-bind:id="menuId">{{ menuName }}</span>

參考以下代碼案例：

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入門之數據綁定--屬性綁定</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <div v-bind:id="MenuContaineId">
      <a href="#" v-bind:class="MenuClass">首頁</a>
      <a href="#" v-bind:class="MenuClass">產品</a>
      <a href="#" v-bind:class="MenuClass">服務</a>
      <a href="#" v-bind:class="MenuClass">關於</a>
    </div>
  </div>

  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   // data: 是Vue對象中綁定的數據
        MenuClass: 'top-menu',
        MenuContaineId: 'sitemenu'
      }
    });
  </script>
</body>
</html>

2.5. 屬性綁定簡寫

因爲v-bind 使用很是頻繁，因此Vue提供了簡單的寫法，能夠去掉v-bind直接使用:便可。

例如：
<div :id="MenuContaineId">
等價於
<div v-bind:id="MenuContaineId">

2.6. 輸出純HTML

因爲Vue對於輸出綁定的內容作了提早encode，保障在綁定到頁面上顯示的時候不至於被xss攻擊。但某些場景下，咱們確保後臺數據是安全的，那麼咱們就要在網頁中顯示原生的HTML標籤。Vue提供了v-html指令。

<div id="app">
  <div v-bind:id="MenuContaineId" v-html="MenuBody">
  </div>
</div>
<script>
  var app = new Vue({         
    el: '#app',               
    data: {                   // data: 是Vue對象中綁定的數據
      MenuContaineId: 'menu',
      MenuBody: '<p>這裏是菜單的內容</p>'
    }
  });
</script>

結果：

<div id="app">
  <div id="menu">
    <p>這裏是菜單的內容</p>
  </div>
</div>

2.7. 樣式綁定

對於普通的屬性的綁定，只能用上面的講的綁定屬性的方式。而Vue專門增強了class和style的屬性的綁定。能夠有複雜的對象綁定、數組綁定樣式和類。

2.7.1. 綁定樣式對象

常常咱們須要對樣式進行切換，好比：div的顯示和隱藏，某些標籤active等。Vue提供的對象綁定樣式的方式就很容作這些事情。

代碼：
<div v-bind:class="{ active: isActive }"></div>
解釋：
當 isActive爲 true時， div就會具備了active樣式類，若是 isActive爲false，那麼div就去掉active樣式類。

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入門之綁定樣式類</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <style>
  .active {
    background-color: #ccc;
  }
  </style>
</head>
<body>
  <div id="app">
    <div v-bind:id="MenuContaineId" v-bind:class="{ active: isActive }">
      綁定顏色類
    </div>
  </div>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   // data: 是Vue對象中綁定的數據
        MenuContaineId: 'menu',
        isActive: true
      }
    });
  </script>
</body>
</html>

2.7.2. 混合普通的HTML標籤樣式類及綁定樣式對象

v-bind:class 指令能夠與普通的 class 屬性共存。

<div id="app">
  <div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
  </div>
</div>
<script>
  var app = new Vue({         
    el: '#app',               
    data: {                   // data: 是Vue對象中綁定的數據
      isActive: true,
      hasError: false
    }
  });
</script>

結果：

<div id="app">
  <div class="static active">
  </div>  
</div>

2.7.3. 綁定data中的樣式對象

直接在html屬性中的雙引號內寫對象，仍是很不爽，也沒有智能提示，很容易寫錯。 Vue可讓咱們直接把綁定的class字符串指向data的一個對象，這樣就很是方便了，既能夠有智能提示，又能夠很複雜進行編輯，不用擔憂煩人的""了。

<div id="app">
  <div class="static"
     v-bind:class="classObject">
  </div>
</div>
<script>
  var app = new Vue({         
    el: '#app',               
    data: {
      classObject: {
        active: true,
        'text-danger': false
      }
    }
  });
</script>

結果：

<div id="app">
  <div class="static active">
  </div>
</div>

2.7.4. 綁定樣式數組

其實綁定數組，就是綁定樣式對象的延續，看官網的例子代碼吧。

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

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

固然還有不少其餘頗有趣的支持，就不贅述了。

例如:
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
<div v-bind:class="[{ active: isActive }, errorClass]">

2.7.5. 內聯樣式綁定

內聯樣式的綁定，很是相似於樣式類的操做。v-bind:style 的對象語法十分直觀——看着很是像 CSS ，其實它是一個 JavaScript 對象。 CSS屬性名能夠用駝峯式（camelCase）或短橫分隔命名（kebab-case）。

看個例子：

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入門之htmlraw</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <div v-bind:style="{fontSize: size + 'px', backgroundColor: bgcolor, width: width}">
      vue 入門系列教程
    </div>
  </div>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   
        size: 19,
        width: 200,
        bgcolor: 'red'
      }
    });
  </script>
</body>
</html>

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

2.8. 計算屬性

在作數據的綁定的時候,數據要進行處理以後才能展現到html頁面上，雖然vue提供了很是好的表達式綁定的方法，可是隻能應對低強度的需求。好比：把一個日期按照規定格式進行輸出，可能就須要咱們對日期對象作一些格式化的出來，表達式可能就捉襟見肘了。

Vue對象提供的computed屬性，可讓咱們開發者在裏面能夠放置一些方法，協助咱們綁定數據操做，這些方法能夠跟data中的屬性同樣用，注意這些方法用的時候不要加()。例子來了：

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入門之htmlraw</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <table>
      <tr>
        <!-- computed裏面的函數能夠直接當成data裏面的屬性用，很是方便，注意沒有括號！！！-->
        <td>生日</td><td>{{ getBirthday }}</td>
      </tr>
      <tr>
        <td>年齡</td><td>{{ age }}</td>
      </tr>      
      <tr>
        <td>地址</td><td>{{ address }}</td>
      </tr>
    </table>
  </div>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   
        birthday: 914228510514,     // 這是一個日期對象的值：1998年11月1日
        age: 19,
        address: '北京昌平區龍澤飛龍'
      },
      computed: {
        // 把日期換成 常見規格格式的字符串。
        getBirthday: function () {
          var m = new Date(this.birthday);
          return m.getFullYear() + '年' + m.getMonth() +'月'+ m.getDay()+'日';
        }
      }
    });
  </script>
</body>
</html>

2.9. 綁定的數據過濾器

過濾器本質就是數據在呈現以前先進行過濾和篩選。官網上寫的不錯，我就再也不贅述，下面是官網的描述。

Vue.js 容許你自定義過濾器，被用做一些常見的文本格式化。過濾器應該被添加在 mustache 插值的尾部，由「管道符」指示：

{{ message | capitalize }}
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
Vue 2.x 中，過濾器只能在 mustache 綁定和 v-bind 表達式（從 2.1.0 開始支持）中使用，由於過濾器設計目的就是用於文本轉換。爲了在其餘指令中實現更復雜的數據變換，你應該使用計算屬性。

過濾器函數總接受表達式的值做爲第一個參數。
new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
過濾器能夠串聯：
{{ message | filterA | filterB }}
過濾器是 JavaScript 函數，所以能夠接受參數：
{{ message | filterA('arg1', arg2) }}
這裏，字符串 'arg1' 將傳給過濾器做爲第二個參數， arg2 表達式的值將被求值而後傳給過濾器做爲第三個參數。

2.10. 核心：自動響應對象的變化到HTML標籤

上面的例子都是數據對象是寫死在建立的Vue對像上，那若是數據（data）發生改變時會怎樣呢？讓咱們用chrome把上面例子的頁面打開，並打開發者工具控制檯,輸入：app.age = 20 會有什麼狀況發生呢？

在頁面中添加一個按鈕，動態的增長年齡：

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入門之htmlraw</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <table>
      <tr>
        <!-- computed裏面的函數能夠直接當成data裏面的屬性用，很是方便，注意沒有括號！！！-->
        <td>生日</td><td>{{ getBirthday }}</td>
      </tr>
      <tr>
        <td>年齡</td><td>{{ age }}</td>
      </tr>      
      <tr>
        <td>地址</td><td>{{ address }}</td>
      </tr>
    </table>
  </div>

  <!-- 添加下面這行代碼，動態增長 年齡，頁面會有怎樣的變化呢？？ -->
  <button type="button" onclick="app.age+=1;" >加加</button>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   
        birthday: 914228510514,     // 這是一個日期對象的值：1998年11月1日
        age: 19,
        address: '北京昌平區龍澤飛龍'
      },
      computed: {
        // 把日期換成 常見規格格式的字符串。
        getBirthday: function () {
          var m = new Date(this.birthday);
          return m.getFullYear() + '年' + m.getMonth() +'月'+ m.getDay()+'日';
        }
      }
    });
  </script>
</body>
</html>

2.11. 雙向數據綁定

上面的例子咱們大多講的是單向的 js對象向 HTML數據進行綁定，那HTML怎樣向js進行反饋數據呢？ HTML中只有表達能接受用戶的輸入，最簡單的演示雙向綁定的就是文本框了。

Vue提供了一個新的指令：v-model進行雙向數據的綁定，注意不是v-bind。

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入門之htmlraw</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- v-model能夠直接指向data中的屬性，雙向綁定就創建了 -->
    <input type="text" name="txt" v-model="msg">
    <p>您輸入的信息是：{{ msg }}</p>
  </div>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   
        msg: '雙向數據綁定的例子'
      }
    });
  </script>
</body>
</html>

最終的結果就是：你改變input文本框的內容的時候，p標籤中的內容會跟着進行改變，哇是否是很神奇呢...

關於其餘表單的綁定的語法我就不贅述了，仍是參考官網吧，我這裏大部分例子也是來自官網。