介紹

提示
已經了解Vue2且僅想知道Vue3有哪些新功能？請參閱遷移指南

Vue.js是什么？

Vue(讀音/vju?/，像view一樣發音)是一套用于構建用戶界面的先進框架，不像其他僵化的框架，Vue被設計為全面的漸進式可擴展框架。該核心庫只關注視圖層，使用非常簡單且易于與其他第三方類庫或現有項目進行集成。另一方面當與現代化工具以及支持類庫結合使用時，Vue也完全能夠為復雜的單頁面應用（SPA）提供完美支持。

開始使用

提示
官方手冊認為HTML，Css，JavaScript你已達到中等水平。如果你是前端開發的新手，直接跳過基礎學習Vue框架不是一個好主意，建議掌握基礎知識以后再回來！了解其他框架對學習Vue有幫助，但也不是必須的。

最佳學習習Vue.js方法是驗證使用Hello World示例。可以在新標簽打開這個鏈接，跟著我們一起學習這些基礎示例。

安裝節已提供了多種安裝Vue的方式。說明：不推薦初學者一開始就使用vue-cli，特別是你對基于Node.js構建工具不是非常熟悉的情況下。

聲明式渲染

Vue.js的核心是讓我們很簡單的使用模板語法聲明式渲染數據至DOM元素上。
完整代碼如下：

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vue demo1</title>
    <script src="https://unpkg.com/vue@next"></script>
   </head>
   <body>
        <div id="counter">
            Counter:{{counter}} <br />
        </div>
   </body>
   <script type="text/javascript">
    const Counter = {
        data() {
            return {
                counter: 0
            }
        }
    }
    Vue.createApp(Counter).mount("#counter")
   </script>
</html>

運行結果如下：

hello world

我們已成功創建第一個Vue應用！這看起來跟渲染一個字符模板非常相似，但Vue在后臺做了大量的工作。數據和DOM元素建立起了關聯，并且所有都是響應式的。我們怎么知道是響應式的？看看下面這個例子，counter這個變量每秒增加，你將會看到界面上的DOM元素是如何變化的！

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vue demo1</title>
    <script src="https://unpkg.com/vue@next"></script>
   </head>
   <body>
        <div id="app">
            Counter:{{counter}} <br />
        </div>
   </body>
   <script type="text/javascript">
    const Counter = {
        data() {
            return {
                counter: 0
            }
        },
        mounted() {
            setInterval(() => {
              this.counter++
            }, 1000)
      }
    }
    Vue.createApp(Counter).mount("#app")
   </script>
</html>

除了文本插值，可以像這樣綁定元素屬性：

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vue demo1</title>
    <script src="https://unpkg.com/vue@next"></script>
   </head>
   <body>
        <div id="app">
            <span v-bind:title="message">
                鼠標放到我上面，將會看到動態綁定的title信息
            </span>
        </div>
   </body>
   <script type="text/javascript">
    const Counter = {
        data() {
            return {
                message: "頁面載入時間為："+ new Date().toLocaleString()
            }
        }
    }
    Vue.createApp(Counter).mount("#app")
   </script>
</html>

title插值

我們學習到了一些新的東西。你看到的v-bind屬性我們稱之為指令。指令是以v-打頭表明是由Vue提供的特殊屬性，你可能已經猜到了，他們可以響應式的渲染DOM。這里我們基本上可以說“這個實例是通過message這個變量動態的綁定到了html元素上”。

處理用戶輸入

為了讓用戶和界面進行交互，我們可以使用v-on指令綁定一個事件監聽，調用在當前實例中定義的方法：

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vue demo1</title>
    <script src="https://unpkg.com/vue@next"></script>
   </head>
   <body>
        <div id="app">
            <span v-bind:title="message">
                {{message}}
                <br />
                <button v-on:click="reverseMessage">反轉上文字</button>
            </span>
        </div>
   </body>
   <script type="text/javascript">
    const Counter = {
        data() {
            return {
                title: "頁面載入時間為："+ new Date().toLocaleString(),
                message: "鼠標放到我上面，將會看到動態綁定的title信息"
            }
        },
        methods: {
            reverseMessage() {
                this.message = this.message.split('').reverse().join('')
            }
        }
    }
    Vue.createApp(Counter).mount("#app")
   </script>
