Vue02

7.修飾符

7.1基本說明

修飾符（Modifiers）是以.指明的后綴，指出某個指令以特殊方式系結

官方檔案：修飾符

Vue中的修飾符有：

事件修飾符
按鍵修飾符
系統修飾符

事件修飾符

<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再多載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即內部元素觸發的事件先在此處理，然后才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當在 event.target 是當前元素自身時觸發處理函式 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>

<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發 -->
<!-- 而不會等待 `onScroll` 完成  -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>

7.2事件修飾符-應用實體

需求：演示 v-on:submit.prevent 的使用，如果沒有輸入名字，當點擊注冊按鈕時，控制臺輸出”請輸入名字“，否則輸出“提交表單”，

為什么在開發中，有時需要讓某個指令以特殊方式系結，比如表單提交？

有時我們不希望將這個表單進行整體提交，而是Ajax的方式進行提交

因為表單整體提交會導致多載頁面，而Ajax方式可以有選擇性地提交資料，并區域重繪

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>修飾符的使用</title>
</head>
<body>
<div id="app">
    <!--
        1.修飾符用于指出一個指令應該以特殊方式系結
        2.v-on:submit.prevent中的.prevent 修飾符表示阻止表單提交的默認行為
        3."onMySubmit()" -執行程式員指定的自定義方法
    -->
    <form action="http://www.baidu.com" v-on:submit.prevent="onMySubmit">
        <!--這里因為使用的是雙向渲染，當發現data資料池中的monster物件沒有name屬性時，會動態地幫你生成name-->
        名字：<input type="text" v-model="monster.name"/><br/><br/>
        <button type="submit">注冊</button>
    </form>
    <p>這里是服務器回送的資料=>{{count}}</p>
</div>
<script src="https://www.cnblogs.com/liyuelian/archive/2023/01/08/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {//資料池
            monster: {//monster資料（物件）的屬性，可以動態生成
            },
            count: 0
        },
        methods: {
            onMySubmit() {
                //console.log("自定義的表單提交處理...");
                if (this.monster.name) {//如果name為undefined或""或null,都為 false
                    console.log("提交表單 name = ", this.monster.name);
                    //這里就可以根據業務發出ajax請求到后端
                    //得到資料后，再進行資料更新
                    this.count = 666;//假設為服務器回傳的處理
                } else {
                    console.log("請輸入名字...");
                }
            }
        }
    });
</script>
</body>
</html>

7.3拓展-其他修飾符

按鍵修飾符按鈕修飾符 — Vue.js (vuejs.org)

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>修飾符的使用</title>
</head>
<body>
<div id="app">
    <h1>修飾符拓展案例</h1>
    <!--按x鍵觸發-->
    <input type="text" v-on:keyup.x="enterX"/>
</div>
<script src="https://www.cnblogs.com/liyuelian/archive/2023/01/08/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        methods: {
            enterX() {
                alert("你在輸入框中輸入了x鍵");
            }
        }
    });
</script>
</body>
</html>

此外還有系統修飾符，詳細請看vue檔案：系統修飾符 — Vue.js (vuejs.org)

8.條件渲染/控制 v-if & v-show

8.1基本說明

Vue提供了 v-if 和 v-show 條件指令完成條件渲染/控制

官方檔案：條件渲染 — Vue.js (vuejs.org)

v-if 介紹

v-if 指令用于條件性地渲染一塊內容，這塊內容只會在指令的運算式回傳 truthy 值的時候被渲染，

<!--v-if指令會在資料池中找到awesome，如果該資料值對應ture，則渲染下面這條內容，否則為false，不渲染
（如果找不到該資料，就是undefined，也為false）-->
<h1 v-if="awesome">Vue is awesome!</h1>

也可以用 v-else 添加一個“else 塊”：

<h1 v-if="awesome">Vue is awesome!</h1>
<!--如果上面if塊的awesome回傳false，就渲染else塊內容-->
<h1 v-else>Oh no ??</h1>

v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會被識別，

v-show 介紹

另一個用于根據條件展示元素的選項是 v-show 指令，用法大致一樣：

<!--v-show 指令也會在資料池中找到資料ok，如果該資料值對應ture，則渲染下面這條內容，否則為false，不渲染（如果找不到該資料，就是undefined，也為false）-->
<h1 v-show="ok">Hello!</h1>

不同的是帶有 v-show 的元素始侄訓被渲染并保留在 DOM 中，v-show 只是簡單地切換元素的 CSS property display，

在JavaScript中，0、null、undefined、空串""都被認為是false，其他都被認為是true

8.2應用實體

需求：演示條件渲染使用（使用 v-if 和 v-show 實作）

使用 v-if 實作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>條件渲染 v-if</title>
</head>
<body>
<div id="app">
    <!--
    v-model將表單元素的checked值系結了sel，
    當改變checked值時，sel也會隨之改變，從而改變資料池，
    然后v-if v-else根據資料池的資料進行選擇渲染

    checked值->sel->資料池的sel->v-if/v-else
    -->
    <input type="checkbox" v-model="sel">是否同意條款[v-if實作]
    <!--
		v-if/v-else 會根據回傳的值，來決定是否動態創建對應的子組件 <h1>
	-->
    <h1 v-if="sel">你同意條款</h1>
    <h1 v-else>你不同意條款</h1>
</div>
<script src="https://www.cnblogs.com/liyuelian/archive/2023/01/08/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {//data資料池
            sel: false
        }
    });
</script>
</body>
</html>

點擊checkbox前后的改變：

使用 v-show 實作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>條件渲染 v-show</title>
</head>
<body>
<div id="app">
    <input type="checkbox" v-model="sel">是否同意條款[v-show實作]
    <h1 v-show="sel">你同意條款</h1>
    <!--取反-->
    <h1 v-show="!sel">你不同意條款</h1>
