学习笔记——初识指令

最新推荐文章于 2024-09-28 21:20:29 发布
最新推荐文章于 2024-09-28 21:20:29 发布
阅读量513 收藏 5
点赞数 6
文章标签： 笔记 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80093566/article/details/140413727
版权

文章目录

一、介绍

Vue会根据不同的指令，针对标签实现不同的功能。指令是带有v-前缀的特殊标签属性。

二、常用指令

1.v-html

作用：设置元素的innerHTML，动态解析标签
语法：v-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">
        <div v-html="msg"></div>
        <div v-html="msg2"></div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: `
                    <a href = "http://www.baidu.com">
                        百度
                    </a>
                `,
                msg2: `
                    <h1>通过v-html动态解析了h1标签</h1>
                `
            }
        })
    </script>
</body>
</html>

2.v-show

作用：控制元素显示隐藏
语法：v-show = "表达式" 如果表达式为true，则显示元素，否则隐藏元素。
原理：切换css的 display: none 来控制显示隐藏
场景：频繁切换显示隐藏的场景

3.v-if

作用：控制元素显示隐藏（条件渲染）
语法：v-if = "表达式" 如果表达式为true，则显示元素，否则隐藏元素。
原理：根据判断条件控制元素的拆功能键和移除
场景：要么显示，要么隐藏

v-show和v-if的区别
<!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>
        .box {
            margin: 10px auto;
            width: 200px;
            height: 100px;
            border: 2px solid #000;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    
    <div id="app">
        <div v-show="flag" class="box">我是v-show控制的盒子</div>
        <div v-if="flag" class="box">我是v-if控制的盒子</div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                flag: true
            }
        })
    </script>
</body>
</html>

4.v-else 和 v-else-if

作用：辅助v-if进行判断渲染
语法：v-else v-else-if = "表达式"
注意：需要紧接着v-if使用

<!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-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/dist/vue.js"></script>
    <script>

        const app = new Vue({
            el: '#app',
            data: {
                gender: 2,
                score: 95
            }
        })
    </script>
    
</body>
</html>

运行结果

image.png

5.v-on

作用：为元素绑定对应的事件，注册事件 = 添加监听 + 提供处理逻辑
语法：v-on:属性名称， 简写为@属性名称

  • v-on:事件名 = "内联语句"，适用于逻辑简单的场景
    - v-on:事件名 = "methods中的函数名"，适用于逻辑代码量多的场景

注意：由于内联语句是在模板当中写的代码，所以可以直接访问data里面的数据，而函数当中提供业务逻辑的是不能直接访问data里面的数据，需要通过实例来访问。

内联语句

<!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">
      <button @click="count--">-</button>
      <span>{{ count }}</span>
      <button v-on:click="count++">+</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          count: 100
        }
      })
    </script>
    
</body>
</html>

事件处理函数

注意：

  • 事件处理函数应该写到一个跟data同级的配置项（methods）中
  • methods中的函数内部的this都指向Vue实例
<!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">
        <button @click="fn">切换显示隐藏</button>
        <h1 v-show="isShow">事件处理函数</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                isShow: true
            },
            methods: {
                fn () {
                    // 让提供的所有methods中的函数，this都指向当前实例
                    this.isShow = !this.isShow
                }
            }
        })
    </script>

</body>

</html>

给事件处理函数传参

  • 如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象
  • 如果传递了参数，则实参 $event 表示事件对象，固定用法。
<!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>
        .box {
            border: 3px solid #000000;
            border-radius: 10px;
            padding: 20px;
            margin: 20px;
            width: 200px;
        }

        h3 {
            margin: 10px 0 20px 0;
        }

        p {
            margin: 20px;
        }
    </style>

</head>

<body>

    <div id="app">
        <div class="box">
            <h3>小V自动售货机</h3>
            <button @click="buy(5)">可乐5元</button>
            <button @click="buy(10)">咖啡10元</button>
            <button @click="buy(8)">牛奶8元</button>
        </div>
        <p>银行卡余额：{{ money }}元</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                money: 100
            },
            methods: {
                buy(price) {
                    if (this.money < price) {
                        alert('余额不足')
                    } else {
                        this.money -= price
                    }
                }
            }
        })
    </script>

</body>

</html>

6.v-bind

  1. 作用：动态设置html的标签属性 比如：src、url、title
  2. 语法：v-bind:属性名="表达式"
  3. v-bind：可以简写成 => :，即:"表达式"

比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。
则可以这样设置属性值：

  • <img v-bind:src="url" />
  • <img :src="url" /> （v-bind可以省略）
<!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">
        <img v-bind:src="imgUrl" v-bind:title="msg" alt="" style="width: 400px;">
        <img :src="imgUrl" :title="msg" alt="" style="width: 400px;">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                imgUrl: '这里是你的图片路径',
                msg: 'hello'
            }
        })
    </script>