</html>

點擊按鈕后，message內容被反轉為：

反轉文字

注意這個方法沒有使用DOM就更新了界面上的內容 - 所有DOM都由Vue進行操作，而你的代碼只要關注具體的業務邏輯即可。
同時Vue提供了v-model指令，可以輕而易舉的實現表單文本框和界面元素(app state)的雙向綁定：

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vue demo1</title>
    <script src="https://unpkg.com/vue@next"></script>
   </head>
   <body>
        <div id="app">
            <p>{{ message }} </p>
            <input v-model="message" />
        </div>
   </body>
   <script type="text/javascript">
    const Counter = {
        data() {
            return {
                message: "你好世界！"
            }
        },
    }
    Vue.createApp(Counter).mount("#app")
   </script>
</html>

你好世界

（你可以想象一下，用jquery，你需要多少行代碼來實現雙向綁定？其實我不是黑jquery，當年jquery節省了我們大量時間調瀏覽器兼容性和可以調用一些強大的方法）

條件分支及循環

非常容易切換一個元素的顯示狀態：

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vue demo1</title>
    <script src="https://unpkg.com/vue@next"></script>
   </head>
   <body>
        <div id="app">
            <span v-if="seen">看的見我？看不見我?</span>
        </div>
   </body>
   <script type="text/javascript">
    const Counter = {
        data() {
            return {
                seen: true
            }
        },
    }
    Vue.createApp(Counter).mount("#app")
   </script>
</html>

(只需要控制seen變量為true或false就能顯示/隱藏span標簽)
這個示例演示了DOM元素不僅能綁定字符和屬性，同時也可以綁定DOM結構（控制DOM的展示？），另外，Vue提供了強大的轉場效果系統，當我們在界面上插入/更新/移除元素時會自動應用轉場效果。

還有很多其他指令，每個都有自己獨特的功能。例如v-for指令可以將一個數組的每個元素展示成一個列表：

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vue demo1</title>
    <script src="https://unpkg.com/vue@next"></script>
   </head>
   <body>
        <div id="app">
            <ul>
                <li v-for="(item,index) in todos">
                    {{ item.week }} : {{ item.text }}
                </li>
            </ul>
        </div>
   </body>
   <script type="text/javascript">
    const app = {
        data() {
            return {
                todos: [
                    {"week":"周一","text":"學習java"},
                    {"week":"周二","text":"學習oracle"},
                    {"week":"周三","text":"學習python"},
                    {"week":"周四","text":"學習uni-app"},
                    {"week":"周五","text":"看電影"},
                    {"week":"周六","text":"休息"},
                    {"week":"周日","text":"休息"}
                ]
            }
        },
    }
    Vue.createApp(app).mount("#app")
   </script>
</html>

運行結果如下：

列表

組件化

組件系統是Vue中另一個非常重要的概念，因為是一種抽像，允許我們使用小型、自包含、可反復使用的組件構建大型應用。如果我們仔細想一想，幾乎所有的用戶界面都可以抽像成一個組件樹。

組件樹

Vue中，組件本質上是擁有預定義選項的實例。Vue中注冊組件也很簡單：像應創建應用對象一樣創建組件，然后在父頁面中components選項中進行定義：

//js
// 創建Vue應用
const app = Vue.createApp(...)

// Define a new component called todo-item
app.component('todo-item', {
  template: `<li>This is a todo</li>`
})

// 掛載Vue應用
app.mount(...)

現在你就可以在其他頁面的模板中調用這個組件了

<ol>
  <!-- 創建一個todo-item組件的實例 -->
  <todo-item></todo-item>
</ol>

但這樣每個todo渲染的文字內容都是一樣的，沒有意思。我們可以從父頁面傳遞數據到子組件。接下來讓我們改造下組件定義來接收一個prop：

