VueJS 概述與快速入門

• 2019 年 12 月 25 日
• 筆記

1.1 VueJS介紹

Vue.js是一個構建數據驅動的 web 介面的漸進式框架。Vue.js 的目標是通過儘可能簡單的 API 實現響應的數據綁 定和組合的視圖組件。它不僅易於上手，還便於與第三方庫或既有項目整合。

官網:https://cn.vuejs.org/

1.2 MVVM模式

MVVM是Model-View-ViewModel的簡寫。它本質上就是MVC 的改進版。MVVM 就是將其中的View 的狀態和行為抽象化，讓我們將視圖 UI 和業務邏輯分開

MVVM模式和MVC模式一樣，主要目的是分離視圖（View）和模型（Model） Vue.js 是一個提供了 MVVM 風格的雙向數據綁定的 Javascript 庫，專註於View 層。它的核心是 MVVM 中的 VM，

也就是 ViewModel。 ViewModel負責連接 View 和 Model，保證視圖和數據的一致性，這種輕量級的架構讓前端開發更加高效、便捷

<!DOCTYPE html>  <html lang="en">  <head>      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">      <title>Title</title>  </head>  <body>  <div id="app"> {{message}}</div>  <script>      new Vue({          el: '#app',          //表示當前vue對象接管了div區域          data: {              message: 'hello world'              //注意不要寫分號結尾          }      });  </script>  </body>  </html>

1.4 插值表達式

數據綁定最常見的形式就是使用「Mustache」語法 (雙大括弧) 的文本插值，Mustache 標籤將會被替代為對應數據對象上屬性的值。無論何時，綁定的數據對象上屬性發生了改變，插值處的內容都會更新。

Vue.js 都提供了完全的 JavaScript 表達式支援。

{{ number + 1 }}  {{ ok ? 'YES' : 'NO' }}

這些表達式會在所屬 Vue 實例的數據作用域下作為 JavaScript 被解析。有個限制就是，每個綁定都只能包含單個表達式，所以下面的例子都不會生效。

    <!-- 這是語句，不是表達式 -->      {          {              var a = 1          }      }      <!-- 流控制也不會生效，請使用三元表達式 -->      {          {              if (ok) {                  return message              }          }      }