【vue2基础教程】vue指令

文章目录

  • 前言
  • 一、内容渲染指令
    • 1.1 v-text
    • 1.2 v-html
    • 1.3 v-show
    • 1.4 v-if
    • 1.5 v-else 与 v-else-if
  • 二、事件绑定指令
  • 三、属性绑定指令
  • 总结


前言

Vue.js 是一款流行的 JavaScript 框架,广泛应用于构建交互性强、响应速度快的现代 Web 应用程序。Vue 指令是 Vue.js 中的一项重要特性,它们允许开发者将特定的行为应用到 HTML 元素上,从而使得 DOM 操作更加便捷和灵活。在本篇文章中,我们将介绍 Vue 指令的基础知识,帮助读者快速入门 Vue.js 开发。


一、内容渲染指令

内容渲染指令有两种:v-textv-html
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容

1.1 v-text

  • v-text(类似innerText)
    • 使用语法:<p v-text="uname">hello</p>,意思是将 uame 值渲染到 p 标签中
    • 类似 innerText,使用该语法,会覆盖 p 标签原有内容
<template><div class="hello"><p v-text="uname">Hello</p></div>
</template><script>
export default {name: 'HelloWorld',data() {return {count: 0,uname:"张三"};},
}

1.2 v-html

  • v-html(类似 innerHTML)
    • 使用语法:<p v-html="intro">hello</p>,意思是将 intro 值渲染到 p 标签中
    • 类似 innerHTML,使用该语法,会覆盖 p 标签原有内容
    • 类似 innerHTML,使用该语法,能够将HTML标签的样式呈现出来。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-html Example</title><!-- 引入 Vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body><div id="app"><!-- 使用 v-html 指令将 message 的值作为 HTML 渲染 --><div v-html="message"></div>
</div><script>
new Vue({el: '#app',data: {// 假设 message 中包含一些 HTML 标记message: '<h1>Hello, <span style="color: red;">Vue.js</span>!</h1>'}
})
</script></body>
</html>

1.3 v-show

v-show

  1. 作用: 控制元素显示隐藏
  2. 语法: v-show = “表达式” 表达式值为 true 显示, false 隐藏
  3. 原理: 切换 display:none 控制显示隐藏
  4. 场景:频繁切换显示隐藏的场景
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-show Example</title><!-- 引入 Vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body><div id="app"><!-- 使用 v-show 指令根据 isDisplayed 的值来显示或隐藏元素 --><p v-show="isDisplayed">This paragraph is shown using v-show.</p><p v-show="!isDisplayed">This paragraph is hidden using v-show.</p><!-- 使用按钮切换 isDisplayed 的值 --><button @click="toggleDisplay">Toggle Display</button>
</div><script>
new Vue({el: '#app',data: {// 控制显示和隐藏的变量isDisplayed: true},methods: {// 切换 isDisplayed 的值toggleDisplay: function() {this.isDisplayed = !this.isDisplayed;}}
})
</script></body>
</html>

1.4 v-if

v-if

  1. 作用: 控制元素显示隐藏(条件渲染)
  2. 语法: v-if= “表达式” 表达式值 true显示, false 隐藏
  3. 原理: 基于条件判断,是否创建 或 移除元素节点
  4. 场景: 要么显示,要么隐藏,不频繁切换的场景
<div v-if="flag" class="box">我是v-if控制的盒子</div>

1.5 v-else 与 v-else-if

v-elsev-else-if

  1. 作用:辅助v-if进行判断渲染
  2. 语法:v-else v-else-if=“表达式”
  3. 需要紧接着v-if使用

二、事件绑定指令

我们可以使用v-事件进行绑定事件
或者我们可以简写成@事件=xxx
我们既可以写成内联语句,也可以在下面这个图片加上method:{}
,里面写上我们的函数

我们可以进行参数的传递,可以像函数调用一个写小括号,如果没有参数则不需要写任何参数。

<!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>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>小黑自动售货机</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) {this.money -= price}}})</script>
</body>
</html>

三、属性绑定指令

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

比如,有一个图片,它的 src 属性值,是一个图片地址。这个地址在数据 data 中存储。

则可以这样设置属性值:

  • <img v-bind:src="url" />
  • <img :src="url" /> (v-bind可以省略)

总结

