文章目錄

Vue快速入門（上）（應急用）
- 一、下載和匯入Vue
- 二、第一個Vue程式
- 三、條件與回圈
- 四、處理用戶輸入（事件監聽器）
- 五、Vue實體
- - 5.1 $watch（當某個變數被修改后呼叫）
  - 5.2 生命周期
- 六、模板語法
- - 6.1 文本
  - 6.2 原始HTML
  - 6.3 Attribute
  - 6.4 使用JavaScript運算式
  - 6.5 指令
  - 6.6 縮寫
- 七、計算屬性和偵聽器

Vue快速入門（上）（應急用）

一、下載和匯入Vue

要想用vue，首先，我們肯定要參考vue的“依賴”，這里提供兩種方法：

方法一、自己去官網下載vue.js檔案
點擊這里下載vue.js檔案 (由于這里發送的是get請求，無法直接下載，所以你得把網站下的內容都復制出來然后放到一個空白的vue.js檔案中再進行使用，)

方法二、使用在線的vue.js

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

二、第一個Vue程式

學程式，首先當時是hello,world，直接貼原始碼：(原始碼的決議在原始碼下邊）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello，World</title>
    <!--匯入Vue-->
    <script type="text/javascript" src="../js/vue.js" charset="UTF-8"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <script type="text/javascript">
        let app = new Vue({
            el:'#app',
            data:{
                message: "Hello,world"
            }
        });
    </script>
</body>
</html>

決議：

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

這一句是引入我們的Vue，不用講應該都能知道，

    <div id="app">
        {{message}}
    </div>

這一段是定義我們的div的id為app，然后使用兩個花括號{{}}參考我們定義的data的屬性，

    <script type="text/javascript">
        let app = new Vue({
            el:'#app',
            data:{
                message: "Hello,world"
            }
        });
    </script>

這一段是最關鍵的，用Ajax來說，new Vue這一步其實就相當于$，然后el其實就是我們的element，#表示獲取id值，直接寫字串是獲取標簽，.類名表示獲取class，然后data就是他里面被賦值的變數，我們可以通過{{變數名}}進行獲取，

注意：vue的使用最好是放在body的最下邊，否則可能會因為獲取不到 id ，導致message沒有正常渲染，

我們已經成功創建了第一個 Vue 應用！看起來這跟渲染一個字串模板非常類似，但是 Vue 在背后做了大量作業，現在資料和 DOM 已經被建立了關聯，所有東西都是回應式的，我們要怎么確認呢？打開你的瀏覽器的 JavaScript 控制臺 (就在這個頁面打開)，并修改 app.message 的值，你將看到上例相應地更新，
在這里插入圖片描述
注意我們不再和 HTML 直接互動了，一個 Vue 應用會將其掛載到一個 DOM 元素上 (對于這個例子是 #app) 然后對其進行完全控制，那個 HTML 是我們的入口，但其余都會發生在新創建的 Vue 實體內部，

三、條件與回圈

v-if 屬性表示條件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>條件與回圈</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="demo">
        <p v-if="seen">現在你能看到我了!</p>
    </div>
    <script type="text/javascript">
        let demo = new Vue({
            el:"#demo",
            data:{
                seen: true
            }
        });
    </script>
</body>
</html>

顯示：
在這里插入圖片描述
我們可以在console中把他的seen變為false，將它隱藏，

回圈陳述句也很簡單，使用v-for標簽遍歷，指明遍歷哪個變數，每個被遍歷到的屬性的變數即可，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回圈陳述句</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <ul id="List">
        <li v-for="item in studentList">
            學號：{{item.id}},
            姓名：{{item.name}},
            年齡:{{item.age}}
        </li>
    </ul>

    <script type="text/javascript">
    let demo = new Vue({
        el:"#List",
        data:{
            studentList:[
                {id:'1001',name:'張三',age:18},
                {id:'1002',name:'張三',age:18},
                {id:'1003',name:'張三',age:18},
                {id:'1004',name:'張三',age:18},
                {id:'1005',name:'張三',age:18},
            ]
        }
    });
</script>
</body>
</html>

結果：
在這里插入圖片描述

四、處理用戶輸入（事件監聽器）

為了讓用戶和你的應用進行互動，我們可以用 v-on 指令添加一個事件監聽器 ，通過它呼叫在 Vue 實體中定義的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>監聽器</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="onDemo">
        <p>{{message}}</p>
        <button v-on:click="updateMsg">點擊可以修改段落內容</button>
    </div>

    <script type="text/javascript">
        let demo = new Vue({
            el:"#onDemo",
            data:{
                count:0,
                message:'我是人見人愛的段落喲'
            },
            methods:{
                updateMsg: function () {
                    if(++this.count %2 == 0){
                        this.message = '不管怎么樣，我都是人見人愛的段落，'
                    }else {
                        this.message = '跟你說了我永遠是人見人愛的段落了吧，'
                    }
                }
            }
        })
    </script>
</body>
</html>

顯示：
在這里插入圖片描述
奇數次點擊按鈕顯示：

偶數次點擊按鈕顯示：

Vue 還提供了 v-model 指令，它能輕松實作表單輸入和應用狀態之間的雙向系結，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件系結</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="demo">
        <p>{{message}}</p>
        <input v-model="message">
    </div>
    <script type="text/javascript">
        let demo = new Vue({
            el:"#demo",
            data:{
                message:'Hello'
            }
        })
    </script>
</body>
</html>

運行：（p能讀取input的內容并實時顯示）
在這里插入圖片描述

五、Vue實體

5.1 $watch（當某個變數被修改后呼叫）

通過呼叫new Vue（）回傳的物件的$watch方法，在每次某個變數發生改變的時候

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>監聽器</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="onDemo">
        <p>{{message}}</p>
        <button v-on:click="updateMsg">點擊可以修改段落內容</button>
    </div>

    <script type="text/javascript">
        let demo = new Vue({
            el:"#onDemo",
            data:{
                count:0,
                message:'我是人見人愛的段落喲'
            },
            methods:{
                updateMsg: function () {
                    if(++this.count %2 == 0){
                        this.message = '不管怎么樣，我都是人見人愛的段落，'
                    }else {
                        this.message = '跟你說了我永遠是人見人愛的段落了吧，'
                    }
                }
            }
        });
        //監聽demo的count變數
        demo.$watch('count', function (newVal, oldVal) {
            console.log("The oldVal of count is "+oldVal);
            console.log("The newVal of count is "+newVal);
        });
        //監聽demo的message變數
        demo.$watch('message',function (newVal, oldVal) {
            console.log("The oldVal of message is "+oldVal);
            console.log("The newVal of message is "+newVal);
        });
    </script>
</body>
</html>

結果：
在這里插入圖片描述
點擊兩次按鈕后：

5.2 生命周期

直接看圖就行了，沒學過的如果看不懂的話也不要緊，等學差不多了再回來看一次就行了，
這里大概說一下：這里目前最主要的就是知道這些個方法（我們也叫鉤子）在什么時候會被呼叫，比如

鉤子	呼叫時間
beforeCreate	在Vue物件被創建前
created	在Vue物件被創建后
beforeMount	在el渲染成html之前
mounted	在el渲染成html之后
beforeUpdate	資料發生改變之前
updateed	資料發生改變之后
beforeDestroy	拆除watcher、子組件、事件監聽器前
destroyed	拆除watcher、子組件、事件監聽器后

在這里插入圖片描述
用法也比較簡單，這里給出一個實體：

let demo = new Vue({
    el:"#onDemo",
    data:{
        count:0,
        message:'我是人見人愛的段落喲'
    },
    created: function(){
        console.log("The count is "+this.count);
        console.log("The message is "+this.message);
    },
    methods:{
        updateMsg: function () {
            if(++this.count %2 == 0){
                this.message = '不管怎么樣，我都是人見人愛的段落，'
            }else {
                this.message = '跟你說了我永遠是人見人愛的段落了吧，'
            }
        }
    },
});

六、模板語法

6.1 文本

資料系結最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值：

<span id=“demo”> {{ msg }}\ </span>

Mustache 標簽將會被替代為對應資料物件上 msg 屬性的值，無論何時，系結的資料物件上 msg屬性發生了改變，插值處的內容都會更新，

如果我們不希望這個值發生改變的話，那么我們可以給對應的標簽加上v-once屬性，（注意：這會影響到該節點上的其它資料系結）

<span id=“demo” v-once>這個將不會改變: {{ msg }}</span>

6.2 原始HTML

雙大括號會將資料解釋為普通文本，而非 HTML 代碼，為了輸出真正的 HTML，你需要使用 v-html 指令：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原始HTML</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <p id="demo">Using mustaches: {{ rawHtml }}</p>
<!--    <p id="demo">Using v-html directive: <span v-html="rawHtml"></span></p>-->
    <script>
        demo = new Vue({
            el:"#demo",
            data:{
                rawHtml: '<span style="color:red">This should be red.</span>'
            }
        })
    </script>
</body>
</html>

結果：
在這里插入圖片描述
如果這么寫：

<!--    <p id="demo">Using mustaches: {{ rawHtml }}</p>-->
    <p id="demo">Using v-html directive: <span v-html="rawHtml"></span></p>

結果：
在這里插入圖片描述
注意：在我們自己的站點上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊，請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值，

6.3 Attribute

Mustache 語法不能作用在 HTML attribute 上，遇到這種情況應該使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

對于布爾 attribute (它們只要存在就意味著值為 true)，v-bind 作業起來略有不同，在這個例子中：

<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，則 disabled 引數甚至不會被包含在渲染出來的 <button> 元素中，

6.4 使用JavaScript運算式

迄今為止，在我們的模板中，我們一直都只系結簡單的屬性值，但實際上，對于所有的資料系結，Vue.js 都提供了完全的 JavaScript 運算式支持，比如，我們可以這么寫：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

這些運算式會在所屬 Vue 實體的資料作用域下作為 JavaScript 被決議，有個限制就是，每個系結都只能包含單個運算式，所以下面的例子都不會生效，

<!-- 這是陳述句，不是運算式 -->
{{ let a = 1 }}

<!-- 流控制也不會生效，請使用三元運算式 -->
{{ if (ok) { return message } }}

6.5 指令

前面我們其實講過一點點，但是我都沒叫他們指令，而是用更通俗的叫法，我叫他們屬性，那指令是啥東西呢？其實就是以v-開頭的屬性，（例如，前面我們已經接觸了v-if，v-for，v-bind，v-html，v-once，v-on，v-model）

一些指令甚至可以接收一個引數，在指令名稱之后以冒號表示，例如，v-bind 指令可以用于回應式地更新 HTML屬性：

<a v-bind:href="url">...</a>

用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跳轉百度</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <a id="addr" v-bind:href="url">跳轉到百度</a>
    <script>
        new Vue({
            el:"#addr",
            data:{
                url: "http://www.baidu.com"
            }
        })
    </script>
</body>
</html>

結果：
在這里插入圖片描述
點擊后跳轉到百度頁面，

還有一個v-on用于系結標簽的事件監聽器，（可以看一下前面的例子回顧一下：當點擊button按鈕的時候，就呼叫他的updateMsg方法，）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>監聽器</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="onDemo">
        <p>{{message}}</p>
        <button v-on:click="updateMsg">點擊可以修改段落內容</button>
    </div>

    <script type="text/javascript">
        let demo = new Vue({
            el:"#onDemo",
            data:{
                count:0,
                message:'我是人見人愛的段落喲'
            },
            created: function(){
                console.log("The count is "+this.count);
                console.log("The message is "+this.message);
            },
            methods:{
                updateMsg: function () {
                    if(++this.count %2 == 0){
                        this.message = '不管怎么樣，我都是人見人愛的段落，'
                    }else {
                        this.message = '跟你說了我永遠是人見人愛的段落了吧，'
                    }
                }
            },
        });
        //監聽demo的count變數
        demo.$watch('count', function (newVal, oldVal) {
            console.log("The oldVal of count is "+oldVal);
            console.log("The newVal of count is "+newVal);
        });
        //監聽demo的message變數
        demo.$watch('message',function (newVal, oldVal) {
            console.log("The oldVal of message is "+oldVal);
            console.log("The newVal of message is "+newVal);
        });
    </script>
</body>
</html>

從Vue的2.6.0版本開始，我們還可以用方括號括起來的 JavaScript 運算式作為一個指令的引數：

<a v-bind:[attributeName]="url"> ... </a>

這里，如果我們的data中的attributeName值為"href"，那么這個系結將等價于 v-bind:href，然后url也是data中的屬性值，

當然了，這種動態的引數運算式也是有約束的，某些字符，如空格和引號，放在 HTML 屬性里是無效的，例如：<a v-bind:['foo' + bar]="value"> ... </a>，這么寫的話會觸發一個編譯警告，解決的方法自然是使用沒有空格或引號的運算式，或用計算屬性替代這種復雜運算式，
注意：在 DOM 中使用模板時 (直接在一個 HTML 檔案里撰寫模板)，還需要避免使用大寫字符來命名鍵名，因為瀏覽器會把 attribute 名全部強制轉為小寫：

比如這個<a v-bind:[someAttr]="value"> ... </a>，就會等價于<a v-bind:[someattr]="value"> ... </a>，

6.6 縮寫

v- 前綴作為一種視覺提示，用來識別模板中 Vue 特定的 attribute，當你在使用 Vue.js 為現有標簽添加動態行為 (dynamic behavior) 時，v- 前綴很有幫助，然而，對于一些頻繁用到的指令來說，就會感到使用繁瑣，因此，對于 v-bind 和 v-on 這兩個最常用的指令，Vue 還提供了特定縮寫：

v-bind的如下：

<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>

<!-- 動態引數的縮寫 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on的縮寫如下：

<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>

<!-- 縮寫 -->
<a @click="doSomething">...</a>

<!-- 動態引數的縮寫 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

七、計算屬性和偵聽器

模板內的運算式非常便利，但是設計它們的初衷是用于簡單運算的，在模板中放入太多的邏輯會讓模板過重且難以維護，例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在這個地方，模板不再是簡單的宣告式邏輯，你必須看一段時間才能意識到，這里是想要顯示變數 message 的翻轉字串，當你想要在模板中的多處包含此翻轉字串時，就會更加難以處理，

所以，對于任何復雜邏輯，我們都應當使用計算屬性，將他們抽取出來變成一個“方法”，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>計算屬性</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="example">
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
        <p>亂數:{{randomMessage}}</p>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#example',
            data: {
                message: 'Hello'
            },
            //computed下方的就是一系列的計算屬性的方法體啦!
            computed: {
                // 計算屬性的 getter
                reversedMessage: function () {
                    // `this` 指向 vm 實體
                    return this.message.split('').reverse().join('')
                },
                randomMessage: function () {
                    return Math.floor(Math.random()*100);
                }
            }
        })
    </script>
