初識vue ——總結

Vue 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。

Vue 特色：簡單、易學、更輕量

Vue中經常使用指令

v-model :：雙向數據綁定，通常用於表單元素
v-for :對數組或者對象進行循環操做
v-on :用來綁定事件，用法：v-on:事件="函數"
v-show :用來顯示或者隱藏元素，實質是經過display實現
v-if
...

事件

• 1 事件簡寫
  v-on:事件，簡寫成：@事件名

• 2 事件對象
  vue裏面的事件對象使用event; 這個event包含了事件事件相關的信息，如事件源、事件類型、偏移量等等...

  
  如：點擊按鈕，將對應按鈕的文字返回給我

  <div id="app" >
      <input type="button" value="點我" @click="print($event)">
  </div>
  <script src="vue.js"></script>
  <script type="text/javascript">
      window.onload = function(){
          var vue = new Vue({
              el:"#app",
              methods:{
                  print(event){
                      console.log(event.target.value); 
                  }
              }
         });
  </script>

屬性

• 1 屬性的綁定和簡寫
  v-bind用於屬性綁定，
  格式v-bind:屬性="",可簡寫爲:屬性=""

• 2 class和style屬性
  好比：

  <div id="app">
    <div :class="{ active: isActive }"></div>
  </div>

模板

• 簡介
  Vue使用基於HTML的模板語法，能夠將DOM綁定到Vue實例中的數據模板就是{{}},用來進行數據綁定，顯示在頁面中，這種{{}}(和Angular相同)。
• 數據的綁定方式
  1 雙向綁定 :v-model
  2 單項綁定 :使用{{}}。
• 其餘指令
  v-once 數據只綁定一次
  v-pre 直接原樣顯示

過濾器

與Angular用法相同

<!-- 在雙花括號中 --> 
{{ message | capitalize }}
<!-- 在 `v-bind` 中 --> 
<div v-bind:id="rawId | formatId"></div>

Vue1.0中內置了許多過濾器，如：

capitalize   首字母大寫
uppercase    所有大寫
lowercase    所有小寫
currency     輸出金錢以及小數點
pluralize    變複數
...

在Vue2.0中已經移除了全部內置過濾器。
解決方案：
（1）使用第三方工具庫：如loadash、date-fns日期格式化、accounting貨幣格式化；
（2）使用自定義過濾器；

生命週期

• Vue2.0的生命週期鉤子

  生命週期鉤子	說明
  beforCreate	實例初始化完成
  created	實例化已經完成以後被調用，數據觀測，屬性和方法的運算，watch/event事件回調已完成，掛載還沒還沒開始 $el屬性上尚未
  beforeMount	開始掛載以前調用，相關的render函數首次被調用 此時的DOM是數據掛載前的DOM，數據還未掛載
  mounted	數據已掛載後調用 初始化的el被vm.$el替換，並掛載到實例上去以後的鉤子
  beforeUpdate	數據更新時調用，發生在虛擬DOM從新渲染和打補丁以前
  updated	在數據驅動下致使的虛擬DOM從新渲染和打補丁以後調用，此時，組件DOM已經更新
  activated	keep-alive 組件激活時調用若是你使用keep-alive進行緩存， 又但願每次切換組件的時候更新數據，那麼更新數據的請求方式必須寫在該鉤子函數裏
  deactivated	keep-alive 組件停用時調用
  beforeDestroy	實例銷燬以前調用，此時實例還可用
  destroyed	實例銷燬後調用，實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬

• 官方給出的生命週期圖示

  
  
  

• 例
  
  

  var vue = new Vue({
      el："#app",
      beforeCreate:function(){
          //建立前
          console.log('beforeCreate');
      },
      created: function(){
         // 建立完成後
         console.log('created');
      },
      beforeMount:function(){
          //加載前
          console.log('beforeMount');
      },
      mounted:function(){
          //加載後
          console.log('mounted');
      },
      beforeUpdate:function(){
          //更新前
          console.log('beforeUpdate');
      },
      updated:function(){
          //更新後
          console.log('updated');
      },
      beforeDestroy:function(){
          //銷燬前
          console.log('beforeDestroy');
      },
      destroyed:function() {
          //銷燬後
          console.log('destroyed');
      }
  });

總結

官方沒有給出Demo不是很友好

多學點老是好的！！ ———— 致本身