JS，Vue2，事件处理，计算属性，监视属性，class与style绑定
bigegpt 2024-10-11 10:54 9 浏览
VUE事件处理
用v-on指令或者@监听DOM事件，并在触发时运行一些JavaScript代码；
参考：JS，Vue2，介绍，与Vue3区别，MVVM设计模式，模板语法，数据绑定
Vue中的事件修饰符：
1、prevent：阻止默认事件（常用）；
2、stop：阻止事件冒泡（常用）；
3、once：事件只触发一次（常用）；
4、capture：使用事件的捕获模式；
5、self：只有event.target是当前操作的元素时才触发事件；
6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
Vue中常用的按键别名：
回车 => enter、删除 => delete (捕获“删除”和“退格”键)、退出 => esc、空格 => space、换行 => tab (特殊，必须配合keydown去使用)、上 => up、下 => down、左 => left、右 => right等。
代码案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>VUE2事件处理</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<!--
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
-->
<style>
.demo1{
height: 50px;
background-color: skyblue;
}
.box1{
padding: 5px;
background-color: skyblue;
}
.box2{
padding: 5px;
background-color: orange;
}
.list {
width: 200px;
height: 200px;
background-color: peru;
overflow: auto;
}
li {
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<h2>{{name}}++</h2>
<button v-on:click="showInfo1">提示信息1</button> -->
<button @click="showInfo2">提示信息2</button> -->
<button @click="showInfo3($event,666)">提示信息3（传参）</button>
<hr/>
<!--
Vue中的事件修饰符：
1、prevent：阻止默认事件（常用）；
2、stop：阻止事件冒泡（常用）；
3、once：事件只触发一次（常用）；
4、capture：使用事件的捕获模式；
5、self：只有event.target是当前操作的元素时才触发事件；
6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
-->
<!-- 阻止默认事件（常用） -->
<a href="https://www.toutiao.com/c/user/token/MS4wLjABAAAA04-54E8cnKw5hC4US0MxdKuKxFAb5RbaGtfKx1ml_CE/" @click.prevent="showInfo1">提示信息</a>
<br />
<!-- 阻止事件冒泡（常用） -->
<div class="demo1" @click="showInfo1">
<button @click.stop="showInfo1">提示信息</button>
<!-- 修饰符可以连续写 -->
<!--
<a href="https://www.toutiao.com/c/user/token/MS4wLjABAAAA04-54E8cnKw5hC4US0MxdKuKxFAb5RbaGtfKx1ml_CE/" @click.prevent.stop="showInfo1">提示信息</a>
-->
</div>
<br />
<!-- 事件只触发一次（常用） -->
<button @click.once="showInfo1">提示信息</button>
<br />
<!-- 使用事件的捕获模式 -->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<br />
<!-- 只有event.target是当前操作的元素时才触发事件； -->
<div class="demo2" @click.self="showInfo1">
<button @click="showInfo1">提示信息</button>
</div>
<br />
<!-- onwheel事件在鼠标滚轮在元素上下滚动时触发； -->
<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
<ul @wheel.passive="showDemo" class="list">
<li>111111112</li>
<li>222222222</li>
<li>333333333</li>
<li>444444444</li>
</ul>
<!-- 键盘事件 -->
<!--
1、Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
2、Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3、系统修饰键（用法特殊）：ctrl、alt、shift、meta
(1)、配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2)、配合keydown使用：正常触发事件。
4、也可以使用keyCode去指定具体的按键（不推荐）
5、Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
-->
<input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo1">
</div>
<script type="text/javascript" >
// 阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
// 创建Vue实例
const vm = new Vue({
el:'#app',
data:{
name:'小奋斗',
},
methods:{
showInfo1(event){
console.log(event.target.innerText) // 提示信息1
console.log(this) // vm
alert('提示信息1')
},
showInfo2(event){
console.log(event.target.innerText) // 提示信息2
console.log(this) // vm
alert('提示信息2')
},
showInfo3(event,number){
console.log(event,number) // PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …} 666
console.log(event.target.innerText) // 提示信息3（传参）
console.log(this) // vm
alert('提示信息3（传参）')
},
showMsg(msg){
console.log(msg)
},
showDemo(){
for (let i = 0; i < 1000; i++) {
console.log('#');
}
console.log('累坏了')
}
}
});
</script>
</body>
</html>VUE计算属性
模板内的表达式是非常便利的，用于简单的运算。当其过长或逻辑过于复杂时，会难以维护，因此，当遇到复杂的逻辑时应该使用计算属性，用computed计算属性。
代码案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>VUE2计算属性</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<!--
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
-->
</head>
<body>
<div class="app">
<h1>{{name}}</h1>
<hr>
<ul>
<li>
通过methods来完成
</li>
</ul>
<input type="text" v-model="firstName" />
<input type="text" v-model="lastName" />
全名：{{fullName()}}
<hr>
<ol>
<li>通过改变firstName2和lastName2来改变fullName2</li>
<li>通过改变fullName2来调整firstName2和lastName2</li>
</ol>
<br/>
<input type="text" v-model="firstName2" />
<input type="text" v-model="lastName2" />
全名：<input type="text" v-model="fullName2"> <br/>
<hr>
<ul>
<li>通过改变firstName3和lastName3来改变fullName3</li>
</ul>
<br/>
<input type="text" v-model="firstName3" />
<input type="text" v-model="lastName3" />
全名：<input type="text" v-model="fullName3"> <br/>
</div>
<script type="text/javascript">
// 阻止运行时提示
Vue.config.productionTip = false;
const vm = new Vue({
// 绑定节点
el: ".app",
// 数据
data: {
name: "小奋斗",
firstName: "小",
lastName: "奋斗",
// 计算属性
firstName2: "小小",
lastName2: "之说",
// 简写
firstName3: "我佛",
lastName3: "慈悲",
},
// 方法
methods:{
fullName(){
return this.firstName + "." + this.lastName;
}
},
computed:{
// 计算属性
fullName2:{
get(){
return this.firstName2 + "." + this.lastName2;
},
set(value){
console.log('set',value);
const arr = value.split('.');
this.firstName2 = arr[0];
this.lastName2 = arr[1];
}
},
// 简写
fullName3(){
return this.firstName3 + "." + this.lastName3;
}
}
});
</script>
</body>
</html>VUE监视属性
通过watch来响应数据的变化。
代码案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>VUE2监视属性</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<!--
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
-->
</head>
<body>
<div id="app">
<h3>状态变化1：</h3>
<button @click="changeStatus1">状态</button> {{computedStatus1}}
<hr>
<h3>状态变化2：</h3>
<button @click="changeStatus2">状态</button> {{statusName2}}
<hr>
<h3>状态变化3：</h3>
<button @click="changeStatus3">状态</button> {{statusName3}}
<hr>
<h3>状态变化4：</h3>
<button @click="changeStatus4">状态</button> {{statusName4}}
<hr>
<h3>深度监视，a的值是：{{numbers.a}}</h3>
<button @click="numbers.a++">a+1</button>
<hr>
<h3>深度监视，b的值是：{{numbers.b}}</h3>
<button @click="numbers.b++">b+1</button>
</div>
<script type="text/javascript" >
// 阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
// 创建Vue实例
const vm = new Vue({
el:'#app',
data:{
status1 : false,
statusName1: "假",
//
status2 : true,
statusName2: "真",
//
status3 : false,
statusName3: "假",
//
status4 : false,
statusName4: "假",
// 深度监视
numbers: { a:1, b:1 }
},
methods:{
changeStatus1(){
if(this.status1){
this.status1 = false;
}else{
this.status1 = true;
}
},
changeStatus2(){
if(this.status2){
this.status2 = false;
}else{
this.status2 = true;
}
},
changeStatus3(){
if(this.status3){
this.status3 = false;
}else{
this.status3 = true;
}
},
changeStatus4(){
if(this.status4){
this.status4 = false;
}else{
this.status4 = true;
}
}
},
computed:{
computedStatus1(){
if(this.status1){
return "真";
}else{
return "假";
}
}
},
watch:{
status2:{
// 初始化时让handler调用一下
immediate:true,
// 当status2发生改变时，handler调用
handler(newValue,oldValue){
console.log('status2被修改了', newValue, oldValue);
if(newValue){
this.statusName2 = "真";
}else{
this.statusName2 = "假";
}
}
},
// 简写
status4(newValue,oldValue){
console.log('status4被修改了', newValue, oldValue);
if(newValue){
this.statusName4 = "真";
}else{
this.statusName4 = "假";
}
},
// 监视多级结构中某个属性的变化
'numbers.a':{
handler(newValue,oldValue){
console.log('numbers.a被改变了', newValue, oldValue);
}
},
// 深度监视：监视多级结构中所有属性的变化
numbers:{
deep: true,
handler(){
console.log('numbers改变了')
}
}
}
});
// 第2种方法
vm.$watch('status3',{
immediate: false,
// 当status3发生改变时，handler调用
handler(newValue, oldValue){
console.log('status3被修改了', newValue, oldValue);
if(newValue){
this.statusName3 = "真";
}else{
this.statusName3 = "假";
}
}
});
</script>
</body>
</html>VUE绑定样式
class样式，写法:class="xxx" ，其中xxx可以是字符串、对象、数组。
1、字符串写法适用于：类名不确定，要动态获取。
2、对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
3、数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
style样式，写法：:style="{fontSize: xxx}"，其中xxx是动态值；:style="[a,b]"其中a、b是样式对象。
代码案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Vue2 class与style绑定（绑定样式）</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<!--
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
-->
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy{
border: 4px solid red;;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal{
background-color: rgb(31, 173, 230);
}
.xfd1{
background-color: yellowgreen;
}
.xfd2{
font-size: 30px;
text-shadow:2px 2px 10px red;
}
.xfd3{
border-radius: 20px;
}
</style>
</head>
<body>
<div id="app">
<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div><br/>
<hr />
<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
<div class="basic" :class="classArr">{{name}}</div> <br/>
<hr />
<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
<div class="basic" :class="classObj">{{name}}</div> <br/>
<hr />
<!-- 绑定style样式--对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div> <br/>
<hr />
<!-- 绑定style样式--数组写法 -->
<div class="basic" :style="styleArr">{{name}}</div>
</div>
<script type="text/javascript" >
// 阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
// 创建Vue实例
new Vue({
el:'#app',
data:{
name: '小奋斗',
mood: 'normal',
classArr:['xfd1','xfd2','xfd3'],
classObj:{
atguigu1:false,
atguigu2:false,
},
styleObj:{
fontSize: '40px',
color:'red',
},
styleObj2:{
backgroundColor:'orange'
},
styleArr:[
{
fontSize: '40px',
color:'blue',
},
{
backgroundColor:'gray'
}
]
},
methods: {
changeMood(){
const arr = ['happy','sad','normal']
const index = Math.floor(Math.random()*3)
this.mood = arr[index]
}
},
});
</script>
</body>
</html>相关推荐
- 当Frida来“敲”门（frida是什么）
-
0x1渗透测试瓶颈目前，碰到越来越多的大客户都会将核心资产业务集中在统一的APP上，或者对自己比较重要的APP，如自己的主业务，办公APP进行加壳，流量加密，投入了很多精力在移动端的防护上。而现在挖...
- 服务端性能测试实战3-性能测试脚本开发
-
前言在前面的两篇文章中，我们分别介绍了性能测试的理论知识以及性能测试计划制定，本篇文章将重点介绍性能测试脚本开发。脚本开发将分为两个阶段：阶段一：了解各个接口的入参、出参，使用Python代码模拟前端...
- Springboot整合Apache Ftpserver拓展功能及业务讲解(三)
-
今日分享每天分享技术实战干货，技术在于积累和收藏，希望可以帮助到您，同时也希望获得您的支持和关注。架构开源地址：https://gitee.com/msxyspringboot整合Ftpserver参...
- Linux和Windows下:Python Crypto模块安装方式区别
-
一、Linux环境下：fromCrypto.SignatureimportPKCS1_v1_5如果导包报错：ImportError:Nomodulenamed'Crypt...
- Python 3 加密简介（python des加密解密）
-
Python3的标准库中是没多少用来解决加密的，不过却有用于处理哈希的库。在这里我们会对其进行一个简单的介绍，但重点会放在两个第三方的软件包：PyCrypto和cryptography上，我...
- 怎样从零开始编译一个魔兽世界开源服务端Windows
-
第二章：编译和安装我是艾西，上期我们讲述到编译一个魔兽世界开源服务端环境准备，那么今天跟大家聊聊怎么编译和安装我们直接进入正题（上一章没有看到的小伙伴可以点我主页查看）编译服务端：在D盘新建一个文件夹...
- 附1-Conda部署安装及基本使用（conda安装教程）
-
Windows环境安装安装介质下载下载地址：https://www.anaconda.com/products/individual安装Anaconda安装时，选择自定义安装，选择自定义安装路径：配置...
- 如何配置全世界最小的 MySQL 服务器
-
配置全世界最小的MySQL服务器——如何在一块IntelEdison为控制板上安装一个MySQL服务器。介绍在我最近的一篇博文中，物联网，消息以及MySQL，我展示了如果Partic...
- 如何使用Github Action来自动化编译PolarDB-PG数据库
-
随着PolarDB在国产数据库领域荣膺桂冠并持续获得广泛认可，越来越多的学生和技术爱好者开始关注并涉足这款由阿里巴巴集团倾力打造且性能卓越的关系型云原生数据库。有很多同学想要上手尝试，却卡在了编译数据...
- 面向NDK开发者的Android 7.0变更（ndk android.mk）
-
订阅Google官方微信公众号：谷歌开发者。与谷歌一起创造未来！受Android平台其他改进的影响，为了方便加载本机代码，AndroidM和N中的动态链接器对编写整洁且跨平台兼容的本机...
- 信创改造--人大金仓(Kingbase)数据库安装、备份恢复的问题纪要
-
问题一：在安装KingbaseES时，安装用户对于安装路径需有“读”、“写”、“执行”的权限。在Linux系统中，需要以非root用户执行安装程序，且该用户要有标准的home目录，您可...
- OpenSSH 安全漏洞，修补操作一手掌握
-
1.漏洞概述近日，国家信息安全漏洞库（CNNVD）收到关于OpenSSH安全漏洞（CNNVD-202407-017、CVE-2024-6387）情况的报送。攻击者可以利用该漏洞在无需认证的情况下，通...
- Linux:lsof命令详解（linux lsof命令详解）
-
介绍欢迎来到这篇博客。在这篇博客中，我们将学习Unix/Linux系统上的lsof命令行工具。命令行工具是您使用CLI（命令行界面）而不是GUI（图形用户界面）运行的程序或工具。lsoflsof代表&...
- 幻隐说固态第一期:固态硬盘接口类别
-
前排声明所有信息来源于网络收集，如有错误请评论区指出更正。废话不多说，目前固态硬盘接口按速度由慢到快分有这几类：SATA、mSATA、SATAExpress、PCI-E、m.2、u.2。下面我们来...
- 新品轰炸 影驰SSD多款产品登Computex
-
分享泡泡网SSD固态硬盘频道6月6日台北电脑展作为全球第二、亚洲最大的3C/IT产业链专业展，吸引了众多IT厂商和全球各地媒体的热烈关注，全球存储新势力—影驰，也积极参与其中，为广大玩家朋友带来了...
- 一周热门
- 最近发表
-
- 当Frida来“敲”门（frida是什么）
- 服务端性能测试实战3-性能测试脚本开发
- Springboot整合Apache Ftpserver拓展功能及业务讲解(三)
- Linux和Windows下:Python Crypto模块安装方式区别
- Python 3 加密简介（python des加密解密）
- 怎样从零开始编译一个魔兽世界开源服务端Windows
- 附1-Conda部署安装及基本使用（conda安装教程）
- 如何配置全世界最小的 MySQL 服务器
- 如何使用Github Action来自动化编译PolarDB-PG数据库
- 面向NDK开发者的Android 7.0变更（ndk android.mk）
- 标签列表
-
- mybatiscollection (79)
- mqtt服务器 (88)
- keyerror (78)
- c#map (65)
- resize函数 (64)
- xftp6 (83)
- bt搜索 (75)
- c#var (76)
- mybatis大于等于 (64)
- xcode-select (66)
- mysql授权 (74)
- 下载测试 (70)
- linuxlink (65)
- pythonwget (67)
- androidinclude (65)
- libcrypto.so (74)
- logstashinput (65)
- hadoop端口 (65)
- vue阻止冒泡 (67)
- jquery跨域 (68)
- php写入文件 (73)
- kafkatools (66)
- mysql导出数据库 (66)
- jquery鼠标移入移出 (71)
- 取小数点后两位的函数 (73)