vue基础
一、事件
事件对象: @click=show($event)
事件冒泡:
阻止冒泡:
1)ev.cancelBubble=true;
2)@click.stop 推荐
默认行为(默认事件):鼠标左键或者右键的行为
阻止默认行为:
1)ev.preventDefault();
2)@contextmenu.prevent="函数名" 推荐
键盘事件:
keydown:
ev.keyCode 获取按下的键码,如回车键:13
keyup:
ev.keyCode 获取按下的键码,如回车键:13
@keyup.13 = "show" //直接锁定键码13或者
@keyup.enter = "show"
常用键码:
回车: 1)@keyup.13 = "show"
2)@keyup.enter = "show"
上下左右:
@keydown/@keyup.up
@keydown/@keyup.down
@keydown/@keyup.left
@keydown/@keyup.right
二、属性
1、v-bind:绑定属性名
eg.<img v-bind:src="imgUrl" alt=""/> 没有双括号的,否则没有效果
等同于<img :src="imgUrl" alt=""/>
2、特殊属性:
1):class属性用法
a.以数组的身份来用
.red{color:red;}
.blue{color:blue;}
绑定:
data: {
reds:'red'
}
使用: <strong :class="reds">文本</strong>或<strong :class="[red]">文本</strong>
<strong :class="[reds,b,c,d....]">文本</strong>使用多个类往后添加即可。
<em :class="{red:false,blue:true}">两个类只作用一个</em>
注:在这里的red和blue都是类名不是变量
c.封装成json数据来使用
data:{
json:{
red:true,
blue:false
}
}
<b :class="json">这是使用的json数据封装的效果</b>
2):style使用
a. <b :style="{color:'blue'}">json方式,直接写</b>
b.
data: {
r:{color:'red'}
}
<em :style="[r]">数组方式</em>
c.json数据格式使用
json:{
color:'red',
backgroundColor:'gray'
}
<p :style="json">json格式使用style</p>
三、模板
数据更新模板变化:{{message}}
数据只绑定一次: {{*message}} *貌似不管用!
html转义输出? {{{message}}} 有问题
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/10653505.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」