【后端速成 Vue】初识指令(上)

news2024/11/24 15:32:02

前言：

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

在 Vue 中，指定就是带有 v- 前缀 的特殊 标签属性，比如：

<div v-html='str'> </div>

这里问题就来了，既然 Vue 会更具不同的指令，实现不同的功能，那么这个 v-html 是实现什么功能的呢？

1、v-html

v-html：设置元素的 innerHTML

如何不知道元素的 innerHTML 是什么的话，可以先去学习一下 js。

现在有这样一个需求，有一个 div，需要动态的将一个 a 标签加入到这个 div 中。

于是有的小伙伴就很聪明，上篇文章不是讲过插值表达式嘛，这简单，直接使用插值表达式就行了嘛：

<body>
    <div id="app">
        {{ msg }}
    </div>
</body>
<!-- 开发版本引入包/生产版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            msg: '<a href="#">程序猿教你打篮球的博客</a>'
        }
    })
</script>

但是这样运行代码发现：

由此得知，插值表达式不具备解析标签的能力！

这时 v-html 就发挥出他的作用了：

<body>
    <div id="app" v-html="msg">
        
    </div>
</body>
<!-- 开发版本引入包/生产版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            msg: '<a href="#">程序猿教你打篮球的博客</a>'
        }
    })
</script>

运行结果：

这样一来，就能正确的解析标签了，当然，想要理解这个，还是需要 js 的基础，如果没有 js 的基础，不建议着急学 Vue 哦！

通过 DOM 页面，也能看出来使用插值表达式和v-html的区别：

2、v-show 和 v-if

这两个功能类似，但是也有区别，所以这里放在一起对比讲解。先说他们两个的作用：

v-show: 控制元素显示隐藏

语法：v-show="表达式"  表达式值为 true 显示，为 false 隐藏

v-if：控制元素显示隐藏(条件渲染)

语法：v-if="表达式"  表达式值为 true 显示，为 false 隐藏

这里写一段代码，来方便理解：

<!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;
            width: 150px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 1px solid black;
            border-radius: 10px;
            box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
        }
    </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>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            flag: true
        }
    })
</script>
</html>

执行结果：

此时 app 实例中的 flag 的值是 true，显然这两个盒子都会显示，如果把 flag 设置成 false 呢？

const app = new Vue({
    el: '#app',
    data: {
        flag: false
    }
})

很明显，这两个 div 都被隐藏了，满足上面讲的 v-show 和 v-if 的作用，但是上面强调过，v-show 和 v-if 的区别是：v-if 是条件渲染的，当然从显示上来看并不好发现 v-show 和 v-if 的区别。

这里可以在打开页面调试，也可以直接按 F12，或者右键'检查'：

这里可以发现，使用 v-show 的 div 是通过设置 css 里的 display 属性来实现隐藏这个元素的。而 v-if 的 div 是通过条件判断进行创建和移除元素的(条件渲染)！

既然他们实现原理不同，那么他们的肯定有适用不同的使用场景：

v-show 更适合频繁显示隐藏的场景

v-if 适合不频繁显示隐藏的场景

由于 v-if 是根据条件判断来创建元素和移除元素的，本质还是在操作 DOM 树，所以效率显然是没有 v-show 高的，但使用 v-if 可以减少页面的冗余元素，因为 v-show 本质上元素还是在 DOM 树上的，所以在频繁切换隐藏显示的常见推荐用 v-show，不频繁时推荐使用 v-if。

举个例子，当鼠标滑过某个元素，需要展示详细信息，这时肯定使用 v-show 更合适，当用户登录了，不用显示登录逻辑元素了，这时肯定使用 v-if 更合适。

3、v-else 和 v-else-if

这俩就像 Java，C++，JavaScript 中的 else 和 else if 一样搭配 if 使用的，而 这里的 v-else 和 v-else-if 也是需要搭配 v-if 来使用的！

语法：v-else ，v-else-if="表达式"

注意：这两个需要紧挨着 v-if 一起使用。

案例需求：当 sex = 1 时，表示男生，当 sex = 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">
        <p v-if="sex === 1">性别: 🚹 男</p>
        <p v-else-if="sex === 2">性别: 🚺 女</p>
        <p v-else>火星人没有性别</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            sex: 1
        }
    })
</script>
</html>

4、v-on

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

语法：

① v-on:事件名 = "内联语句"

② v-on:事件名 = "methods 中的函数名"

什么叫做内联语句？简单来说就是一段可执行代码，比如 count++

案例需求：有两个按钮，分别是针对 count 进行 ++ -- 操作：

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

