• Vue中对于指令的介绍

    Vue指令

    文章目录

    1、介绍

    Vue 会根据不同的【指令】，针对标签实现不同的【功能】。

    指令：带有v-前缀的特殊标签属性

    2、指令介绍

    官网指令介绍：https://v2.cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4

    image-20230910120444455

    2.1、v-html

    我们使用常规的差值表达式是无法解析网页链接的，所以我们就需要“v-html”指令来实现。

    v-html可以动态的设置innerHTML属性

    <body>
    <div id="app">
        {msg}} -->
        <div v-html="msg">div>
    div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                msg:
                    ' 百度'
            }
        })
    script>
body>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    2.2、v-show和v-if

    • v-show

      1. 作用：控制元素显示隐藏

      2. 语法：v-show = "表达式” 表达式值true显示,false隐藏

      3. 原理：切换display:none控制显示隐藏

      4. 场景：频繁切换显示隐藏的场景

    • v-if

      1. 作用：控制元素显示隐藏（条件渲染)

      2. 语法：v-if = “表达式” 表达式值true显示, false隐藏

      3. 原理:基于条件判断，是否创建或移除元素节点

      4. 场景:要么显示，要么隐藏，不频繁切换的场景

    3.2、v-else 和 v-else-if

    1. 作用:辅助v-if 进行判断渲染

    2. 语法: v-elsev-else-if = “表达式”

    3. 注意:需要紧挨着v-if 一起使用

    <body>
    <div id="app">
        <p v-if="gender === 1">性别:男p>
        <p v-else>性别:女p>
        <hr>
        <p v-if="score>=90">成绩评定A:奖励电脑一台p>
        <p v-else-if="score>=70">成绩评定B:奖励周末郊游p>
        <p v-else-if="score>=60">成绩评定c:奖励零食礼包p>
        <p v-else>成绩评定D:惩罚一周不能玩手机p>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                gender: 2,
                score: 80
            }
        })
    script>>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    3.3、v-on

    1. 作用:注册事件=添加监听+提供处理逻辑

    2. 语法:

      1. v-on:事件名=“内联语句”
      2. v-on:事件名= “methods中的函数名”

    可以使用’@‘来代替’v-on:‘

    内联语句：

    <body>
    <div id="app">
        <button v-on:click="count--">-button>
        <span>{{count}}span>
        <button v-on:click="count++"> +button>
        <button @click="count++"> +button>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                count: 100
            },
        })
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    method方式：

        <div id="app">
        <button v-on:click="count--">-button>
        <span>{{count}}span>
        <button v-on:click="count++"> +button>
        <button @click="fun">函数处理+button>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                count: 100
            },
            methods: {
                fun() {
                    app.count++;
                    this.count++;
                }
            }
        })
    script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    在methods中访问data中的数据，需要用过app来引用，但是以防变量名的更改，所以可以通过使用this来指向当前的实例来获取data中的对象。

    函数传参调用：

        <div id="app">
        <div class="box">
            <h3>小黑自动售货机h3>
            <button @click="buy(5)">可乐5元button>
            <button @click="buy(10)">咖啡10元button>
        div>
        <p>银行卡余额:{{ money }}元p>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                money: 100
            },
            methods: {
                buy(price) {
                    this.money -= price;
                }
            }

        })
    script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    3.4、v-bind

    1. 作用:动态的设置html的标签属性→src url title …

    2. 语法: v-bind:属性名=“表达式”

    3. “v-bind:“的简写：”:”

        <div id="app">
        <img v-bind:src="img" v-bind:title="msg">
        <img :src="img" :title="msg">
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                img: 'https://gitee.com/mannor/resouces/raw/master/PicGo/image-20230807220043572.png',
                msg: '在linux中拉取代码'
            }
        })
    script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    3.5、v-for

    1. 作用：基于数据循环，多次渲染整个元素→数组、对象、数字…

    2. 遍历数组语法:
      v-for = “(item, index) in 数组名”

    item：代指的是数组的内容；index：是指当前遍历的数组的下标。甚至不使用index的时候index还可以省略。

     <div id="app">
        <h3>mannor水果店h3>
        <ul>
            <li v-for="(item,index) in list ">{{list[index]}}li>
        ul>
   		<ul>
            <li v-for="item in list ">{{item}}li>
        ul>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                list: ["西瓜", "芒果", "香蕉", "鸭梨", "西红柿"]
            }
        })
    script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    3.6、v-for 中的key

    • 语法：key属性=“唯一标识”

    • 作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用

      v-for的默认行为会尝试原地修改元素（就地复用：元素被更改了，但是填充元素的容器并没有被删除)。

    • 注意点:

      1. key的值只能是字符串或数字类型
      2. key的值必须具有唯一性
      3. 推荐使用id 作为 key (唯一），不推荐使用index作为key（会变化，不对应)

    3.7、v-model

    1. 作用：给表单元素使用，双向数据绑定可以快速获取或设置表单元素内容

      • 数据变化→视图自动更新
      • 视图变化→数据自动更新

    2. 语法：v-model = ‘变量’

     <div id="app">
        账户: <input type="text" v-model="username"><br><br>
        密码: <input type="password" v-model="password"> <br><br>
        <button @click="login">登录button>
        <button @click="reset">重置button>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                username: '',
                password: ''
            },
            methods: {
                login() {
                    console.log(this.username, this.password);
                },
                reset() {
                    this.username = '';
                    this.password = '';
                }
            }
        })
    script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    3、指令修饰符

    通过".”指明一些指令后缀，不同后缀封装了不同的处理操作，其作用是简化代码

    3.1、 按键修饰符

    • @keyup.enter→键盘回车
    <body>
    <div id="app">
        <input type="text" @keyup.enter="fun"> input>>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {},
            methods: {
                fun() {
                    console.log("输入框以回车框的形式提交");
                }
            }
        });
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    3.2、 监听v-model修饰符·

    • v-model.trim→去除首尾空格
    • v-model.number →将输入框中的数字字符转为数字
    <body>
    <div id="app">
        姓名：<input type="text" v-model.trim="text">input>
        年龄：<input type="text" v-model.number="text">input>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                text: 0,
            },
        });
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    3.3、 事件修饰符

    • @事件名.stop→阻止冒泡

    • @事件名.prevent →阻止默认行为（阻止链接的跳转）

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 20px;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    style>
head>
<body>
    <div id="app">
        <h3>@事件名.stop → 阻止冒泡h3>
        <div @click="fatherFn" class="father">
            <div @click.stop="sonFn" class="son">儿子div>
        div>
        <h3>@事件名.prevent → 阻止默认行为h3>
        <a @click.prevent href="http://www.baidu.com">阻止默认行为a>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                username: '',
                age: '',
            },
            methods: {
                fatherFn() {
                    alert('老父亲被点击了')
                },
                sonFn() {
                    alert('儿子被点击了')
                }
            }
        })
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
  • 相关阅读:
    计算机毕业设计（附源码）python游戏盒子系统
    【CTA系列】复合中短周期双均线策略
    java选做实验4常用集合类使用
    【面试经典150 | 双指针】判断子序列
    次氯酸消毒剂制备中的全氟醚橡胶密封耐腐蚀电动阀门解决方案
    Linux进阶-编译工具链
    JVS低代码如何实现复杂物料编码？
    大话机器学习准确率(Accuracy)、精确率(Pecision)、召回率(Recall)以及TP、FP、TN、FN
    sealos 作者创业心路历程
    DPDK UDP通信
  • 原文地址：https://blog.csdn.net/m0_63144319/article/details/132792010