Vue學習筆記(一) 入門

時間 2019-11-12

標籤 vue 學習筆記入門简体版

原文原文鏈接

一、安裝

（1）經過 <script> 引入javascript

在學習過程當中，可使用最新的版本：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

在開發環境中，最好使用明確的版本（2.6.10 是目前最新的穩定版）：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

在生產環境中，建議使用壓縮的版本：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>

開發版本和生產版本的區別在於，開發版本包含完整的警告，而生產版本具備更快的速度html

（2）經過 NPM 安裝vue

在構建大型應用時，推薦使用 NPM 安裝（在此以前，請確保你的電腦已配置好相關環境）：java

> npm install vue

同時，Vue 還提供了一個官方 cli，能夠快速搭建繁雜的腳手架vue-cli

> npm install vue-cli

可是，因爲新手剛剛入門的時候並不推薦使用 cli，因此這裏先不做具體介紹shell

二、入門

每一個 Vue 應用都是經過 new Vue() 建立的一個 Vue 實例開始的npm

var vm = new Vue({
  // 選項
})

一個簡單的例子以下：app

在沒有任何說明的狀況下，若是你能讀懂下面的代碼，那麼這篇文章對你的幫助可能不大函數

可是若是你對代碼中的某些地方感到疑惑，那麼能夠看看下面的註釋幫助理解學習

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <p>{{ message }}</p>
        <p>{{ reversedMessage() }}</p>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                message: "Hello Vue"
            },
            methods: {
                reversedMessage: function () {
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>

</html>

下面是添加註釋以後的代碼：

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <!-- 引入 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <!-- 經過 Mustache 語法（雙大括號語法）實現數據綁定 -->
        <!-- 顯示 message 數據 -->
        <p>{{ message }}</p>
        <!-- 顯示 reversedMessage 函數的返回結果 -->
        <p>{{ reversedMessage() }}</p>
    </div>
    <script type="text/javascript">
        // 建立 Vue 實例，這有三個參數，分別是 el、data 和 methods
        var vm = new Vue({
            // el 是 Vue 實例的掛載目標，既能夠是 CSS 選擇器，也能夠是 HTMLElement 實例
            // 這裏的 '#app' 是 CSS 選擇器，代表將 Vue 實例與 id 爲 app 的 HTML 元素綁定起來
            // 之後的全部操做所有在指定的 HTML 元素內，HTML 元素外不受影響
            el: '#app',
            // data 是 Vue 實例的數據對象，既能夠是 Object 類型，也能夠是 Function 類型
            // 這裏的 data 就是一個對象，並且通常而言 data 都應該是一個純粹的對象
            // 可是在定義組件時，data 必須聲明爲返回一個初始數據對象的函數
            // 由於組件會被用來建立多個實例，若 data 爲 Object，則全部實例將會共享同一個數據對象
            data: {
                message: "Hello Vue"
            },
            // methods 是 Vue 實例的方法，它能夠是一個對象，而且對象中的每一項都是一個 method
            // 通常而言，方法中的 this 會自動綁定爲 Vue 實例
            // 可是當使用箭頭函數時，this 不會綁定爲 Vue 實例，由於 this 綁定了父級做用域的上下文
            methods: {
                reversedMessage: function () {
                    // 因爲 this 綁定爲 Vue 實例，因此能夠直接訪問 data 對象中的屬性 message
                    return this.message.split('').reverse().join('')
                }
            }
        })
        // Vue 實例代理 data 對象上的全部屬性，也就是說咱們能夠經過 `vm.message` 進行訪問
        console.log(vm.message)
        // methods 中的方法也混入到 Vue 實例中，即咱們能夠經過 `vm.reversedMessage()` 訪問
        console.log(vm.reversedMessage())
    </script>
</body>

</html>

【閱讀更多 Vue 系列文章，請看 Vue學習筆記】

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。