</body>

</html>

7.v-for

作用：Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。
语法：v-for 指令需要使用 v-for="(item, index) in arr" 形式的特殊语法，其中：

  • item 是数组中的每一项
  • index 是每一项的索引，不需要可以省略：v-for = "item in arr"
  • arr 是被遍历的数组

此语法也可以遍历对象和数字

<!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">
        <h3>小V水果店</h3>
        <ul>
            <li v-for="(item, index) in fruits">
                {{ item }} -> {{ index }}
            </li>
        </ul>

        <ul>
            <li v-for="item in fruits">
                {{ item }}
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                fruits: ['苹果', '香蕉', '西瓜']
            }
        })
    </script>

</body>

</html>

v-for中的key

语法： key=“唯一值”
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
为什么加key：因为Vue 的默认行为会尝试原地修改元素（就地复用），即没加key时，无论我们删除哪一个列表项，Vue都会删除最后一个列表项，然后把更新后的覆盖掉排在前面的列表项。而加key之后，想删除哪一个列表项就可以删除哪一个列表项。
注意：

  • key 的值只能是字符串 或 数字类型
  • key 的值必须具有唯一性
  • 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）
<!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">
        <h3>简易书架</h3>
        <ul>
            <li v-for="book in booksList" :key="book.id">
                <span>{{book.name}}</span>
                <span>{{book.author}}</span>
                <button @click="delBook(book.id)">删除</button>
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                booksList: [
                    { id: 1, name: '《红楼梦》', author: '曹雪芹' },
                    { id: 2, name: '《西游记》', author: '吴承恩' },
                    { id: 3, name: '《水浒传》', author: '施耐庵' },
                    { id: 4, name: '《三国演义》', author: '罗贯中' }
                ]
            },
            methods: {
                delBook(id) {
                    this.booksList = this.booksList.filter(book => book.id !== id)
                }
            }
        })
    </script>
    
</body>
</html>

8.v-model

介绍：所谓双向绑定就是：

  1. 数据改变后，呈现的页面结果会更新。数据变化 -> 视图自动更新
  2. 页面结果更新后，数据也会随之而变。视图变化 -> 数据自动更新

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容
语法：v-model="变量"

需求：使用双向绑定实现以下需求

  1. 点击登录按钮获取表单中的内容
  2. 点击重置按钮清空表单中的内容
<!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="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/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>
    
