前端:Vue学习-1

前端:Vue学习-1

    • 1. 指令
      • 1. 指令修饰符
      • 2. v-bind对样式控制的增强
      • 3. v-model应用于其他表单元素
    • 2. 计算属性
    • 3. watch侦听器(监视器)

1. 指令

就是带有v-前缀的特殊属性,不同属性对应不同的功能
v-html:动态设置页面的html标签内容,对应innerHtml;
v-show,v-if:控制元素显示隐藏,其中 v-show只是通过设置标签元素的display属性来控制标签元素的隐藏,而v-if是对标签元素进行删除或插入,通常频繁切换隐藏显示的使用v-show
v-else,v-else-if:用来辅助v-if的使用;
v-on:用来绑定事件,可以省略写为@事件名=“函数名”;如果定义的函数有参数,直接写为

@事件名=“函数名(参数1,参数2)”

<div id="app"><p v-if="score >= 90">优秀</p><p v-else-if="score >= 80">良好</p><p v-else>不怎的</p><p>分数为:{{score}}</p><button @click="func1">+</button><button @click="func2">-</button>
</div>
<script type="text/javascript">new Vue({el:'#app',data:{score:90},methods:{func1(){this.score ++;},func2() {this.score--;}}});
</script>

请添加图片描述
v-bind:用来动态设置标签元素的属性,可以简写为 :属性名=属性值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue2</title><script src="../vue2.js"></script><style>img{width: 100px;height: 100px;}</style>
</head>
<body><div id="app"><button v-show="index > 0" @click="func(-1)">上一页</button><img :title="imgs[index]" alt=""><button v-show="index < imgs.length - 1" @click="func(1)">下一页</button></div><script>new Vue({el:'#app',data:{imgs: [1, 2, 3, 4, 5, 6],index: 0},methods:{func(i){if(i == -1){this.index --;}else if(i == 1){this.index ++;}}}})</script>
</body>
</html>

请添加图片描述
v-for:基于数据循环,多次渲染整个元素,可以是数组、对象等,可以写为“v-for=‘item in items’”或者“v-for=‘(item,index) in items’”,通常在使用v-for的标签元素上需要添加属性key,用来唯一标识这个标签元素,推荐使用id作为key,不推荐使用index作为key(会变化,不对应)
v-model:通常结合表单元素来使用,用来双向数据绑定对应输入框中内容,如修改vue实例data中对应的属性值,输入框中值会进行相应变换,修改输入框中的值,对应的vue实例中对应属性值也会跟着进行变化;

<div id="app"><input type="text" v-model="val">
</div>
<script type="text/javascript">const app = new Vue({el:'#app',data:{val:'hello world!'}})
</script>

请添加图片描述

1. 指令修饰符

通过“.”指明一些指令后缀,不同后缀封装了不同的处理操作,简化代码。
按键修饰符@keyup.enter,键盘回车监听;v-mdel.trim,去掉首尾空格;v-model.number,转数字;@事件名.stop,阻止冒泡;@事件名.prevent,阻止默认行为。
@keyup.enter的使用

2. v-bind对样式控制的增强

  • 操作class,“:class=’对象/数组‘”
    • 对象,键就是类名,值是布尔值,如果值为true,有这个类,否则没有这个类,使用场景,一个类名,来回切换;
    • 数组,数组中所有的类,都会添加到盒子上,本质上就是一个class列表,使用场景,批量添加或删除类;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue2</title><script src="../vue2.js"></script><style>.red{background-color: red;}.blue{background-color: blue;}</style>
</head>
<body><div id="app"><p :class="{red:true}">hello world!</p><p :class="['blue']">hello world!2</p></div>
</body>
</html>

请添加图片描述

  • 操作style,“:style=‘样式对象’”
:style="{width:'300px'}"