app.component('todo-item', {
  props: ['todo'],
  template: `<li>{{ todo.text }}</li>`
})

然后我們在使用組件的地方可以傳遞不同的todo參數：

<div id="todo-list-app">
  <ol>
    <!--
    現在我們提供含有todo-item的todo對象變量，
    這意味著組件內容是動態變化的。
    我們同時需要為每個組件指定一個“key”，后面再做解釋。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

const TodoList = {
  data() {
    return {
      groceryList: [
        { id: 0, text: '蔬菜' },
        { id: 1, text: '芝士' },
        { id: 2, text: '任何人類能吃的食品 }
      ]
    }
  }
}

const app = Vue.createApp(TodoList)

app.component('todo-item', {
  props: ['todo'],
  template: `<li>{{ todo.text }}</li>`
})

app.mount('#todo-list-app')

看一個完整的例子：

<html lang="en-US">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <title>vue demo1</title>
      <script src="https://unpkg.com/vue@next"></script>
     </head>
     <body>
          <div id="app">
              <ul>
                 <todo-item
                    v-for="(item,index) in todos"
                    v-bind:todo="item"
                    v-bind:key="index"
                 ></todo-item>
              </ul>
          </div>
     </body>
     <script type="text/javascript">
      const todoList = {
          data() {
              return {
                  todos: [
                      {"week":"周一","text":"學習java"},
                      {"week":"周二","text":"學習oracle"},
                      {"week":"周三","text":"學習python"},
                      {"week":"周四","text":"學習uni-app"},
                      {"week":"周五","text":"看電影"},
                      {"week":"周六","text":"休息"},
                      {"week":"周日","text":"休息"}
                  ]
              }
          }
      }
      const app = Vue.createApp(todoList)
      app.component('todo-item',{
          props: ['todo'],
          template: '<li>{{todo.week}}:{{todo.text}}</li>'
      })
      app.mount("#app")
     </script>
  </html>

這是一個非預想中的示例，但是我們已將應用分隔成兩個單元，且父應用通過props接口合乎邏輯的分隔出了一個子組件，我們可以進一步的完善<todo-item>組件實現復雜的模板和邏輯而不影響父應用。
在大型應用中，有必要將整個應用分割成不同的組件使得開發更加便于管理。在后續章節中我們會更多的談到組件，下面簡單演示一個（想像）示例展示組件是如何在模板中使用的：

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

關于自定義標簽

你可能已經注意到了，Vue組件和HTML的自定義標簽非常像，屬于Web 組件規則的一部分。這是因為Vue組件語法比Web組件規則更加寬松的模型。舉個例子，Vue組件實現了插槽API和特殊屬性。但是仍然有一些不同點：

WEB組件已經被確定但不是所有瀏覽器能原生支持。Safari 10.1+,Chrome 54+ 和Firefox 63+ 原生已支持WEB組件。相對而言，Vue組件一如既往的在所有支持的瀏覽器中均能工作（兼容IE11及以上）。如果有必要，Vue組件還可以放置進一個原生的標簽中。
Vue組件提供了簡單的定制標簽提不具備的功能，突出的包括組件間數據流，標準事件通信以及構建工具集成。

即便Vue內部并不使用定制標簽，但在使用和發布自定義標簽時仍然具備很強的互操作性。Vue CLI同時也提供將Vue組件注冊為原生自定義標簽的支持。

準備好了嗎？

我們已經對Vue.js核心功能做了簡要的介紹 - 手冊的剩余部分，我們將再次詳細介紹并包含很多高級功能點和細節，所以，請務必通讀該教程！

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Vue3x基礎 - 介紹

Vue3x基礎 - 介紹

介紹

Vue.js是什么？

開始使用

聲明式渲染

處理用戶輸入

條件分支及循環

組件化

關于自定義標簽

準備好了嗎？

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Vue3x基礎 - 介紹

介紹

Vue.js是什么？

開始使用

聲明式渲染

處理用戶輸入

條件分支及循環

組件化

關于自定義標簽

準備好了嗎？

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频