</body>
</html>

結果：
在這里插入圖片描述
這里，有些人可能會說，那我把他寫成一個方法，再呼叫不是一樣嗎？我們可以像下面這么寫，這么寫也是對的，那區別在哪里呢？答案是計算屬性是基于它們的回應式依賴進行快取的，只在相關回應式依賴發生改變時它們才會重新求值，這就意味著只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即回傳之前的計算結果，而不必再次執行函式，而如果我們寫在methods下，并進行呼叫的話，他每次都會重新求值再回傳，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>計算屬性</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="example">
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
        <p>Computed reversed message: "{{ reversedMessageFun() }}"</p>
        <p>亂數:{{randomMessage}}</p>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#example',
            data: {
                message: 'Hello'
            },
            //computed下方的就是一系列的計算屬性的方法體啦!
            computed: {
                // 計算屬性的 getter
                reversedMessage: function () {
                    // `this` 指向 vm 實體
                    return this.message.split('').reverse().join('')
                },
                randomMessage: function () {
                    return Math.floor(Math.random()*100);
                }
            },
            methods:{
                reversedMessageFun : function(){
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>
</html>

另外，當我們有一些資料需要隨著其它資料變動而變動時，我們其實很容易濫用 watch——特別是如果你之前使用過 AngularJS，然而，通常更好的做法是使用計算屬性而不是命令式的 watch 回呼，
讓我們來看看watch的寫法：

<div id="demo">{{ fullName }}</div>
<script type="text/javascript">
	let vm = new Vue({
	  el: '#demo',
	  data: {
	    firstName: 'Foo',
	    lastName: 'Bar',
	    fullName: 'Foo Bar'
	  },
	  watch: {
	    firstName: function (val) {
	      this.fullName = val + ' ' + this.lastName
	    },
	    lastName: function (val) {
	      this.fullName = this.firstName + ' ' + val
	    }
	  }
	})
</script>

但是如果我們用計算屬性的話，就是：

<div id="demo">{{ fullName }}</div>
<script type="text/javascript">
	let vm = new Vue({
	  el: '#demo',
	  data: {
	    firstName: 'Foo',
	    lastName: 'Bar'
	  },
	  computed: {
	    fullName: function () {
	      return this.firstName + ' ' + this.lastName
	    }
	  }
	})
</script>

上面我們一直在用計算屬性的getter，但是偶爾我們可能也會需要用他的set方法

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

現在再運行 vm.fullName = ‘John Doe’ 時，setter 會被呼叫，vm.firstName 和 vm.lastName 也會相應地被更新，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/305697.html

標籤：其他

上一篇：TypeScript 超詳細入門講解

下一篇：jQuery物件---獲取標簽總結