像类似“background-color”的属性,写法可以为:“background-color”或“backgroundColor",前者需要用引号。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue2</title><script src="../vue2.js"></script><style>.jdt{width: 200px;height: 30px;border-radius: 25px;border: 1px solid black;}.inner-jdt{height: 100%;background-color: blue;border-radius: 25px;line-height: 30px;text-align: center;transition: all 0.6s;}</style>
</head>
<body><div id="app"><div class="jdt"><div class="inner-jdt" :style="{width:jdtWidth}">{{jdtWidth}}</div><br><button @click="setWidth('20%')">20%</button><button @click="setWidth('40%')">40%</button><button @click="setWidth('60%')">60%</button></div></div><script>new Vue({el:'#app',data:{jdtWidth:'40%'},methods:{setWidth(width){this.jdtWidth = width;}}})</script>
</body>
</html>

请添加图片描述

3. v-model应用于其他表单元素

<div id="app">输入框:<input type="text" v-model="v1"><br>复选框:<input type="checkbox" v-model="v2"><br>单选框: 1 <input type="radio" name="hh" value="1" v-model="v3">2 <input type="radio" name="hh" value="2" v-model="v3"><br>下拉菜单:<select v-model="v4"><option name="hh2" value="1">1</option><option name="hh2" value="2">2</option></select><br>多行文本:<textarea v-model="v5"></textarea>
</div>
<script>const app = new Vue({el:'#app',data:{v1:'',v2:true,v3:1,v4:'2',v5:''}})
</script>

2. 计算属性

基于现有的数据,计算出来的新属性。依赖的数据变化,自动重新计算。声明在computed配置项中,一个计算属性对应一个函数;使用起来和普通属性一样使用;

<body><div id="app"><p>{{list}}</p><p>{{totalCount}}</p></div><script>const app = new Vue({el:'#app',data:{list:[1,2,3,4,5]},computed:{totalCount(){return this.list.reduce((item,sum)=>sum+item,0);}}})</script>
</body>

请添加图片描述
和函数的比较,**计算属性会对计算出来的结果进行缓存,再次使用直接读取缓存,依赖项变化了,会自动重新计算,并再次缓存。**默认的计算属性只是求,而不能设值,计算属性的完整写法如下:

computed{计算属性名:{get(){一段代码逻辑return 结果值},set(修改的值){一段代码逻辑}}
}

当计算属性名被修改赋值时,执行set,修改的值,传递给set方法的形参。

<body><div id="app"><p>{{getName}}</p><button @click="setName">改名</button></div><script>const app = new Vue({el:'#app',data:{firstName:'孙',secondName:'权'},methods:{setName(){this.getName = '孙小妹';}},computed:{getName:{get(){return this.firstName + this.secondName;},set(val){this.firstName = val.slice(0,1);this.secondName = val.slice(1);}}}})</script>
</body>

请添加图片描述

3. watch侦听器(监视器)

监视数据变化,执行一些异步操作

