1、Vue 筆記（初識 Vue 、Vue 的基本指令、事件修飾符）-有解無憂

文章目錄

- 什么是 Vue
- 框架和庫的區別
- MVC 與 MVVM 的圖解關系
- 第一個 Vue 程式
- el 掛載點
- data 資料
- Vue 中的 `v-text` 指令
- Vue 中的 `v-html` 指令
- Vue 中的 `v-on` 指令
- Vue 中的 `v-show` 指令
- Vue 中的 `v-if` 指令
- Vue 中的 `v-bind` 指令
- Vue 中的 `v-for` 指令
- Vue 中的 `v-model` 指令
- 事件修飾符(stop、prevent、capture、self、once)
- Vue 指令之 `v-for` 和 `key` 屬性

什么是 Vue

Vue 是一套用于構建用戶界面的漸進式JavaScript框架，與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用，Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有專案整合，另一方面，當與現代化的工具鏈以及各種支持類別庫結合使用時，Vue 也完全能夠為復雜的單頁應用（SPA）提供驅動，

框架和庫的區別

框架：是一套完整的解決方案；對專案的侵入性較大，專案如果需要更換框架，則需要重新架構整個專案，
- 例如：node 中的 express；
庫（插件）：提供某一個小功能，對專案的侵入性較小，如果某個庫無法完成某些需求，可以很容易切換到其它庫實作需求，
- 1、從Jquery 切換到 Zepto
- 2、從 EJS 切換到 art-template

MVC 與 MVVM 的圖解關系

在這里插入圖片描述

第一個 Vue 程式

步驟：
1、匯入開發版本的 Vue.js
2、創建 Vue 實體物件，設定 el 屬性和 data 屬性
3、使用簡潔的模板語法把資料渲染到頁面上

代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue基礎</title>
</head>

<body>
    <div id="app">
        {{message}}
    </div>
    <!-- 開發環境版本，包含了有幫助的命令列警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> </script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Hello Vue!"
            }
        })

    </script>
</body>

</html>

頁面效果：
在這里插入圖片描述

el 掛載點

el 是用來設定 Vue 實體掛載（管理）的元素
Vue 會管理 el 選項命中的元素及其內部的后代元素
可以使用其他選擇器，但是建議使用 ID選擇器（其他選擇器不止一個）
可以使用其他雙標簽，但是不能使用 html 和 body

data 資料

Vue 中用到的資料定義在 data 中
data 中可以寫復雜型別的資料
渲染復雜型別的資料時，遵循 js 的語法即可

Vue 中的 `v-text` 指令

v-text 指令的作用是：設定標簽的內容（textContent）
默認寫法會替換全部內容，使用差值運算式 {{ }} 可以替換指定內容

代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h2 v-text="message+'000'">123</h2>
        <h2 v-text="info+'000'">123</h2>
        <h2>{{message+'000'}}123</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Vue!",
                info: "ni hao a"
            }
        })

    </script>
</body>

</html>

頁面效果：
(其中使用 v-text 指令的第一個和第二個的 123 會被全部替換)
在這里插入圖片描述

Vue 中的 `v-html` 指令

v-html 指令的作用是：設定元素的 innerHTML
內容中有 html 結構會被決議為標簽
v-text 指令無論內容是什么，只會決議為文本

代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                content: "<a href='http://www.baidu.com' target='_blank'>百度</a>"
            },
        })

    </script>
</body>

</html>

頁面效果：
在這里插入圖片描述

Vue 中的 `v-on` 指令

基礎：
v-on 指令的作用是：為元素系結事件
事件名不需要寫 on
指令可以簡寫為 @
系結的方法定義在 methods 屬性中
方法內部通過 this 關鍵字可以訪問定義在 data 中的資料
補充：
事件系結的方法寫成函式呼叫的形式，可以傳入自定義引數
定義方法時需要定義形參來接收傳入的實參
事件的后面跟上.修飾符可以對事件進行限制
enter可以限制觸發的按鍵為回車
事件修飾符有多種

代碼：
基礎：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on簡寫" @click="doIt">
        <input type="button" value="雙擊事件" @dblclick="doIt">
        <h2 v-on:click="changeFood">{{ food }}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                food: "番茄炒雞蛋"
            },
            methods: {
                doIt: function () {
                    alert("do It!");
                },
                changeFood() {
                    // console.log(this.food);
                    this.food += "很好吃";
                }
            },
        })

    </script>
