随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

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}}} 有问题

posted on   小虾米吖~  阅读(163)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」

点击右上角即可分享
微信分享提示