当前位置: 首页 > news >正文

Vue2的基本内容(一)

目录

一、插值语法

二、数据绑定

1.单向数据绑定

2.双向数据绑定

三、事件处理

1.绑定监听

2.事件修饰符

四、计算属性computed和监视属性watch

1.计算属性-computed

 2.监视属性-watch

(1)通过  watch  监听  msg 数据的变化 

 (2)通过  watch  监听  obj 数据的变化(深度监听 deep)

五、class 与 style 绑定

1. class 绑定

2. style 绑定 

六、 条件渲染

1.v-if

2.v-show

七、 列表渲染

1.v-for指令

八、指令总结

一、插值语法

(1)用于解析标签体内容

(2)语法:{{}},xxx会作为js表达式解析

二、数据绑定

1.单向数据绑定

语法:v-bind:href ="xxx" 或简写为 :href
特点:数据只能从 data 流向页面

2.双向数据绑定

语法:v-model:value="xxx" 或简写为 v-model="xxx"
特点:数据不仅能从 data 流向页面,还能从页面流向 data

三、事件处理

1.绑定监听

语法:

  •  v-on:xxx="fun"
  • @xxx="fun"
  • @xxx="fun(参数)"

2.事件修饰符

prevent : 阻止事件的默认行为 event.preventDefault()
stop : 停止事件冒泡 event.stopPropagation()

四、计算属性computed和监视属性watch