</body>

</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>
</head>

<body>
    <div id="app">
        <input type="button" value="點擊" @click="doIt(666,'老鐵')">
        <input type="text" @keyup.enter="sayHi">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                doIt: function (p1, p2) {
                    console.log("do it!");
                    console.log(p1);
                    console.log(p2);
                },
                sayHi: function () {
                    alert("吃了沒？");
                }
            },
        })

    </script>
</body>

</html>

注意： v-on:click 可以簡寫為 @click

Vue 中的 `v-show` 指令

v-show 指令的作用是：根據真偽切換元素的顯示狀態
原理是修改元素的 display ，實作顯示隱藏
指令后面的內容，最終都會決議為布林值
值為 true 元素顯示，值為 false 元素隱藏

代碼：
(本代碼實作對圖片的顯示和隱藏，注意運行時要新建一個 img 檔案夾并保存一張圖片，根據你的圖片名稱更換名字)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="button" value="切換顯示狀態" @click="changeIsShow">
        <img v-show="isShow" src="./img/1.png" alt="">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false
            },
            methods: {
                changeIsShow: function () {
                    this.isShow = !this.isShow;
                }
            },
        })

    </script>
</body>

</html>

Vue 中的 `v-if` 指令

v-if 指令的作用是：根據運算式的真偽切換元素的顯示狀態
本質是通過操作 dom 元素來切換顯示狀態
運算式的值為 true ，元素存在于 dom 樹中，為 false ，從 dom 樹中移除
代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="button" value="切換顯示" @click="toggleIsShow">
        <p v-if="isShow">Vue</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false
            },
            methods: {
                toggleIsShow: function () {
                    this.isShow = !this.isShow;
                }
            },

        })
    </script>
</body>

</html>

注意：v-show 和 v-if 都可以切換元素的顯示狀態，頻繁切換用 v-show

Vue 中的 `v-bind` 指令

v-bind 指令的作用是：為元素系結屬性
完整寫法是 v-bind: 屬性名
簡寫的話可以直接省略 v-bind ,只保留 : 屬性名
需要動態的增刪 class 建議使用物件的方式
代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc: "http://www.itheima.com/images/logo.png",
                imgTitle: "圖片",
                isActive: false
            },
            methods: {
                toggleActive: function () {
                    this.isActive = !this.isActive;
                }
            },
        })
    </script>
</body>

</html>

Vue 中的 `v-for` 指令

v-for 指令的作用是：根據資料生成串列結構
陣列經常和 v-for 結合使用
語法是 （item,index）in 資料（index是索引）
item 和 index 可以結合其他指令一起使用
陣列長度的更新會同步到頁面上，是回應式的

代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="button" value="添加資料" @click="add">
        <input type="button" value="移除資料" @click="remove">
        <ul>
            <li v-for="(item,index) in arr">{{index+1}} {{ item }}</li>
        </ul>
        <h2 v-for="it in fruit" :title="it.name">{{it.name}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr: ["北京", "上海", "廣州", "深圳"],
                fruit: [
                    { name: "apple" },
                    { name: "banana" }
                ]
            },
            methods: {
                add: function () {
                    this.fruit.push({ name: "orange" });
                },
                remove: function () {
                    this.fruit.shift();
                }
            },
        })

    </script>
</body>

</html>

頁面效果：
在這里插入圖片描述

Vue 中的 `v-model` 指令

v-model 指令的作用是便捷的設定和獲取表單元素的值
系結的資料會和表單元素值相關聯
系結的資料<–>表單元素的值

代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{message}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Vue"
            },
            methods: {
                getM: function () {
                    alert(this.message);
                },
                setM: function () {
                    this.message = "java";
                }
            },
        })
    </script>
</body>

</html>

事件修飾符(stop、prevent、capture、self、once)

.stop 阻止冒泡
.prevent 阻止默認事件
.capture 添加事件偵聽器時使用事件捕獲模式
.self 只當事件在該元素本身（比如不是子元素）觸發時觸發回呼
.once 事件只觸發一次

