碰見Vue.js——第一個Vue.js程序

時間 2021-02-18

標籤 javascript html vue java git github 瀏覽器 app 框架異步欄目 JavaScript 简体版

原文原文鏈接

碰見Vue

Vue.js是什麼

Vue.js（讀音 /vjuː/, 相似於 view）是一套構建用戶界面的 漸進式框架。
與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。
Vue 的核心庫只關注視圖層，而且很是容易學習，很是容易與其它庫或已有項目整合。
另外一方面，Vue 徹底有能力驅動採用單文件組件和Vue生態系統支持的庫開發的複雜單頁應用。javascript

Vue.js 的目標

是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。
Vue.js 是一個用於建立 Web 交互界面的庫。它讓你經過簡單而靈活的 API 建立由數據驅動的 UI 組件。html

Vue.js的特性

簡潔：
HTML 模板 + JSON 數據，再建立一個 Vue 實例，就這麼簡單。vue

數據驅動：
自動追蹤依賴的模板表達式和計算屬性。java

組件化：
用解耦、可複用的組件來構造界面。git

輕量：
~24kb min+gzip，無依賴。github

快速：
精確有效的異步批量 DOM 更新。瀏覽器

模塊友好：
經過 NPM 或 Bower 安裝，無縫融入你的工做流。app

第一個Vue.js程序

安裝

咱們能夠在 Vue.js 的官網上直接下載 vue.min.js 並用 <script> 標籤引入。Vue 會被註冊爲一個全局變量。框架

重要提示：在開發時請用開發版本，遇到常見錯誤它會給出友好的警告。異步

下載Vue.js生產版本

下載Vue.js開發版本

代碼示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>it研習社-第一個Hello Vue程序</title>
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app=new Vue({
                el:'#app',
                data:{
                    message:'Hello Vue!'
                }
            });
        </script>
    </body>
</html>

預覽：https://91jack.github.io/Vue-...

頁面輸出：

第一個Hello Vue代碼詳解

1.將vue.js文件引入到當前頁面

<script src="vue.js" type="text/javascript" charset="utf-8"></script>

只要將vue.js文件引入頁面，在當前環境就會多出一個全局變量：Vue

2.經過全局構造函數：Vue ，實例化一個Vue應用程序接管的元素（包括全部的子元素）

<script type="text/javascript">
var app=new Vue({
  el:'#app', //el:element 的簡寫 ，用來指定Vue應用程序接管的元素（包括全部的子元素）
  data:{ //data:data就是Vue實例應用程序中的數據成員
      message:'Hello Vue!'
  }
});
</script>

3.代碼執行流程解析

1.瀏覽器從上到下依次進行解析

瀏覽器對於id=app 的div 內部的 {{message}}不認識，直接做爲普通文本渲染到網頁上

2.瀏覽器繼續日後解析執行

發現有一個js外鏈腳本，發起請求進行下載
噹噹前頁面環境拿到js腳本以後，vue.js就會執行，執行結束，就向全局暴露出了一個對象：Vue

3.當解析執行到我們本身的Script的時候，開始解析執行我們本身的代碼

經過 el 屬性指定 Vue程序的接管範圍經過 data 向Vue 實例的應用程序中初始化了一個 message 成員Vue 程序經過 el 屬性指定id爲 #app 的div開始解析執行 Vue 能識別的語法{{message}} 在Vue 中被稱爲雙花括號插值表達式在雙括號插值表達式中可使用當前元素所屬Vue程序接管範圍的data中的數據