</div>
<script src="https://www.cnblogs.com/liyuelian/archive/2023/01/08/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {//data資料池
            sel: false
        }
    });
</script>
</body>
</html>

8.3v-if VS v-show

v-if 會確保在切換的程序中，條件塊內的事件監聽器和子組件動態地被銷毀和重建
v-show 機制相對簡單，不管初始條件是什么，元素總是會全部被渲染，并且只是對CSS進行切換
使用建議：如果要頻繁地切換，建議使用 v-show；如果運行時條件很少改變，使用v-if 較好

如下：v-if會對子組件進行動態創建和銷毀，對性能有一定影響，因此如果要頻繁的切換，建議使用v-show

v-show只是對CSS進行切換：

8.4練習

如下，當用戶輸入成績時，可以輸出對應的級別

90分以上，顯示優秀
70分以上，顯示良好
60分以上，顯示及格
低于60，顯示不及格
如果用戶的成績大于100，就修正成100，如果用戶輸入的成績小于0，就修正為0

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-if練習</title>
</head>
<body>
<div id="app">
    <h1>演示條件判斷</h1>
    請輸入成績（0-100）：
    <!--
    系結事件，當輸入框失去焦點后呼叫check方法
    -->
    <input type="text" v-model="score" v-on:blur="check"><br>
    <p>你當前的成績是：{{score}}</p>
    <p v-if="score >= 90">級別：優秀</p>
    <p v-else-if="score >= 70">級別：良好</p>
    <p v-else-if="score >= 60">級別：及格</p>
    <p v-else="score < 60">級別：不及格</p>
</div>
<script src="https://www.cnblogs.com/liyuelian/archive/2023/01/08/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            score: 0
        },
        methods: {
            check() {
                if (this.score < 0) {
                    this.score = 0;
                } else if (this.score > 100) {
                    this.score = 100;
                }
            }
        }
    })
</script>
</body>
</html>

9.串列渲染 v-for

9.1基本說明

Vue提供了 v-for 串列回圈指令

官方檔案：https://v2.cn.vuejs.org/v2/guide/list.html

9.1.1對陣列進行遍歷

用 v-for 指令基于一個陣列來渲染一個串列，v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源資料陣列，而 item 則是被迭代的陣列元素的別名(自定義)，

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

結果：

9.1.2遍歷物件的property

可以用 v-for 來遍歷一個物件的 property，

<ul id="v-for-object" >
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

結果：

How to do lists in Vue
Jane Doe
2016-04-10

你也可以提供第二個的引數為 property 名稱 (也就是鍵名)：

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

結果：

title: How to do lists in Vue

author: Jane Doe

publishedAt: 2016-04-10

還可以用第三個引數作為索引：

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

結果：

0.title: How to do lists in Vue

1.author: Jane Doe

2.publishedAt: 2016-04-10

9.2應用實體

演示串列渲染使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>串列渲染 v-for</title>
</head>
<body>
<div id="app">
    <h1>簡單的串列渲染</h1>
    <ul>
        <!--基本語法:
        <li v-for="變數 in 數字">{{變數}}</li>-->
        <li v-for="i in 3">
            {{i}}
        </li>
    </ul>
    <h1>簡單的串列渲染-帶索引</h1>
    <ul>
        <!--基本語法:
       <li v-for="(變數,索引) in 陣列/數字/物件陣列">{{變數}}-{{索引}}</li>-->
        <li v-for="(i,index) in items">
            {{index}}-{{i}}
        </li>
    </ul>
    <h1>遍歷資料串列</h1>
    <table border="1" >
        <!--基本語法:
        <li v-for="變數 in 物件陣列">{{物件的屬性}}</li>-->
        <tr v-for="(monster,index) in monsters">
            <td>{{index}}</td>
            <td>{{monster.id}}</td>
            <td>{{monster.name}}</td>
            <td>{{monster.age}}</td>
        </tr>
    </table>
</div>
<script src="https://www.cnblogs.com/liyuelian/archive/2023/01/08/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            items: ["三國演義", "紅樓夢", "西游記", "水滸傳"],
            monsters: [
                {id: 1, name: "牛魔王", age: 800},
                {id: 2, name: "黑山老妖", age: 900},
                {id: 3, name: "紅孩兒", age: 200}
            ]
        }
    });
</script>
</body>
</html>

9.3練習

如圖，顯示成績及格的學生串列

將學生物件存放在陣列中
遍歷顯示所有學生，只顯示成績及格的學生

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for練習</title>
</head>
<body>
<div id="app">
    <h1>及格的學生成績串列</h1>
    <table border="1" >
        <tr>
            <td>id</td>
            <td>name</td>
            <td>age</td>
            <td>score</td>
        </tr>
        <tr v-for="student in students" v-if="student.score >= 60">
            <td>{{student.id}}</td>
            <td>{{student.name}}</td>
            <td>{{student.age}}</td>
            <td>{{student.score}}</td>
        </tr>
    </table>
</div>
<script src="https://www.cnblogs.com/liyuelian/archive/2023/01/08/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            students: [
                {id: 1, name: "jack", age: 20, score: 70},
                {id: 2, name: "marry", age: 20, score: 60},
                {id: 3, name: "tom", age: 20, score: 28},
                {id: 4, name: "smith", age: 20, score: 99}
            ]
        }
    });
</script>
</body>
</html>

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

標籤：其他

上一篇：CSS優先級-權重疊加計算

下一篇：Cesium滑鼠移動到模型上，給模型添加高亮輪廓(四)

day05-Vue02