首页 > 其他分享 >02_Vue常用的一些指令

02_Vue常用的一些指令

时间:2024-06-23 09:32:11浏览次数:28  
标签:02 count Vue const 鼠标 keyup 指令 ref 函数

文档:内置指令 | Vue.js (vuejs.org)

 

1.v-on,给元素绑定事件监听器

<!-- 方法处理函数 -->
<button v-on:click="doThis"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 点击事件将最多触发一次 -->
<button v-on:click.once="doThis"></button>

 

2.v-model,在表单输入元素或组件上创建双向绑定

<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />

 

3.v-show,基于表达式值的真假性,来改变元素的可见性

<h1 v-show="ok">Hello!</h1>

ok:是bool值

 

4.v-if,基于表达式值的真假性,来条件性地渲染元素或者模板片段

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

 

5.v-for,基于原始数据多次渲染元素或模板块

<div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>
<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

 

6.computed(),接受一个 getter 函数,返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

 

7.watch(),侦听一个或多个响应式数据源,并在数据源变化时调用所给的回调函数。

侦听一个 getter 函数:

const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

侦听一个 ref:

const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

 

8.键盘鼠标修饰符

keydown: 键盘按下事件 keyup: 键盘的抬起事件
import { ref } from 'vue';
let message = ref("")

// 定义一个回车键事件函数
const enterHandler = ()=> {
  console.log("你敲击了回车键")
}
  <p>回车事件:</p>
  <input v-model="message" placeholder="请输入值" @keyup.enter="enterHandler" />
  <input v-model="message" placeholder="请输入值" @keydown.enter="enterHandler" />

其它事件@keyup.delete,@keyup.tab,@keyup.ctrl,@keyup.ctrl.enter

按住ctrl鼠标点击事件:
<button type="button" @click.ctrl="v++">点我</button>

鼠标左击:@click.left

鼠标右击:@click.right 或 @contextmenu.prevent
<textarea @click.right="rightHandler" oncontextmenu="return false">
      这里面有些内容
  </textarea>
oncontextmenu="return false"  :禁用弹窗

 

标签:02,count,Vue,const,鼠标,keyup,指令,ref,函数
From: https://www.cnblogs.com/MingQiu/p/18263077

相关文章

  • 【单片机毕业设计选题24020】-全自动鱼缸的设计与应用
    系统功能:(1)检测并控制鱼缸水温,水温低于22℃后开启加热,高于28℃后关闭加热。(2)定时喂食,每天12点和0点喂食一次,步进电机开启后再关闭模拟喂食。(3)定时开启水循环,每隔一个小时开启水循环水泵一分钟。(4)OLED显示时间,水温,加热喂食和水循环的状态。(5)手机蓝牙显示系统状态及控制加热......
  • antdesign-vue3 List的分页器最全配置
    AntDesignVue官网:https://www.antdv.com/components/list-cn何时使用#最基础的列表展示,可承载文字、列表、图片、段落,常用于后台数据展示页面。<a-listsize="large"bordered:data-source="listData":pagination="pagination"><......
  • springboot+手机商城网站-计算机毕业设计源码201029
    摘 要在信息飞速发展的今天,网络已成为人们重要的信息交流平台。手机店每天都有大量的手机商品需要通过网络发布,为此,本人开发了一个基于springboot手机商城网站。本系统采用跨平台的JAVA语言开发,利用springboot框架进行逻辑控制,MySQL数据库存储数据,最后Tomcat服务器完成发布......
  • zynq-7000 7Z020 双网卡调试
    zynq-70007Z020双网卡调试网卡芯片采用两片RTL8201FMII模式注意:图中R920需要去掉。设备树添加&gem0{compatible=“cdns,zynq-gem”;status=“okay”;phy-mode=“mii”;clock-frequency=<25000000>;xlnx,ptp-enet-clock=<0x69f6bcb>;phy-handle......
  • 2024最新任务悬赏源码活动营销三级分销返佣积分商城版
    内容目录一、详细介绍二、效果展示1.部分代码2.效果图展示三、学习资料下载一、详细介绍任务悬赏源码活动营销三级分销返佣积分商城版这个是带有VUE源码的搭建也是很简单可生成APP功能说明:分销功能:用户拉新用户做任务可以获取任务返佣,三级分销逻辑。用户拉新会......
  • 2024年6月最新版波猫商店自动售卡系统源码
    内容目录一、详细介绍二、效果展示1.部分代码2.效果图展示三、学习资料下载一、详细介绍最新版波猫商店自动售卡系统源码适用于各种电商、优惠卷、论坛邀请码、充值卡、激活码、注册码、腾讯爱奇艺积分CDK等,支持手动和全自动发货,还有类似1688的分层批发模式。功......
  • 一、若依--P2--P5【黑马程序员Java最新AI+若依框架项目开发新方案视频教程,基于RuoYi-V
    学习视频【黑马程序员Java最新AI+若依框架项目开发新方案视频教程,基于RuoYi-Vue3前后端分离版本,从前端到后端再到AI智能化应用全通关】https://www.bilibili.com/video/BV1pf421B71v/?p=6&share_source=copy_web&vd_source=3949d51b57b2891ea14d6e51c792bef6P2:前端框架搭......
  • 重磅!2024年最新影响因子(生态学/林学/土壤学/遥感/微生物/环境科学/植物科学) 收藏版!
    2024年最新影响因子正式揭晓!2024年6月20日,ClarivateAnalytics(科睿唯安)发布了各大SCI期刊的2023年影响因子。从最新结果看,今年的影响因子继续“普跌”,其中顶刊Nature和Science均有下降,分别至50.5和44.7。我们公众号《生态学者》特地从中选取生态学、林学、土壤学、遥感、微生......
  • 2024年华为OD机试真题-生成哈夫曼树-(C++/Java/python)-OD统一考试(C卷D卷)
    题目描述给定长度为n的无序的数字数组,每个数字代表二叉树的叶子节点的权值,数字数组的值均大于等于1。请完成一个函数,根据输入的数字数组,生成哈夫曼树,并将哈夫曼树按照中序遍历输出。为了保证输出的二叉树中序遍历结果统一,增加以下限制:二叉树节点中,左节点权值小于右节点......
  • 【C#进阶】单元测试_2024-06-22
    单元测试什么是单元测试?想象一下,你在做一道大菜,每种食材的准备就是一个个小任务。单元测试就像是在烹饪前检查每样食材是否新鲜、切割是否恰当。在编程中,一个“单元”通常指的是代码中的最小可测试部分,比如一个方法。单元测试就是编写一小段代码,专门用来检查这个方法是否按预期......