Vue2 - 模板、渲染、事件处理、表单输入绑定

文章目录

    • 模板语法
      • 1、文本
      • 2、原始 HTML
      • 3、属性 Attribute
      • 4、使用 JavaScript 表达式
    • 条件渲染
      • 1、v-if
      • 2、v-else
      • 3、v-show
      • 4、`v-if` vs `v-show` 的区别
    • 列表渲染
      • 1、用 `v-for` 把一个数组映射为一组元素
      • 2、维护状态
    • 事件处理
      • 1、监听事件 `v-on`
      • 2、事件处理方法
      • 3、内联处理器中的方法
    • 表单输入绑定
      • 1、修饰符
        • 1.1 `.lazy`
        • 1.2 `.trim`


本文内容来自:https://www.bilibili.com/video/BV1Rs4y127j8/


模板语法


1、文本

数据绑定最常见的形式就是使用“Mustache” (双大括号) 语法的文本插值

<span>Message: {{ msg }}</span>

一般配合js 中的data()设置数据

export default {name: 'HelloWorld',data(){return{msg:"消息提示"}}
}

2、原始 HTML

双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用v-html 指令

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

data(){return{rawHtml:"<a href='https://www.itbaizhan.com'>百战</a>"}
}

3、属性 Attribute

Mustache 语法不能在 HTML 属性中使用,然而,可以使用 v-bind 指令

<div v-bind:id="dynamicId"></div>

data(){return{dynamicId:1001}
}

  • v-bind: 可以简写成 :

4、使用 JavaScript 表达式

在我们的模板中,我们一直都只绑定简单的 property 键值,Vue.js 都提供了完全的 JavaScript 表达式支持

{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}

这些表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。

<!--  这是语句,不是表达式:-->
{{ var a = 1 }}<!-- 流程控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}

条件渲染


1、v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。

<p v-if="flag">我是孙猴子</p>

data() {return {flag: true}
}

2、v-else

你可以使用 v-else 指令来表示 v-if 的“else 块”

<p v-if="flag">我是孙猴子</p>
<p v-else>你是傻猴子</p>

data() {return {flag: false}
}

3、v-show

另一个用于条件性展示元素的选项是 v-show 指令

<h1 v-show="ok">Hello!</h1>

4、v-if vs v-show 的区别

v-if 是“真正”的条件渲染,因为它会确保在切换过程中,条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。
因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好


列表渲染

1、用 v-for 把一个数组映射为一组元素

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名

<ul><li v-for="item in items">{{ item.message }}</li>
</ul>

data() {return {items: [{ message: 'Foo' }, { message: 'Bar' }]}
}

2、维护状态

当 Vue 正在更新使用 v-for 渲染的元素列表时,它默认使用“就地更新”的策略。
如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。

为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一的 key attribute:

<div v-for="(item,index) in items" :key="item.id|index"><!-- 内容 -->
</div>

事件处理

1、监听事件 v-on

可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件,并在触发事件时执行一些 JavaScript。

用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName"

<button @click="counter += 1">Add 1</button>

data() {return {counter: 0}
}

2、事件处理方法

然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。

因此 v-on 还可以接收一个需要调用的方法名称。

<button @click="greet">Greet</button>

