Vue概述

Vue.js是一套構建用戶界面的漸進式框架，採用自底向上增量開發的設計。Vue的核心庫關注於視圖（html），不只易上手，還便於與第三方庫或項目整合。

漸進式：一步一步，不是將全部的東西都學完才能使用。

自底向上設計：一種設計程序的過程和方法，就是先編寫出基礎程序段，而後在逐步擴大規範、補充和升級某些 功能，其實是一種自底向上構造程序的過程。

 

Vue.js的核心是容許採用簡潔式模板語法來聲明的將數據渲染進DOM的系統

在使用數據以前須要先進性聲明才能夠使用

  <!-- 定義Vue要渲染/控制的部分 -->
    <div class='app'>
        <!-- 使用差值表達式進行渲染 -->
        <p> {{message}} </p>

    </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 建立Vue實例
    new Vue({
        // 指定Vue要渲染/控制的元素
        el: '.app',
        // 數據
        data: {
            message: '這是經過插值表達式進行渲染的',
        },
      
    })
 </script>

常見的開發模式有MVC、MVP、MVVM。

 

使用Vue.js實現輸出「Hello World」

步驟：

一、定義用於填充數據的標籤

二、引入Vue.js庫文件

三、使用Vue語法實現需求

四、將數據填充到「第1步」的標籤裏面

    <!-- 定義Vue用於填充數據的標籤 -->
    <div class='app'>
        <!-- 使用差值表達式進行渲染 -->
        <p> {{message}} </p>

    </div>
    </body>
    <!-- 引入Vus.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 建立Vue實例
    new Vue({
        // 元素怪哉的位置，能夠是CSS選擇器，也能夠是DOM元素
        el: '.app',
        // 模型數據
        data: {
            message: 'Hello Word',
        },
      
    })
 </script>