1.计算属性-computed

  • 要显示的数据不存在,要通过计算得来
  • 在 computed 对象中定义计算属性
  • 在页面中使用{{方法名}}来显示计算的结果
	<div id="root">姓:<input type="text" v-model="firstName"> <br/><br/>名:<input type="text" v-model="lastName"> <br/><br/>全名:<span>{{fullName}}</span> <br/><br/></div>data:{firstName:'张',lastName:'三',},computed:{//简写fullName(){console.log('get被调用了')return this.firstName + '-' + this.lastName}}

 2.监视属性-watch

  • watch 配置来监视指定的属性
  • 当属性变化时, 回调函数自动调用, 在函数内部进行计算

(1)通过  watch  监听  msg 数据的变化 

watch: {msg(oldValue, newValue) {console.log(oldValue)console.log(newValue)}
}

 (2)通过  watch  监听  obj 数据的变化(深度监听 deep)

data() {return {obj: {'name': "赵",'age': 18},}
},
watch: {obj: {handler(oldValue,newVal) {console.log(oldValue)console.log(newValue)},deep: true  // 深度监听}
}

五、class 与 style 绑定

1. class 绑定

  • :class='xxx'
  • 表达式是字符串: 'classA'
  • 表达式是对象: {classA:isA, classB: isB}

2. style 绑定 

  • :style="{ color: activeColor, fontSize: fontSize + 'px' }"
  • 其中 activeColor/fontSize 是 data 属性

六、 条件渲染

1.v-if

写法:

v-if="表达式

"v-else-if="表达式

"v-else="表达式"

适用于:切换频率较低的场景。

特点:不展示的DOM元素直接被移除。

注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”

2.v-show

写法:v-show="表达式"

适用于:切换频率较高的场景。

特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉

备注:使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到

七、 列表渲染

1.v-for指令

  • 用于展示列表数据
  • 语法:v-for="(item, index) in xxx" :key="yyy"
  • 可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)

八、指令总结

  • v-bind  : 单向绑定解析表达式, 可简写为 :xxx
  • v-model : 双向数据绑定
  • v-for   : 遍历数组/对象/字符串
  • v-on    : 绑定事件监听, 可简写为@
  • v-if    : 条件渲染(动态控制节点是否存存在)
  • v-else  : 条件渲染(动态控制节点是否存存在)
  • v-show  : 条件渲染 (动态控制节点是否展示)
  • v-text指令:1.作用:向其所在的节点中渲染文本内容。         

                           2.与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会。

<div v-text="str"></div>data:{str:'<h3>你好啊!</h3>'}

 

  •  v-html指令:

            1.作用:向指定节点中渲染包含html结构的内容。

            2.与插值语法的区别:

                  (1).v-html会替换掉节点中所有的内容,{{xx}}则不会。

                  (2).v-html可以识别html结构

 

	<div v-html="str"></div>data:{str:'<h3>你好啊!</h3>',}
  •  v-once指令:

            1.v-once所在节点在初次动态渲染后,就视为静态内容了。

            2.以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。

相关文章:

Vue2的基本内容(一)

目录 一、插值语法 二、数据绑定 1.单向数据绑定 2.双向数据绑定 三、事件处理 1.绑定监听 2.事件修饰符 四、计算属性computed和监视属性watch 1.计算属性-computed 2.监视属性-watch &#xff08;1&#xff09;通过 watch 监听 msg 数据的变化 &#xff08;2&a…...

蚁群算法优化最优值

%%%%%%%%%%%%%%蚁群算法求函数极值%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%初始化%%%%%%%%%%%%%%%%%%%%% clear all; %清除所有变量 close all; %清图 clc; %清屏 m 20; %蚂蚁个数 G 500; %最大迭代次数 Rho 0.9; %信息素蒸发系数 P0 0.2; %转移概率常数 XMAX 5; %搜索变量 x…...

Docker镜像的内部机制

Docker镜像的内部机制 镜像就是一个打包文件&#xff0c;里面包含了应用程序还有它运行所依赖的环境&#xff0c;例如文件系统、环境变量、配置参数等等。 环境变量、配置参数这些东西还是比较简单的&#xff0c;随便用一个 manifest 清单就可以管理&#xff0c;真正麻烦的是文…...

每日的时间安排规划

14:23 2023年3月4日星期六 开始 现在我要做一套试卷。模拟6级考试。 现在是&#xff1a; 16:22 2023年3月4日星期六。 做完了线上的试卷&#xff01; 发现我真的是不太聪明的样子&#xff01; 明明买的有历年真题&#xff0c;做真题就行了&#xff0c;还要做它们出的模拟的…...

【C++】类和对象——六大默认成员函数

&#x1f3d6;️作者&#xff1a;malloc不出对象 ⛺专栏&#xff1a;C的学习之路 &#x1f466;个人简介&#xff1a;一名双非本科院校大二在读的科班编程菜鸟&#xff0c;努力编程只为赶上各位大佬的步伐&#x1f648;&#x1f648; 目录前言一、类的6个默认成员函数二、构造…...

远程debug被arthas watch了的idea

开发工具idea端(2021.2.1) 远程调试 被 应用了 修改的arthas端 的 鸡idea端(2022.3.2) A. 鸡idea端 鸡idea: “D:\IntelliJ IDEA 2022.3.2\bin\idea64.exe” 中安装有目标插件 比如 RedisNew-2022.07.24.zip 对文件 “D:\IntelliJ IDEA 2022.3.2\bin\idea64.exe.vmoptions” 新…...

Cesium实现的光柱效果

Cesium实现的光柱效果 效果展示: 可以通过拼接两个entity来实现这个效果: 全部代码; index.html <!DOCTYPE html> <html><head><meta charset...

你最爱记混的slice()和splice()

slice()方法:选取数组的一部分,并返回一个新数组 该方法不会改变原始数组,而是将截取到的元素封装到一个新数组中返回 语法:array.slice(start,end),参数的介绍如下: 语法:array.slice(start,end),参数的介绍如下: 1.start:截取开始的位置的索引,包含开始索引 2.…...

【LeetCode】剑指 Offer(15)

目录 题目&#xff1a;剑指 Offer 32 - II. 从上到下打印二叉树 II - 力扣&#xff08;Leetcode&#xff09; 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 题目&#xff1a;剑指 Offer 32 - III. 从上到下打…...

【刷题笔记】之二分查找(搜索插入位置。在排序数组中查找元素的第一个和最后一个位置、x的平方根、有效的完全平方数)

1. 二分查找题目链接 704. 二分查找 - 力扣&#xff08;LeetCode&#xff09;给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;写一个函数搜索 nums 中的 target&#xff0c;如果目标值存在返回下标&#xff0c;否则返回 -…...

一起Talk Android吧(第五百一十五回:绘制向外扩散的水波纹)

文章目录整体思路实现方法示例代码各位看官们大家好&#xff0c;上一回中咱们说的例子是"Java中的进制转换",这一回中咱们说的例子是"绘制向外扩散的水波纹"。闲话休提&#xff0c;言归正转&#xff0c; 让我们一起Talk Android吧&#xff01; 整体思路 …...

基于粒子群改进的支持向量机SVM的情感分类识别,pso-svm情感分类识别

目录 支持向量机SVM的详细原理 SVM的定义 SVM理论 Libsvm工具箱详解 简介 参数说明 易错及常见问题 SVM应用实例,基于SVM的情感分类预测 代码 结果分析 展望 支持向量机SVM的详细原理 SVM的定义 支持向量机(support vector machines, SVM)是一种二分类模型,它的基本模型…...

【python中的列表和元组】

文章目录前言一、列表及其使用1.列表的特点2. 列表的使用方法二、元组及其特点1.元组的类型是tuple1.元组的查找操作2. 计算元组某个元素出现的次数3.统计元组内元素的个数总结前言 本文着重介绍python中的列表和元组以及列表和元组之间的区别 一、列表及其使用 1.列表的特点…...

世界顶级五大女程序媛,不仅技术强还都是美女

文章目录1.计算机程序创始人&#xff1a;勒芙蕾丝伯爵夫人2.首位获得图灵奖的女性&#xff1a;法兰艾伦3.谷歌经典首页守护神&#xff1a;玛丽莎梅耶尔4.COBOL之母&#xff1a;葛丽丝穆雷霍普5.史上最强游戏程序媛-余国荔说起程序员的话&#xff0c;人们想到的都会是哪些理工科…...

Linux- 系统随你玩之--文件管理-双生姐妹花

文章目录1、前言2、文件管理-双生姐妹花2.1、 df2.1.1、 df 语法2.1.1 、常用参数2.2、 du2.2.1、du 语法2.1.1、 常用参数2.3、双生姐妹花区别2.3.1、 查看文件统计 的计算方式不同2.3.2 、删除文件情况下统计结果 不同2.3.3 、针对双生姐妹花区别 结语3、双生姐妹花实操3.1 、…...

18、多维图形绘制

目录 一、三维图形绘制 &#xff08;一&#xff09;曲线图绘制plot3() &#xff08;二&#xff09;网格图绘制 mesh() &#xff08;三&#xff09;曲面图绘制 surf() &#xff08;四&#xff09;光照模型 surfl() &#xff08;五&#xff09;等值线图(等高线图)绘制 cont…...

【C++】30h速成C++从入门到精通(STL介绍、string类)

STL简介什么是STLSTL(standard template libaray-标准模板库)&#xff1a;是C标准库的重要组成部分&#xff0c;不仅是一个可复用的组件库&#xff0c;而且是一个包罗数据结构与算法的软件框架。STL的版本原始版本Alexander Stepanov、Meng Lee 在惠普实验室完成的原始版本&…...

PMP是什么意思?适合哪些人学呢?

PMP简而言之&#xff0c;就是提高项目管理理论基础和实践能力的考试。 官方一点的说明呢&#xff0c;就是&#xff1a;PMP证书全称为Project Management Professional&#xff0c;也叫项目管理专业人士资格认证。 PMP证书由美国项目管理协会(PMI)发起&#xff0c;是严格评估项…...

【SpringBoot 事务不回滚?怎么解决?】

SpringBoot 事务不回滚可能有多种原因&#xff0c;下面列举一些常见的原因和对应的解决方法&#xff1a; 异常被捕获处理了 如果方法中抛出了异常&#xff0c;但是在方法中被捕获并处理了&#xff0c;那么事务不会回滚。解决方法是让异常继续抛出&#xff0c;或者使用 Transa…...

软件研发管理经验总结 - 技术管理

软件研发管理经验总结 - 技术管理 技术管理主要负责有技术团队建设、管理团队成员技术相关事务、帮助团队成员成长、负责团队成员交付的代码质量、以及负责产品技术方向、以及产品相关前沿技术调研&#xff1b;管理团队成员技术相关事务有代码Review、故障率跟踪、分析及根据分…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...