这里给第一个按钮注册了 click 监听事件，每次 click 一下就会使得 count--，由于 Vue 是响应式的，所以当 count 的值发生了变化，随之页面展示的 count 数据也会发生改变。

第二个按钮也注册了 click 监听事件，只是这个事件要处理的逻辑是 count++，于是每次点击第二个按钮，都会使 count 的值发生改变，当 Vue 监听到值发生变化了，随即就会重新渲染页面的数据了。

由于注册事件用的还是蛮多的，每次都写 v-on: 显然太麻烦了，于是 Vue 提供了一个简写，可以使用 @ 代替 'v-on:'，上面的代码也可以改写成这个样子：

<body>
    <div id="app">
        <button @click="count--">-</button>
        <span>{{ count }}</span>
        <button @click="count++">+</button>
    </div>
</body>

在实际中，通常会使用这种简写的方式。

截至目前为止，讲解的 v-on 注册的事件执行逻辑都是内联语句，内联语句只适合逻辑简单的代码，如果逻辑复杂，代码量长了，这时就需要用到第二种语法形式了。

在实例 Vue 对象的时候，目前已经见到了两个配置项，分别是 el，data，现在就需要来认识第三个配置项 methods 了。

在这个 methods 配置项中，可以提供很多方法供 Vue 实例使用。

案例需求：有一个 button 和 span，单击 button 显示 span 中的内容，再次单击隐藏 button 隐藏 span 中的内容：

<!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>
        <span v-show="isShow">篮球哥</span>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            isShow: true
        },
        methods: {
            fn() {
                this.isShow = !this.isShow
            }
        }
    })
</script>
</html>

这里 button 绑定了一个单击事件，执行的逻辑是 fn 这个函数，在 fn 函数中，对 isShow 这个变量的值进行了修改。

此时注意，在 fn 中是不能直接访问 isShow 的，因为 js 会把 isShow 当作成一个全局变量，而这里的 isShow 是 app 这个实例的 isShow 变量，也可以使用 app.isShow，但是这样如果外面的 app 实例名改了，里面的 fn 也需要更改，于是 Vue 就让所有 methods 配置项中的函数的 this 都指向当前实例！

也即 this.isShow === app.isShow

看到这，细心的小伙伴就会发现，这里写函数名，那万一这个函数有参数应该怎么写呢？很简单，加上这个函数要传递的参数即可，比如：

<button @click="fn(1, 2)">按钮</button>

案例需求：实现一个功德器，有两个按钮，分别对应认真工作，功德加1，摸鱼一会，功德减10，单击对应按钮增加或减少对应功德，初始功德 10：

<!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;
            width: 300px;
            height: 150px;
            text-align: center;
            border: 1px solid black;
            border-radius: 10px;
            box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="box">
            <h1>功德器</h1>
            <button @click="update(1)">认真工作(+1  功德)</button>
            <button @click="update(-10)">摸鱼一会(-10功德)</button>
        </div>
        <p>功德值: {{ count }}</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            count: 10
        },
        methods: {
            update(number) {
                this.count = this.count + number
            }
        }
    })
</script>
</html>

运行结果：

5、v-bind

上一篇文章讲解到的插值选择器是不能作用于 html 的标签属性的，比如：

<!-- 错误写法 -->
<a href="{{url}}">程序猿教你打篮球</a>

作用： v-bind 就是动态的设置 html 的标签属性，比如 src，href，title，placeholder...

语法： v-bind:属性名="表达式"

案例需求：有一个input txt 输入框，要求通过 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>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-bind:placeholder="msg" v-bind:title="inputTitle">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            msg: "你好呀",
            inputTitle: 'hello'
        }
    })
</script>
</html>

运行结果： 

这样写代码冗余性太高了，那么多 v-bind，能不能跟 v-on 一样可以简写呢？当然可以，只是跟 v-on 简写有点不同，v-bind 可以直接去掉 v-bind，比如 :title="inputTitle"

上述的代码也可以替换成如下这样：

<input type="text" :placeholder="msg" :title="inputTitle">

下期预告：【后端速成Vue】初识指令(下)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1022774.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

简述TCP三次握手，四次挥手

简述TCP三次握手，四次挥手

前言&#xff1a; 通常大多数认为三次握手、四次挥手是HTTP协议产生的。这是一个错误的认知&#xff0c;实际上HTTP协议并不参与握手以及挥手过程&#xff0c;三次握手四次挥手均是在TCP协议层上进行的&#xff0c;而HTTP协议只是在已建立 TCP连接的基础上&#xff0c;进行通信…
阅读更多...
软考中级软件评测师考什么？