methods: {greet(event) {// `event` 是原生 DOM eventif (event) {alert(event.target.tagName)}}
}

3、内联处理器中的方法

这是官方的翻译称呼,其实我们可以直接叫他 “事件传递参数”

<button @click="say('hi')">Say hi</button>
<button @click="say('what')">Say what</button>

methods: {say(message) {alert(message)}
}

表单输入绑定

你可以用 v-model 指令在表单 <input><textarea><select> 元素上创建双向数据绑定。

它会根据控件类型自动选取正确的方法来更新元素。

尽管有些神奇,但 v-model 本质上 不过是语法糖。

它负责监听用户的输入事件来更新数据,并在某种极端场景下进行一些特殊处理。

<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>

data() {return {message:""}
}

1、修饰符


1.1 .lazy

在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符,从而转为在 change 事件之后进行同步

<input v-model.lazy="message" />
<p>Message is: {{ message }}</p>

data() {return {message:""}
}

1.2 .trim

如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符

<input v-model.trim="message" />

data() {return {message:""}
}

2023-07-19

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

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

相关文章

【Linux后端服务器开发】UDP协议

目录 一、端口号 二、UDP报头格式 三、UDP的特点 四、UDP协议实现网络聊天群 一、端口号 端口号port标识了一个主机上进行通信的不同的应用程序。 0 ~ 1023&#xff1a;系统端口号&#xff0c;HTTP、FTP、SSH等这些广为使用的应用层协议&#xff0c;它们的端口号都是固定…

随手笔记——OpenCV 的基础使用方法

随手笔记——OpenCV 的基础使用方法 说明CMakeLists.txt关键内容源代码 说明 演示了如下几个操作&#xff1a;图像读取、显示、像素遍历、复制、赋值等。大部分的注解已写在代码里面。编译该程序时&#xff0c;需要在 CMakeLists.txt 中添加 OpenCV 的头文件&#xff0c;然后把…

Qt中QMainWindow的相关介绍

目录 菜单栏 工具栏 状态栏&#xff1a; 停靠窗口&#xff1a; QMainWindow 是标准基础窗口中结构最复杂的窗口&#xff0c;其组成如下: 提供了菜单栏 , 工具栏 , 状态栏 , 停靠窗口 菜单栏&#xff1a;只能有一个&#xff0c;位于窗口的最上方 工具栏&#xff1a;可以有多…

AI制图工具丨Midjourney产品功能介绍

了解如何使用Discord上的Midjourney Bot通过简单的文本提示创建自定义图像 Midjourney是一款AI制图工具&#xff0c;只要关键字&#xff0c;就能透过AI算法生成相对应的图片&#xff0c;只需要不到一分钟。 可以选择不同画家的艺术风格&#xff0c;例如安迪华荷、达芬奇、达利…

基于单片机水质检测系统的设计与实现

功能介绍 以STM32单片机作为主控系统&#xff1b;液晶显示当前参数&#xff1b;PH模块采集当前水质PH酸碱度&#xff1b;DS18B20温度传感器采集当前水体温度&#xff1b;TDS传感器采集当前水体TDS值&#xff1b;浊度传感器采集当前水体浑浊度&#xff1b;按键设置PH、温度、TDS…

无涯教程-Javascript - For...in循环语句

for ... in 循环用于循环访问对象的属性&#xff0c;由于无涯教程尚未讨论Objects对象&#xff0c;您就会发现此循环非常有用。“ for...in”循环的语法为: for (variablename in object) {statement or block to execute } 在每次迭代中&#xff0c;将 object对象中的一个属性…

Elasticsearch 集群某一节点修改 IP 后无法启动问题复盘

1、集群环境及问题描述 集群版本&#xff1a;6.8.X集群节点&#xff1a;5节点&#xff08;三个节点为主数据节点&#xff0c;另外两个独立数据节点&#xff09;。问题描述&#xff1a;由于IP冲突&#xff0c;修改了一台服务器的IP&#xff0c;然后5台配置改了一下一次重启&…

Kafka 深度剖析

1、应用场景 1.1 kafka场景 Kafka最初是由LinkedIn公司采用Scala语言开发&#xff0c;基于ZooKeeper&#xff0c;现在已经捐献给了Apache基金会。目前Kafka已经定位为一个分布式流式处理平台&#xff0c;它以 高吞吐、可持久化、可水平扩展、支持流处理等多种特性而被广泛应用…

ffmpeg和opencv源码搭建

目录 一、安装ffmpeg创建文件夹ffmpeg4.1解压压缩包二、安装opencv三、项目工程编译运行虹软的sdk注册创建工程文件夹编译ffmpeg_arc_face-recognize修改Makefile编译FFMPEG_DNN_Project四、安装包下载五、编译过程中可能会出现的问题的解决方法一、安装ffmpeg 参考文章:http:…

flask基本用法小白教程+按钮跳转到指定页面+python和pip安装(后附)

一、flask学习教程&#xff1a; 1.1 基本程序&#xff1a; 大家可以在pycharm中复制如下代码&#xff0c;先感受一下flask的基本用法&#xff1a; 点击链接可进入浏览器查看程序运行的结果&#xff0c;在127.0.0.1:5000后面添上/test1/等设定的文字&#xff0c;可查看不同函…

基于单片机的蓝牙音乐喷泉的设计与实现

功能介绍 以51单片机作为主控系统&#xff1b;通过HM-18蓝牙音频模块进行无线传输&#xff1b; 通过LM386功放模块对音频信号进行放大&#xff1b;手机端可以直接控制音频播放&#xff0c;并且最远距离可达20米&#xff1b;手机端可以进行任意音乐切换&#xff0c;播报、暂停&a…

微信小程序中常见组件的使用

文章目录 微信小程序中常见组件的使用视图组件viewscroll-viewswipermovable-area 基础组件icontextrich-textprogress 表单组件buttoncheckbox、checkbox-grouplabelforminputpicker单列选择器多列选择器时间选择器&日期选择器&地区选择器 picker-viewradiosliderswit…

MySQL数据备份与恢复

目录 ​编辑 一、数据备份 1.1物理备份 1.1.1冷备份 1.1.2热备份 1.1.3温备份 二、逻辑分区 2.1完全分区 2.2差异分区 2.3增量备份 三、数据备份恢复实验 3.1做一个数据 3.2物理冷备份与恢复 3.3mysqldump 备份与恢复&#xff08;温备份&#xff09; 3.4Mysql数据…

采集极验4滑块验证码图片数据

在网络安全领域&#xff0c;验证码是一种常见的用于验证用户身份或防止恶意机器人攻击的技术。而极验4滑块验证码作为一种广泛应用的验证码形式&#xff0c;其具有较高的安全性和防御能力。本文将以获取极验4滑块验证码图片数据为主题&#xff0c;介绍相关技术和方法。 一、极…

【webrtc】rtc::Thread和std::thread 的用法

全局线程 itsfolf/Discord-Screenshare-Linux#include "rtc_base/thread.h"rtc::Thread* GlobalLoopThread() {static auto result = []

redis 相关

redis相关面试题 redis支持哪几种数据形式&#xff1f; String,hash,set,zset,list redis主要消费什么物理资源&#xff1f; 内存&#xff0c;key-value的形式&#xff0c; redis 具有快速和数据持久化的特征&#xff0c;如果不将数据放在内存中&#xff0c;磁盘 I/O 速度为严…

MySQL常用语句

目录 连接MySQL 数据库操作 表的操作 数据操作 进阶查询 源码等资料获取方法 连接MySQL -- 语法&#xff1a;mysql -u用户名 -p密码 注&#xff1a;--空格 起到注释的作用 mysql -uroot -p123456 数据库操作 -- 显示当前时间、用户名、数据库版本&#xff08;可以单独…

MATLAB 之 可视化图形用户界面设计

这里写目录标题 一、可视化图形用户界面设计1. 图形用户界面设计窗口1.1 图形用户界面设计模板1.2 图形用户界面设计窗口 2. 可视化图形用户界面设计工具1.1 对象属性检查器2.2 菜单编辑器2.3 工具栏编辑器2.4 对齐对象工具2.5 对象浏览器2.6 Tab 键顺序编辑器 3. 可视化图形用…

hibernate入门,springboot整合hibernate

Mybatis和Hibernate是我们常用的两大ORM框架&#xff0c;这篇文章主要介绍hibernate的使用&#xff0c;如何通过springboot整合hibernate&#xff0c;实现简单的crud功能。 添加依赖 首先&#xff0c;需要创建一个springboot项目&#xff0c;这里就取名为hibernate。项目创建完…

【Visual Studio Code】---自定义键盘快捷键设置

概述 一个好的文章能够帮助开发者完成更便捷、更快速的开发。书山有路勤为径&#xff0c;学海无涯苦作舟。我是秋知叶i、期望每一个阅读了我的文章的开发者都能够有所成长。 一、进入键盘快捷键设置 1、进入键盘快捷键设置方法1 使用快捷键进入键盘快捷键设置先按 Ctrl K再…