本文介绍了 Vue.js 中的指令,它们是 Vue.js 框架中的重要特性之一。通过指令,我们可以直接操作 DOM,实现数据的双向绑定、条件渲染、循环渲染等功能,极大地提高了开发效率。在 Vue.js 中,指令以 v- 开头,后跟指令名称,如 v-model、v-if、v-for 等。每个指令都有特定的功能和用法,开发者可以根据需求灵活运用。通过学习和掌握 Vue 指令,可以更加高效地构建 Vue.js 应用程序,提升开发体验和用户体验。

在你开始学习和应用 Vue.js 中的指令时,建议先理解指令的基本概念和常用指令的用法,然后通过实践来加深理解。随着对 Vue.js 的熟练程度提升,你会发现指令的强大之处,并能够运用它们解决更复杂的业务需求。希望本文能够对你学习 Vue.js 提供帮助,祝愿你在 Vue.js 的学习和应用过程中取得成功!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IPsec VPN之安全联盟

一、何为安全联盟 IPsec在两个端点建立安全通信&#xff0c;此时这两个端点被称为IPsec对等体。安全联盟&#xff0c;即SA&#xff0c;是指通信对等体之间对某些要素的约定&#xff0c;定义了两个对等体之间要用何种安全协议、IP报文的封装方式、加密和验证算法。SA是IPsec的基…

k8s中storageClass存储介绍

目录 一.storageclass产生背景 二.storageClass的具体使用 1.创建NFS共享目录和服务 2.创建Service Account来管控NFS provisioner在k8s集群中运行的权限 3.创建StorageClass来建立PVC并调用NFS provisioner进行预定的工作 4..创建NFS provisioner来共享NFS并建立PV 将PV…

IOS面试题object-c 51-60

51. 阐述常见的 Objective-C 的数据类型 &#xff1f; Objective-C的数据类型有NSString&#xff0c;NSNumber&#xff0c;NSArray&#xff0c;NSMutableArray&#xff0c;NSData等等&#xff0c;这些都是class&#xff0c;创建后便是对象&#xff0c;而C语言的基本数据类型int…

使用jar命令删除.jar文件中的重复的类和目录并重新打包

引言&#xff1a; android项目&#xff0c;引入的 .jar包 和 .aar中 有相同的类&#xff0c;导致编译冲突&#xff0c;由于这些依赖项没有上传到Maven仓库&#xff0c;无法使用 exclude 排除&#xff0c;只能尝试修改jar文件&#xff0c;删除重复的代码&#xff0c;再重新打包…

CACLP预告 | 飞凌嵌入式与您相约山城重庆

第二十一届中国国际检验医学暨输血仪器试剂博览会&#xff08;CACLP&#xff09;将于2024年3月16日-18日在重庆国际博览中心举行。本次会议将探讨科技创新趋势&#xff0c;展示最新成果&#xff0c;发现和挖掘颠覆性技术和创新产品&#xff0c;引领实验医学体外诊断科技创新和未…

电脑资料管理软件(5个高效批量管理电脑资料的方法)

企业电脑资料管理是企业一大难题&#xff0c;为什么这样说&#xff1f; 首先&#xff0c;企业电脑资料的数量庞大且种类繁多。 其次&#xff0c;电脑资料的安全性和保密性要求高。 再者&#xff0c;电脑资料的管理涉及到多个部门和员工的协作。 ...... 针对此类情况很多企业…

MySQL 优化建议

MySQL 优化是一个涵盖多个方面的广泛主题&#xff0c;包括查询优化、表结构优化、索引优化、配置优化以及硬件和存储优化等。以下是一些关键的 MySQL 优化建议&#xff1a; 1. 查询优化 避免 SELECT&#xff1a;只选择需要的列&#xff0c;而不是所有列。使用 LIMIT 分页&…

CODESYS双通气缸功能块(ST源代码)

博途PLC双通气缸功能块请参考下面文章链接: https://rxxw-control.blog.csdn.net/article/details/136415539https://rxxw-control.blog.csdn.net/article/details/136415539CODESYS 结构变量使用 https://rxxw-control.blog.csdn.net/article/details/126248829

【Python】Python Astar算法生成最短路径GPS轨迹

简介 最短路径问题是计算机科学中一个经典问题&#xff0c;它涉及找到图中两点之间距离最短的路徑。在实际应用中&#xff0c;最短路径算法用于解决广泛的问题&#xff0c;例如导航、物流和网络优化。 步骤 1&#xff1a;加载道路网络数据 要计算最短路径&#xff0c;我们需…

JetPack入门