软考中级软件评测师考什么？

软件评测师属于软考中级&#xff0c;考试没有软考高级难度大&#xff0c;但是会比软考初级要难&#xff0c;所以想要通过软件评测师考试还是需要花时间备考的。 软件评测师上午考试为基础知识&#xff0c;下午考试为应用技术。 基础知识考试题型为客观选择题&#xff0c;相对…
阅读更多...
沉浸式体验与 AI 数智助理一起工作的一天

沉浸式体验与 AI 数智助理一起工作的一天

在当今商业世界中&#xff0c;人工智能、数据分析和指标管理已经成为企业持续成功不可或缺的一环。当你配备了一个 AI 数智助理之后&#xff0c;日常的工作又会受到什么影响呢&#xff1f;快来和我们一起沉浸式体验“连锁企业区域总监”与 AI 数智助理一起工作的一天吧&#xf…
阅读更多...
【Linux初阶】信号入门2 | 信号阻塞、捕捉、保存

【Linux初阶】信号入门2 | 信号阻塞、捕捉、保存

文章目录 ☀️前言☀️一、信号阻塞&#x1f33b;1.信号其他相关常见概念&#x1f33b;2.信号在内核中的表示 ☀️二、信号捕捉&#xff08;重点&#xff09;&#x1f33b;1.用户态 & 内核态&#x1f33b;2.如何判断进程处于用户态或内核态&#x1f33b;3.OS接口的访问方法…
阅读更多...
板子接线图

板子接线图

1.ST-LINK V2接线 2.对抗板子刷蓝牙固件 接USB转TTL&#xff0c;用镊子短接两个孔 2.对抗板子用串口测试蓝牙AT命令 短接白色箭头&#xff0c;接TX&#xff0c;RX&#xff0c;电源
阅读更多...
【已解决】：该该虚拟机似乎正在使用中。如果该虚拟机未在使用，请按“获取所有权(T)“按钮获取它的所有权。否则，请按“取消(C)“按钮以防损坏。

【已解决】：该该虚拟机似乎正在使用中。如果该虚拟机未在使用，请按“获取所有权(T)“按钮获取它的所有权。否则，请按“取消(C)“按钮以防损坏。

现象 启动VMware虚拟机&#xff0c;无法正常打开并出现以下信息&#xff1a; 原因 这是因为当运行一个“虚拟系统”时&#xff0c;为防止该系统被另外一个VMware程序打开&#xff0c;导致数据被修改或损坏&#xff0c;VMware会自动在该“虚拟系统”所在的文件夹下&#xff0c…
阅读更多...
微信小程序 工具使用(HBuilderX)

微信小程序 工具使用(HBuilderX)

微信小程序 工具使用:HBuilderX 一 HBuilderX 的下载二 工具的配置2.1 工具 --> 设置 --> 运行配置2.1.1 微信开发者工具路径2.1.2 node 运行配置 2.2 插件 工具 --> 插件安装2.2.1 下载插件 三 微信小程序端四 同步运行五 BUG5.1 nodemon在终端无法识别 一 HBuilderX…
阅读更多...
前端面试题： 请解释什么是函数的作用域？

前端面试题： 请解释什么是函数的作用域？

今天做到了一道题&#xff1a;请解释什么是函数的作用域&#xff1f; 我给的答案是&#xff1a; 函数的作用域是指函数执行到内部后创建的数据空间&#xff0c;在函数的作用域内&#xff0c;let定义的变量的有效期为函数作用域 AI觉得我答得比较简单&#xff1a;回答基本正确&…
阅读更多...
使用 OpenWRT 设置 Banana Pi BPI-R3开源硬件路由器

使用 OpenWRT 设置 Banana Pi BPI-R3开源硬件路由器

这里介绍如何使用 pfSense 将ZimaBoard 216设置为防火墙的链接。我们正在为小型板计算机建立一个专用网络&#xff0c;这样当我开始教授 Linux 时&#xff0c;我就可以显示和共享它的 IP。 现在为我的网络设置一条到 pfSense 后面的路由。这是为了提供另一个级别的安全性。我有…
阅读更多...
Ubuntu22.04 vnc远程黑屏

Ubuntu22.04 vnc远程黑屏

一、原因 原因是Ubuntu22.04使用的gnome启用了Wayland。vnc、teamviewer、向日葵、todesk等均无法使用或者远程黑屏等。 简单的说vnc、teamviewer、向日葵、todesk等均基于xorg实现&#xff08;xorg太流行&#xff09;&#xff0c;并不兼容Wayland&#xff0c;所以vnc无法正常…
阅读更多...
权限提升Linux篇