代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .inner {
            height: 150px;
            background: darkcyan;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 使用 .stop 阻止冒泡 -->
        <div class="inner" @click="divHandler">
            <input type="button" value="戳他" @click.stop="btnHandler">
        </div>

        <!-- 使用 .prevent 阻止默認行為 -->
        <a href="http://www.baidu.com" @click.prevent="linkClick">有問題，去百度</a>

        <!-- 使用 .capture 實作捕獲觸發事件機制 -->
        <div class="inner" @click.capture="divHandler">
            <input type="button" value="戳他" @click="btnHandler">
        </div>
        <br>

        <!-- 使用 .self 實作只有點擊當前元素的時候，才會觸發事件處理函式 -->
        <div class="inner" @click.self="divHandler">
            <input type="button" value="戳他" @click="btnHandler">
        </div>

        <!-- 使用 .once 只觸發一次事件處理函式 -->
        <a href="http://www.baidu.com" @click.prevent.once="linkClick">有問題，去百度</a>

        <!-- .self 只會阻止自己身上冒泡行為的觸發，并不會真正阻止 冒泡行為 -->
    </div>

    <script src="lib/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {
                divHandler() {
                    console.log("觸發了div")
                },
                btnHandler() {
                    console.log("觸發了btn")
                },
                linkClick() {
                    console.log("鏈接的點擊事件")
                }
            },
        })
    </script>
</body>

</html>

事件冒泡和事件捕獲
事件冒泡是由IE開發團隊提出來的，即事件開始時由最具體的元素（檔案中嵌套層次最深的那個節點）接收，然后逐級向上傳播，
當用戶點擊了 <div> 元素，click 事件將按照 <div>—><body>—><html>—>document 的順序進行傳播，若在 <div> 和 <body> 上都定義了 click 事件點擊 <div> ，將先輸出 “div” ，再輸出 “body” ，
在這里插入圖片描述
事件捕獲是由Netscape Communicator團隊提出來的，是先由最上一級的節點先接收事件，然后向下傳播到具體的節點，
用戶點擊了 <div> 元素，采用事件捕獲，則 click 事件將按照 document—><html>—><body>—><div> 的順序進行傳播，若在 <div> 和 <body> 上都定義了 click 事件，點擊 <div> ，將先輸出“body”，再輸出“div”，
在這里插入圖片描述

Vue 指令之 `v-for` 和 `key` 屬性

在組件中，使用 v-for 回圈的時候，或者在一些特殊的情況中，如果 v-for 有問題，必須在使用 v-for 的同時，指定唯一的字串/數字型別 :key 值
注意： key 在使用的時候，必須使用 v-bind 屬性系結的形式，指定 key 的值
注意： v-for 回圈的時候，key 屬性只能使用 number 獲取 string
代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>
            <label for="">Id:
                <input type="text" v-model="id">
            </label>

            <label for="">Name:
                <input type="text" v-model="name">
            </label>

            <input type="button" value="添加" @click="add">
        </div>
        <p v-for="item in list" :key="item.id">
            <input type="checkbox" name="" id="">
            {{item.id}}---{{item.name}}
        </p>
    </div>

    <!-- 開發環境版本，包含了有幫助的命令列警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                list: [
                    { id: 1, name: '李斯' },
                    { id: 2, name: '李四' },
                    { id: 3, name: '張三' },
                    { id: 4, name: '韓飛' },
                    { id: 5, name: '小汪' },
                ]
            },
            methods: {
                add() {
                    // this.list.push({ id: this.id, name: this.name });
                    this.list.unshift({ id: this.id, name: this.name });
                }
            }
        });
    </script>
</body>

</html>

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

標籤：其他

上一篇：vue 常用的 Echarts 示例

下一篇：Java桑葚圖

1、Vue 筆記（初識 Vue 、Vue 的基本指令、事件修飾符）

文章目錄

什么是 Vue

框架和庫的區別

MVC 與 MVVM 的圖解關系

第一個 Vue 程式

el 掛載點

data 資料

Vue 中的 v-text 指令

Vue 中的 v-html 指令

Vue 中的 v-on 指令

Vue 中的 v-show 指令

Vue 中的 v-if 指令

Vue 中的 v-bind 指令

Vue 中的 v-for 指令

Vue 中的 v-model 指令

事件修飾符(stop、prevent、capture、self、once)

Vue 指令之 v-for 和 key 屬性

Vue 中的 `v-text` 指令

Vue 中的 `v-html` 指令

Vue 中的 `v-on` 指令

Vue 中的 `v-show` 指令

Vue 中的 `v-if` 指令

Vue 中的 `v-bind` 指令

Vue 中的 `v-for` 指令

Vue 中的 `v-model` 指令

Vue 指令之 `v-for` 和 `key` 屬性