VUE學習筆記（一）

一、Vue簡介

1.1 簡介

Vue (讀音 /vjuː/，類似于 view) 是一套用于建構使用者界面的漸進式的js架構，釋出于 2014 年 2 月。與其它大型架構不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫隻關注視圖層，不僅易于上手，還便于與第三方庫（如：[vue-router]()，[vue-resource]()，[vuex]()）或既有項目整合。

1.2 MVVM 模式的實作者——雙向資料綁定模式

• Model：模型層，在這裡表示 JavaScript 對象
• View：視圖層，在這裡表示 DOM（HTML 操作的元素）
• ViewModel：連接配接視圖和資料的中間件，Vue.js 就是 MVVM 中的 ViewModel 層的實作者

在 MVVM 架構中，是不允許 資料 和 視圖 直接通信的，隻能通過 ViewModel 來通信，而 ViewModel 就是定義了一個Observer` 觀察者

• ViewModel 能夠觀察到資料的變化，并對視圖下對應的内容進行更新
• ViewModel 能夠監聽到視圖的變化，并能夠通知資料發生改變

至此，我們就明白了，Vue.js 就是一個 MVVM 的實作者，他的核心就是實作了 DOM 監聽 與 資料綁定

1.3 其它 MVVM 實作者

• AngularJS

  簡單介紹一下，AngularJS誕生于2009年，由Misko Hevery 等人建立，後為Google所收購。是一款優秀的前端JS架構，已經被用于Google的多款産品當中。AngularJS有着諸多特性，最為核心的是：MVVM、子產品化、自動化雙向資料綁定、語義化标簽、依賴注入等等。

• ReactJS

  React引入了虛拟DOM（Virtual DOM）的機制：在浏覽器端用Javascript實作了一套DOM API。基于React進行開發時所有的DOM構造都是通過虛拟DOM進行，每當資料變化時，React都會重新建構整個DOM樹，然後React将目前整個DOM樹和上一次的DOM樹進行對比，得到DOM結構的差別，然後僅僅将需要變化的部分進行實際的浏覽器DOM更新。

• 微信小程式

  微信小程式的視圖層和資料層就是通過MVVM進行綁定的。

1.4 為什麼要使用 Vue.js

• 輕量級，體積小是一個重要名額。Vue.js 壓縮後有隻有 20多kb （Angular 壓縮後 56kb+，React 壓縮後 44kb+）
• 移動優先。更适合移動端，比如移動端的 Touch 事件
• 易上手，學習曲線平穩，文檔齊全
• 吸取了 Angular（子產品化）和 React（虛拟 DOM）的長處，并擁有自己獨特的功能，如：計算屬性
• 開源，社群活躍度高

1.5 Vue.js 的兩大核心要素

1.5.1 資料驅動

當我們把一個普通的 JavaScript 對象傳給 Vue 執行個體的 data 選項，Vue 将周遊此對象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉為 getter/setter。Object.defineProperty 是 ES5 中一個無法 shim 的特性，這也就是為什麼 Vue 不支援 IE8 以及更低版本浏覽器。

這些 getter/setter 對使用者來說是不可見的，但是在内部它們讓 Vue 追蹤依賴，在屬性被通路和修改時通知變化。這裡需要注意的問題是浏覽器控制台在列印資料對象時 getter/setter 的格式化并不同，是以我們可能需要安裝 vue-devtools 來擷取更加友好的檢查接口。

每個元件執行個體都有相應的 watcher 執行個體對象，它會在元件渲染的過程中把屬性記錄為依賴，之後當依賴項的 setter 被調用時，會通知 watcher 重新計算，進而緻使它關聯的元件得以更新。

1.5.2 元件化

• 頁面上每個獨立的可互動的區域視為一個元件
• 每個元件對應一個工程目錄，元件所需的各種資源在這個目錄下就近維護
• 頁面不過是元件的容器，元件可以嵌套自由組合（複用）形成完整的頁面

二、Vue的學習

2.1在頁面引入vue的js檔案即可。

注意：cdn是一種加速政策，能夠快速的提供js檔案

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>           

2.2 在頁面中綁定vue元素

建立一個div，id是app
<div id="app"></div>           

2.3 建立vue對象，設計對象的内容

其中該vue對象，綁定了頁面中id是app的那個div

<script>
        new Vue({
            el:"#app",
            data:{
              title:"hello vue!",
                        args1:"hi!",
                        age:18,
                        flag:true
            }
        });
</script>           

#  el: element的簡稱，也就是Vue執行個體挂載的元素節點，值可以是 CSS 選擇符，或實際 HTML 元素，或傳回 HTML 元素的函數。
 #  data: 用于提供資料的對象，裡面存放鍵值對資料。           

2.4 在頁面的元素中使用插值表達式來使用vue對象中的内容

<div id="app">
    {{ title }}
</div>           

三、 插值表達式

插值表達式的作用是在View中獲得Model中的内容

Model中的内容如下：

new Vue({
        el:"#app",
        data:{
            title:"hello world!"
        },
        methods:{
            sayHello:function(){
                return "hello vue";
            }
        }
    });           

3.1 簡單使用插值表達式擷取資料

<div id="app">
    {{title}}
</div>           

此時，頁面上将會顯示"Hello world!"

3.2 在插值表達式中擷取數組中的内容

<div id="app">
    {{[1,2,3,4][2]}}
</div>           

此時，頁面上會顯示“3”，也就是數組中的第三個元素被擷取。

3.3 使用插值表達式擷取對象中的屬性

<div id="app">
    {{ {"name":"xiaoyu","age":20}.age }}
</div>           

此時，頁面上會顯示“20”，也就是對象中age屬性的值。

3.4 使用插值表達式調用Vue中的方法

<div id="app">
        {{ sayHello()}}
</div>           

此時，頁面上會顯示“hello vue”，也就是調用了vue對象中的sayHello方法，并展示了方法的傳回值。