先导入依赖 implementation("androidx.lifecycle:lifecycle-extensions:2.2.0") 1.使用LifeCycle解耦页面与组件 Activity package com.tiger.lifecycle;import android.annotation.SuppressLint; import android.os.Bundle; import android.os.SystemClock; impo…

[Python人工智能] 四十二.命名实体识别 (3)基于Bert+BiLSTM-CRF的中文实体识别万字详解(异常解决中)

从本专栏开始,作者正式研究Python深度学习、神经网络及人工智能相关知识。前文讲解如何实现中文命名实体识别研究,构建BiGRU-CRF模型实现。这篇文章将继续以中文语料为主,介绍融合Bert的实体识别研究,使用bert4keras和kears包来构建Bert+BiLSTM-CRF模型。然而,该代码最终结…

【Haproxy】Haproxy的配置和应用

HAProxy介绍 HAProxy是法国开发者威利塔罗(Willy Tarreau)在2000年使用C语言开发的一个开源软件&#xff0c;是一款具备高并发(一万以上)、高性能的TCP和HTTP负载均衡器&#xff0c;支持基于cookie的持久性&#xff0c;自动故障切换&#xff0c;支持正则表达式及web状态统计&a…

python | %d,%2d,%-2d,%.2d,%02d的区别

1&#xff09;%d &#xff1a;普通输出整型 2&#xff09;%2d&#xff1a;2为整型的宽度&#xff0c;不足2位向左补空格 3&#xff09;%-2d&#xff1a;2为整型的宽度&#xff0c;不足2位向右补空格 4&#xff09;%.2d&#xff1a;最少输出2位&#xff0c;不足2位则在前面补…

10个高级的SQL查询方法

大家好&#xff0c;SQL 是管理和分析关系数据库的基本工具。掌握基本的SQL命令能够完成简单的数据查询和操作&#xff0c;但是如果想从数据中提取更有价值的信息&#xff0c;数据分析工作者应该深入学习和掌握高级的SQL技巧。 1.窗口函数 窗口函数是指在SQL查询中对一组相关行…

【排序】七大排序表格比较

排序 时间复杂度 空间复杂度 最坏时间复杂度 最好时间复杂度 稳定性 插入排序 O(n) O(1) O(n) O(n) 稳定 希尔排序 O(nlogn)-O(n)取决于增量序列 O(1) O(n^1.3) O(nlogn) 不稳定 选择排序 O(n) O(1) O(n) O(n) 不稳定 冒泡排序 O(n) O(1) O(n) O(n…

[eslint error] ‘v-model‘ should be on a new line.

错误详情 错误原因 此问题是由于.eslintrc.js文件中的vue/max-attributes-per-line配置错误产生的 esline默认要求属性单独开一行 错误解决 所以解决的方法有两个一个是遵从eslint默认规则让属性新开一行,能解决问题 但是我不喜欢看这样子的代码,所以我只好去改掉eslint的规…

2024.02.05校招 实习 内推 面经

绿*泡*泡VX&#xff1a; neituijunsir 交流*裙 &#xff0c;内推/实习/校招汇总表格 1、校招 | 京东2024校招这些岗位持续热招中&#xff08;内推&#xff09; 校招 | 京东2024校招这些岗位持续热招中&#xff08;内推&#xff09; 2、校招 | 科捷智能2024全球校园招聘进行…

什么是数据采集与监视控制系统(SCADA)?

SCADA数据采集是一种用于监控和控制工业过程的系统。它可以实时从现场设备获得数据并将其传输到中央计算机&#xff0c;以便进行监控和控制。SCADA数据采集系统通常使用传感器、仪表和控制器收集各种类型的数据&#xff0c;例如温度、压力、流量等&#xff0c;然后将这些数据汇…

chrome插件:离线安装/详细步骤

一、工具按钮/三个点&#xff0c;拓展程序&#xff0c;管理拓展程序&#xff0c;加在已解压的拓展程序 添加后即可使用 二、工具按钮/三个点&#xff0c;拓展程序&#xff0c;管理拓展程序&#xff0c;拖放已解压的文件/Modheader 拖放后出现的页面 点击图标&#xff0c;查看…

JavaScript版本

JavaScript 由 Brendan Eich 于 1995 年发明&#xff0c;并于 1997 年成为 ECMA 标准。 ECMAScript 是该语言的官方名称。 从 2015 年起&#xff0c;ECMAScript 按年命名&#xff08;ECMAScript 2015&#xff09;。 ECMAScript Editions 版本官方名称描述1ECMAScript 1 (199…