// 监视简单数据
watch{数据名(o,n){// 代码逻辑}
}
//复杂数据
watch{'对象.数据名'(o,n){// 代码逻辑}
}

完整写法,比如监视一个对象的所有属性

watch{数据属性名:{deep:true,// 深度监视handler(newValue){// 代码逻辑}}
}

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

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

相关文章

超时导致SparkContext构造失败的问题探究

文章目录 1.前言2. 基于事故现场对问题进行分析2.1 日志分析2.2 单独测试Topology代码试图重现问题 3. 源码解析3.1 Client模式和Cluster模式下客户端的提交和启动过程客户端提交时在两种模式下的处理逻辑ApplicationMaster启动时在两种模式下的处理逻辑 3.2 两种模式下的下层角…

08-8.4.1 简单选择排序+8.4.2 堆排序

&#x1f44b; Hi, I’m Beast Cheng &#x1f440; I’m interested in photography, hiking, landscape… &#x1f331; I’m currently learning python, javascript, kotlin… &#x1f4eb; How to reach me --> 458290771qq.com 喜欢《数据结构》部分笔记的小伙伴可以…

【MySQL】9.表的内外连接

表的内外连接 一.内连接二.外连接1.左外连接2.右外连接 一.内连接 内连接实际上就是利用 where 子句对两张表形成的笛卡尔积进行筛选&#xff0c;前面学习的查询都是内连接&#xff0c;也是使用最多的连接查询 语法&#xff1a; select 字段 from 表1 inner join 表2 on 连接条…

双缓存机制

应用 显卡 显卡包含前置缓冲区与后置缓冲区&#xff0c;如60hz的显示器每秒会从前置缓冲区读取60张图像&#xff0c; 而显卡则是合成图像并写入后置缓冲区&#xff0c;一旦后置缓冲区被写入图像&#xff0c; 前后缓冲区就会互换 react与vue 如react的fiber tree&#xff0…

vue解决页面放大图片模糊的问题

1.页面放大(或者电脑设置了缩放比例,比如125%)&#xff0c;图片模糊 不考虑带宽的情况下&#xff0c;直接请求后端最大尺寸的照片。 2.根据用户电脑的放大倍数或者电脑设置中的放大倍数(DPR)&#xff0c;自动请求合适的照片 3.实现&#xff1a; 记住公式&#xff1a;图片尺…

Adminer-CVE-2021-21311

在其4.0.0到4.7.9版本之间&#xff0c;连接 ElasticSearch 和 ClickHouse 数据库时存在一处服务端请求伪造漏洞&#xff08;SSRF&#xff09;。 VPS开启HTTP服务 VPS 开启HTTP 再同时跑POC 确保能访问poc里的链接文件 第一是目标地址 第二个是跳转地址 第三个是监听地址 如果…

Perl 语言开发(十四):数据库操作

目录 1. 数据库连接 2. 基本数据库操作 2.1 插入数据 2.2 查询数据 2.3 更新数据 2.4 删除数据 3. 高级查询 3.1 多表连接 3.2 子查询 3.3 聚合查询 4. 事务处理 5. 数据库连接池 6. 常见的数据库模块 7. 综合实例 结论 数据库操作是大多数软件系统的核心部分。…

Vue3.js“非原始值”响应式实现基本原理笔记(四)浅响应和深响应、只读和浅只读

如果您觉得这篇文章有帮助的话&#xff01;给个点赞和评论支持下吧&#xff0c;感谢~ 作者&#xff1a;前端小王hs 阿里云社区博客专家/清华大学出版社签约作者/csdn百万访问前端博主/B站千粉前端up主 此篇文章是博主于2022年学习《Vue.js设计与实现》时的笔记整理而来 书籍&a…

为什么大学讲授 C 语言比讲授 C++ 的更多?

大学更倾向于讲授C语言而不是C的几个原因可能包括。我收集归类了一份嵌入式学习包&#xff0c;对于新手而言简直不要太棒&#xff0c;里面包括了新手各个时期的学习方向编程教学、问题视频讲解、毕设800套和语言类教学&#xff0c;敲个22就可以免费获得。 基础性质&#xff1a;…

【Pytorch实战教程】对抗样本生成中是如何添加噪声的?

文章目录 对抗样本中添加随机生成的对抗噪声代码解析应用场景示例代码对抗样本中添加随机生成的对抗噪声 通常在对抗训练或者生成对抗样本时使用,目的是为了稍微扰动模型的输入数据,从而测试或增强模型在面对输入数据轻微变化时的鲁棒性。 x = x + torch.zeros_like(x).uni…

CPTAC蛋白数据库的补充(自备)

目录 关于CPTAC数据库 资料下载 数据分析 相关网站说明:Proteomic Data Commons (cancer.gov) 关于CPTAC数据库 两个基因相关性CPTAC蛋白组数据_cptac分析蛋白表达相关性-CSDN博客 两个基因相关性细胞系(CCLE)(升级)-CSDN博客 CPTAC数据门户是一个集中的存储库,用…

【Linux】进程程序替换 + 模拟实现简易shell

前言 上一节我们介绍了 **进程终止**和 **进程等待**等一系列问题&#xff0c;并做了相应的验证&#xff0c;本章将继续对进程控制进行介绍&#xff0c;重点学习进程程序替换&#xff0c;并进行相应验证&#xff0c;在此基础上&#xff0c;自己模拟实现一个shell&#xff0c;该…

Redis分布式锁-Redisson可重入锁原理的个人见解。

记录Redisson可重入锁的个人见解。 文章目录 前言一、什么叫做锁的重入&#xff1f;二、Redisson可重入锁原理 前言 ⁣⁣⁣⁣ ⁣⁣⁣⁣ 之前在写项目的时候&#xff0c;注意到Redisson可重入锁的一个问题&#xff0c;随即在网上搜索其对应的资料&#xff0c;下面就记录一下个…

软件开发面试题C#,.NET知识点(续)

1.C#中的封装是什么&#xff0c;以及它的重要性。 封装&#xff08;Encapsulation&#xff09; 是面向对象编程&#xff08;OOP&#xff09;的一个基本概念。它指的是将对象的状态&#xff08;属性&#xff09;和行为&#xff08;方法&#xff09;绑定在一起&#xff0c;并且将…

昇思25天学习打卡营第14天 | ShuffleNet图像分类

昇思25天学习打卡营第14天 | ShuffleNet图像分类 文章目录 昇思25天学习打卡营第14天 | ShuffleNet图像分类ShuffleNetPointwise Group ConvolutionChannel ShuffleShuffleNet模块网络构建 模型训练与评估数据集训练模型评估模型预测 总结打卡 ShuffleNet ShuffleNetV1是旷世科…

鸿蒙实训笔记

第一天 #初始化一个新的NPM项目(根据提示操作) npm init #安装TSC、TSLint和NodeJS的类型声明 npm install -s typescript tslint types/node 在根目录中新建一个名为tsconfig.json的文件&#xff0c;然后在代码编辑器中打开&#xff0c;写入下述内容&#xff1a; {"co…

租用海外服务器需要考虑哪些因素

当企业选择租用海外服务器时需要考虑到哪些因素呢&#xff1f; 对于海外服务器的租用我们需要考虑到机房的位置以及服务器的稳定性如何&#xff0c;所以企业可以选择离目标用户群体比较近一点的机房&#xff0c;以此来降低服务器的延迟度并且能够提高用户的访问速度。 对于机房…

MATLAB激光通信和-积消息传递算法(Python图形模型算法)模拟调制

&#x1f3af;要点 &#x1f3af;概率论和图论数学形式和图结构 | &#x1f3af;数学形式、图结构和代码验证贝叶斯分类器算法&#xff1a;&#x1f58a;多类型&#xff1a;朴素贝叶斯&#xff0c;求和朴素贝叶斯、高斯朴素贝叶斯、树增强贝叶斯、贝叶斯网络增强贝叶斯和半朴素…

网络层重点协议—IP协议

在复杂的网络环境中确定一个合适的路径 协议头格式如下&#xff1a; 4位版本号(version) 指定协议的版本&#xff08;IPV4-4,IPV6-6&#xff09; 4位首部长度(header length) IP头部的长度是多少个32bit&#xff0c;也就是length*4的字节数。4bit表示最大的数字是15&#x…

大模型日报 2024-07-14

大模型日报 2024-07-14 大模型资讯 ⏩6700 万参数比肩万亿巨兽 GPT-4&#xff01;微软 MIT 等联手破解 Transformer 推理密码 微软、MIT 等机构的学者提出创新训练范式&#xff0c;攻破大模型推理缺陷。通过因果模型构建数据集&#xff0c;教模型学习公理&#xff0c;67M 参数的…