</body>
</html>
NHuan^_^
关注
Vue2知识点
qq_62079814的博客
03-10 555
=70">成绩评定B：奖励周末郊游​ 成绩评定C：奖励零食礼包​ 成绩评定A：奖励电脑一台​ 成绩评定D：惩罚一周不能玩手机
（二）小程序学习笔记——初识：标签、数据绑定、指令介绍
qq_43498878的博客
04-25 776
event.dataset.currentTarget或event.dataset.target中获取currentTarget：事件绑定者，哪个组件绑定了当前时间处理函数target：事件触发者，指哪个组件触发了当前事件。注意：（1）事件传参如果自定义属性是多个单词，用-（中划线）连接，例如 :data-parent-id，获取的时候使用小驼峰形式获取，event.dataset.currentTarget.parentId；
uCOSIII学习笔记——初识uCOSIII
MojoCraft的博客
05-08 462
uCOSIII以一系列函数的形式为应用程序代码提供服务。用户通过调用这些函数可以完成各种操作。uCOSIII提供的服务函数可以管理信号量、消息队列、互斥信号量等。对于应用程序的开发来说，调用uCOSIII提供的函数和其他函数是完全一样的；换言之，应用程序通过访问一个包含大约70个新函数的函数库就可以使用uCOSIII。 1、单任务的应用程序 一个简单的文件名为app.c的应用程序。其第一部分内容如程序清单 /* ************************************************
JVM学习笔记——初识JVM
weixin_33965305的博客
06-14 117
简述 "Write Once，Run Anywhere"(一次编译，到处运行)是sun宣传Java语言所提出的口号。Java语言跨平台的特性与Java虚拟机的存在密不可分。Java源代码通过编译生成.class文件字节码后再被JVM解释转化为目标机器代码，到处运行的关键与前提就是JVM。所以并不是Java语言本身可以可以跨平台，而是在不同的平台都有可以让Java语言运行的环境而已。在可以运行Jav...
嵌入式C51单片机学习笔记1——初识单片机
weixin_46427578的博客
04-20 769
单片机，英文Micro Controller Unit，简称MCU。内部集成了CPU、RAM、ROM、定时器、中断系统、通讯接口等一系列电脑的常用硬件功能。单片机的任务是信息采集（依靠传感器）、处理（依靠CPU）和硬件设备（例如电机，LED等）的控制单片机跟计算机相比，单片机算是一个袖珍版计算机，一个芯片就能构成完整的计算机系统。但在性能上，与计算机相差甚远，但单片机成本低、体积小、结构简单，在生活和工业控制领域大有所用。同时，学习使用单片机是了解计算机原理与结构的最佳选择。1.电源电路。
SQL学习笔记——初识数据库与SQL
andyc_03的博客
02-15 192
1.安装mysql http://tianchi-media.oss-cn-beijing.aliyuncs.com/dragonball/SQL/other/本地MySQL环境搭建方法介绍.pdf 这里是安装搭建方法，很方便 2.一些常用语句 ①分类 SQL 语句可以分为以下三类. DDL（Data Definition Language，数据定义语言） 用来创建或者删除存储数据用的数据库以及数据库中的表等对象。DDL 包含以下几种指令。 CREATE ： 创建数据库和表等对象 .
算法学习笔记（Hello算法）—— 初识算法
m0_74972727的博客
07-19 2803
算法是一系列明确、有限且有效的步骤或指令的集合，用于解决特定问题或执行特定任务。输入：算法至少有一个输入（某些算法可能有多个输入），或者可以没有输入。输出：算法必须至少产生一个输出，这个输出是解决问题的结果。明确性：算法中的每一步都必须清晰无误，不能有歧义。有限性：算法必须在有限的时间内完成，不能无限循环下去。可行性：算法的每一步都应该是基本操作，可以被实际执行。数据结构（Data Structure）是计算机存储、组织数据的方式。
学习vue笔记一——初识vue
yoghurt&girl的博客
10-20 351
引入vue：下载压缩包使用npm引入vue是要放在head标签中下面是我的测试，仅供参考！！！下面这个是完整的一个vue3。
ROS学习笔记一——初识ROS、节点、话题
dothetran的博客
05-11 790
文章仅供个人学习使用。
C语言学习——初识C语言（1）
qq_46058765的博客
02-26 218
C语言学习笔记
Vue框架自学笔记（一）——初识Vue
weixin_45974176的博客
10-25 297
vue是什么？ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 注：如果刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意，请掌握好基础知识再来学习vue会更好 简单创建vue应用 1、声明式渲染 <body&g
DSP学习笔记——基于TMS320F28335
DJDN426611的博客
01-04 1万+
《手把手教你学DSP》 一、初识DSP 1.DSP的主要特点： （1）数字信号处理的特点 数字信号处理把许多经典的理论体系作为自己的基础，同时又使自己成为许多新兴学科与技术的理论基础。 数字信号处理的实现方法： [1]通过PC上编程实现；（缺点：实时性差，处理速度不够实时，不够快，信号采集和处理范围受通用计算器性能的限制， 一般用于数字信号处理算法的模拟和仿真。） [2]用通用计算
【PMAC学习笔记——第0篇】初识PMAC运动控制卡以及 Microsoft Visual C++ 2019，PeWin32 PRO2环境搭建
热门推荐
云敬山
07-07 2万+
PMAC ( Programmable Multi-Axis Controller) 可编程多轴运动控制器，是美国Delta Tau Data System公司推出的PC 机平台上的运动控制器,是一个完全开放的系统。
nginx 源码学习笔记（一）——初识nginx helloworld模块
阳光梦的专栏
06-06 634
参考：http://blog.csdn.net/lengzijian/article/details/7349933
H.264学习笔记
zfenggo的博客
09-26 781
H.264凭借其出色的压缩效率、灵活的编码方式以及高质量的视频表现，成为了现代视频技术的核心标准之一。它不仅减少了存储需求，还提高了流媒体和实时视频传输的可行性。对于从高清到超高清视频，H.264的编码能力仍然广泛适用。H.264的帧结构设计（I帧、P帧和B帧）极大地提高了视频编码的压缩效率。I帧保存完整的图像信息，P帧通过参考之前的帧减少冗余数据，而B帧则通过双向参考提供进一步的压缩优势。这种帧间的协同工作大幅降低了带宽需求和存储成本，同时保持了视频的高质量。NALU头。
江科大笔记—LED闪烁& LED流水灯& 蜂鸣器
最新发布
m0_62005595的博客
09-28 381
LED闪烁& LED流水灯& 蜂鸣器
Maya学习笔记：项目设置和快捷键
吴梓穆的博客
09-24 389
快速空格：切换三视图，鼠标放到对应的视图上，在快速按空格，可以切到对应视图。在项目窗口里，选择要生成的子文件夹（保持默认即可），然后点下边的接受。文件/最下边选择最近的项目，在右侧展开菜单里选择刚创建的目录。只后场景会被默认保存在这个文件夹下的scenes里。F：先点击一个物体，在按F，选中的物体居中显示。主键盘5：平滑着色显示模型（默认的方式）选择一个文件夹，然后选择创建默认工作区。alt+滚路或右键拖动：缩放视角。alt+左键拖动：旋转视角。alt+中键拖动：移动视角。A：场景所有物体居中显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值