Vue.js框架是什麼以及核心內容

Vue.js（讀音 /vjuː/，類似於 view） 是一套構建使用者介面的漸進式框架。與其他重量級框架不同的是，Vue
採用自底向上增量開發的設計。Vue 的核心庫只關注檢視層，它不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與單檔案元件和 Vue
生態系統支援的庫結合使用時，Vue 也完全能夠為複雜的單頁應用程式提供驅動。

Vue.js通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件
這句話有兩個關鍵詞：資料繫結 和 檢視元件。

Vue的資料驅動：資料改變驅動了檢視的自動更新，傳統的做法你得手動改變DOM來改變檢視，vuejs只需要改變資料，就會自動改變檢視，一個字：爽。再也不用你去操心DOM的更新了，這就是MVVM思想的實現。

檢視元件化：把整一個網頁的拆分成一個個區塊，每個區塊我們可以看作成一個元件。網頁由多個元件拼接或者巢狀組成。

Vue.js的優點

1. 簡易安裝（vue.js是一個js庫，直接在外部引入即可）
2. 資料驅動檢視
3. 資料雙向繫結（Vue.js還提供了方便的語法指令，實現檢視和資料的雙向繫結）
4. 元件化（元件化就是把頁面中特定的區塊獨立抽出來，並封裝成一個可方便複用的元件。）

建立一個Vue例項

第一步：建立語法

<script>
      let vm = new Vue({});
</script>

通過關鍵語句 new Vue( )我們就可以建立一個Vue例項：vm了。我們注意到了我們給Vue( )傳了一個引數選項，是一個空物件。

第二步：設定資料

 let vm = new Vue({
   //例項vm的資料
   data:{
          name: "張三",
          age :  21
     }
  });

寫法也很簡單，引數物件不再是一個空物件，它包含一個屬性：data，而data的值也是一個物件，這個物件就是我們給例項vm設定的資料了。比如：name為張三，age為21等等。

第三步：掛載元素

檢視view部分：

<div id="app"></div>

檢視（html部分）上我們有一個id為”app”的div元素。

let vm = new
 
 Vue({
  //掛載元素
  el:'#app',
  //例項vm的資料
  data:{
        name: "張三",
        age :  21
    }
  });

引數中我們不但有屬性“data”，還多了個屬性：“el”，el引數提供一個在頁面上已經存在的DOM元素，作為我們例項vm的掛載目標。表示我們的例項vm和id為“app”的DOM節點就關聯起來了。

第四步：渲染

例項vm建立好了，資料data有了，DOM節點也關聯起來了，最後一步，就是把vm的資料繫結到指定的檢視上了，也就是資料渲染。

<div id="app">
    我是{{ name }}，今年{{ age }}歲
</div>

我們只需要用一個雙大括號：{{ }} 即可，你可以留意到，{{ name }} 和 {{ age }} 就是我們給例項vm設定的資料name和age，我們用{{ }}可以直接讀取到它們的值。

定義一個vue例項的4個常用選項

filters 過濾器

假設我們有一組數字，都是小數，num1，num2，num3都是Vue例項vm的小數，我們把它展示在檢視上。
突然，需求改了，我們不能把小數展示出來，需要把小數轉換成整數再顯示。這個時候，我們需要把三個小數經過過濾處理後再展示，不能直接展示。這種情況就需要用到Vue的filters過濾器了。

let vm = new Vue({
  //掛載元素
  el:'#app',
  //例項vm的資料
  data:{
         num1:33.141,
         num2:46.212,
         num3:78.541
    },
  //過濾器
  filters:{
      toInt(value){
         return parseInt(value);
      }
    }
  });

相信大家都注意到了，引數物件除了el和data屬性之外，還多了一個filters屬性，它的值也是一個物件，裡面定義了一個叫toInt( )的方法，傳入了一個value的引數，函式的作用就是把傳入的引數value，簡單地轉成一個整出並return回去。

定義完filters屬性後，我們怎麼用呢？

<div id="app">
    數字1：{{ num1 | toInt}}<br>
    數字2：{{ num2 | toInt}}<br>
    數字3：{{ num3 | toInt}}
</div>

也很簡單，如上面程式碼所示，通過管道符 | 把函式toInt 放在變數後面即可，num1，num2，num3會分別作為引數value傳入toInt( value )方法進行運算，並返回一個整數。

computed 計算屬性

有時候，我們拿到一些資料，需要經過處理計算後得到的結果，才是我們要展示的內容。
比如：我們有三個數，但是需要展示的是三個數字之和。這種情況，就適合用我們的計算屬性computed。

let vm = new Vue({
    //掛載元素
  el:'#app',
    //例項vm的資料
  data:{
         num1:1,
         num2:3,
         num3:6
    },
    //計算屬性
  computed:{
        sum(){
          return this.num1+this.num2+this.num3
        }
    }
 });

 <div id="app">
     總和：{{ sum }}
 </div>

計算屬性computed用法更簡潔，僅需{{ sum }}就能讀取到它的計算結果：1+3+6結果應該為10。
需要注意的是，sum的值是依賴data中的資料num1，num2，num3的，一旦它們發生了變化，sum的值也會自動更新。

methods 方法

let vm = new Vue({
    //掛載元素
  el:'#app',
    //例項vm的資料
  data:{
         a:0
    },
    //方法
  methods:{
        plus(){
            return this.a++;
        }
    }
 });

定義一個plus( )的方法在methods中，下面我們把plus( ) 繫結在按鈕的點選事件上：

<div id="app">
    {{ a }}
    <button v-on:click="plus">加1</button>
  </div>

在Vue中通過v-on:指令來繫結事件（指令後面章節會介紹），我們點選按鈕，methods中的方法plus( )就會被呼叫,實現給a的值加1，並更新檢視。

watch 觀察
watch選項是Vue提供的用於檢測指定的資料發生改變的api。

上面點選按鈕a的值加1的例子，不就是資料發生變化了嗎？我們就用watch選項來監聽數字a是否發生了變化，如果了監聽到了變化，我們就在控制檯輸入以下a的最新值。

在上個例子的程式碼基礎上，我們加上watch部分的程式碼：

let vm = new Vue({
    //掛載元素
  el:'#app',
    //例項vm的資料
  data:{
         a:0
    },
    //方法
  methods:{
        plus(){
            return this.a++;
        }
    },
    //觀察
  watch:{
        a(){
          console.log(`有變化了，最新值：`);
          console.log(this.a);
        }
    }
 });

我們點選按鈕的時候，a的值加1發生了變化，而此時watch監聽到了它的變化，便在控制檯輸出了我們指定的內容。