权限提升Linux篇

提权工具 https://github.com/liamg/traitor https://github.com/AlessandroZ/BeRoot https://github.com/rebootuser/LinEnum https://github.com/mzet-/linux-exploit-suggester https://github.com/sleventyeleven/linuxprivchecker https://github.com/jondonas/linux…
阅读更多...
DirectX12架构理解

DirectX12架构理解

无它&#xff0c;一图而已
阅读更多...
Python - FastAPI 实现 get、post 请求

Python - FastAPI 实现 get、post 请求

目录 一.引言 二.FastAPI Server 构建 1.get - read_items 2.post - create_item 3.uvicorn - run_app 三.Postman 请求 1.post - create_item 2.get - read_items 四.Requests 请求 1.post - create_item 2.get - read_items 五.总结 一.引言 前面介绍了 LLM 的相…
阅读更多...
前端解决页面访问总是自动弹出 浏览器的 翻译此页 问题

前端解决页面访问总是自动弹出 浏览器的 翻译此页 问题

今天克隆了一个项目下来 结果 浏览器自带的 翻译此页总会默认弹出 还一直以为是js设置的 结果最后才发现 这是个基础设置 在于 html标签的 lang 属性 这里设置了 en 他就会每次启动都弹出来 只需要改成langzh-CN 再次运行 就不会在弹出来了
阅读更多...
恒合仓库 - 商品管理模块、上传照片、添加采购单、添加出库单、商品分类

恒合仓库 - 商品管理模块、上传照片、添加采购单、添加出库单、商品分类

商品管理模块 文章目录 商品管理模块一、分页查询商品1.1 实体类1.1.1 Store 仓库1.1.2 Brand 品牌1.1.3 ProductType 商品分类1.1.4 Supply 供应商1.1.5 Place 产地1.1.6 Unit 单位1.1.7 Product 商品 1.2 查询所有仓库1.2.1 Mapper1.2.2 Service1.2.3 Controller1.2.4 效果图…
阅读更多...
基于宏基因组的功能挖掘：碳水化合物活性酶（CAZymes）注释

基于宏基因组的功能挖掘：碳水化合物活性酶（CAZymes）注释

基于宏基因组数据&#xff0c;可以通过NR数据库进行物种注释&#xff0c;还可以进行功能挖掘&#xff0c;比如通过KEGG数据库来挖掘代谢通路、根据COG注释结果对蛋白进行功能归类&#xff0c;通过CAzyme可以得到碳化合物合成、代谢、转运等酶的分类和相关信息&#xff0c;通过P…
阅读更多...
Echarts散点图筛选新玩法dataZoom

Echarts散点图筛选新玩法dataZoom

目录 前言 一、引入Echarts5.4.3 二、新建index.html 三、绑定Echarts展示元素 四、初始数据绑定 五、option设置 六、效果展示 七、参数说明 总结 前言 如果您在日常的工作当中也会遇到如下场景&#xff0c;需要在线对已经展示出来的图表进行进一步的筛选&#xff0c…
阅读更多...
ASL集睿致远代理商，CS5366芯片，typec转HDMI 4k60Hz带PD快充方案

ASL集睿致远代理商，CS5366芯片，typec转HDMI 4k60Hz带PD快充方案

CS5366是一款Type-C/DP1.4到HDMI2.0的显示协议转换芯片&#xff0c;内部集成了PD3.0及DSC decoder, 并能按客户需求配置成不同的功能组合&#xff0c; 是目前集成度与功耗最小的一颗芯片。 CS536x主要特性 1. 业界最低功耗的Type-C to HDMI2.0 4K60产品 (<300mW)。 2. 集成D…
阅读更多...
R读写parquet文件

R读写parquet文件

什么是parquet文件 Apache Parquet是一个开源的&#xff0c;列存储的数据文件格式。 https://parquet.apache.org/ 在R里面&#xff0c;我们可以通过arrow包来读写它。 我们先安装一下arrow包&#xff0c;并加载它。 install.packages("arrow") library(arrow)读写…
阅读更多...
[CISCN2019 华东南赛区]Web11 SSTI

[CISCN2019 华东南赛区]Web11 SSTI

这道SSTI 差点给我渗透的感觉了 全是API 我还想去访问API看看 发现这里读取了我们的ip 我们抓包看看是如何做到的 没有东西 我们看看还有什么提示 欸 那我们可不可以直接修改参数呢 我们传递看看 发现成功了 是受控的 这里我就开始没有思路了 于是看了wp 说是ssti 那我们看…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023