vue 快速入門系列 —— 初步認識 vue

時間 2021-04-03

標籤 javascript html 前端 vue java react webpack web vue-router vuex 欄目 JavaScript 简体版

原文原文鏈接

其餘章節請看：javascript

vue 快速入門系列html

初步認識 vue

vue 是什麼

Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。前端

所謂漸進式，就是你能夠一步一步、有階段的使用 vue，沒必要一開始就使用全部的東西。vue

命令式框架 vs 聲明式框架

jQuery 是命令式操做 DOM 的前端框架。好比點擊一個新增按鈕，須要出現一個錄入信息的彈框，在 jQuery 中，咱們須要在新增按鈕被點擊的時候，發出一個命令，讓錄入信息的彈框顯示。隨着交互愈來愈複雜，代碼中會有至關一部分的代碼是在操做 DOM，很差維護的問題也就出現了。java

如今主流的框架 vue、angular 和 react 都是聲明式操做 DOM 的框架。所謂聲明式，就是咱們只須要描述狀態與 DOM 之間的映射關係，就能夠將狀態渲染成視圖。狀態到視圖的轉換，框架會幫咱們作，不須要咱們手動去操做 DOM。咱們只須要關注狀態的維護，而不用再關心 DOM 的操做。react

hello-world

直接用 script 的方式引入 vue，開始咱們的第一個例子。webpack

// 新建 demo/1.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 模板將會替換掛載的元素。最後顯示的是 section，而不是 div -->
    <div id='app'></div>
    <script type="text/x-template" id="tpl">
        <section>
            {{ message }}
            <p v-if="seen">如今你看到我了</p>
        </section>
    </script>

    <script>
    var app = new Vue({
        el: '#app',
        // 模板。描述狀態與 DOM 之間的關係。
        template: '#tpl',
        // 狀態
        data: {
            message: 'Hello Vue!',
            seen: true
        }
    })
    </script>
</body>
</html>

Tip：筆者使用 anywhere 來啓動一個服務器。經過 npm install anywhere --global 便可安裝。在任意目錄下執行 anywhere 就能啓動一個服務，也能夠指定端口啓動 anywhere -p 8090。web

進入 demo 目錄，啓動服務:vue-router

$ anywhere
Running at http://169.254.53.24:8000/
Also running at https://169.254.53.24:8001/

經過瀏覽器請求 1.html 頁面：http://169.254.53.24:8000/demo/1.html
頁面顯示：
Hello Vue!
如今你看到我了

若是在瀏覽器控制檯下執行 app.seen = false，你會發現頁面中的 如今你看到我了 不見了。vuex

在這個例子中，明面上咱們作的只有：在模板中描述狀態與 DOM 之間的關係。背地裏，vue 幫咱們把狀態渲染成視圖，若是咱們更改了狀態（數據），視圖會自動更新，無需咱們操做 DOM。