Vue.js中的两大指令:v-on和v-bind,实现页面动态渲染和事件响应

Vue.js中的两大指令:v-on和v-bind,实现页面动态渲染和事件响应

  • 一、Vue指令
    • (一)v-bind指令
    • (二)v-on指令
      • 1. 基本使用
        • (1)最基本的语法
      • 2. Vue中获取事件对象(了解)
      • 3. v-on 事件修饰符
      • 4. 按键修饰符
      • 5. 案例:反转字符串

一、Vue指令

  • vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头
  • 每个 v- 开头的指令, 都有着自己独立的功能, 将来vue解析时, 会根据不同的指令提供不同的功能

(一)v-bind指令

  • 描述:插值表达式不能用在html的属性上,如果想要动态的设置html元素的属性,需要使用v-bind指令
  • 作用:动态的设置html的属性,数据绑定操作
  • 语法:v-bind:title="msg"
  • 简写::title="msg"
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<template>
  <div>
    <h1>v-bing</h1>
    <p>作用:插值表达式适用于行外数据绑定! v-bind用于行内</p>
    <a v-bind:href="msg">你好啊 Vue</a>
    <a :href="msg">你好啊 Vue</a>
  </div>
</template>
<script>
export default {
  data(){
    return{
      msg:"www.baidu.com"
    }
  }
}
</script>
<style>
</style>

(二)v-on指令

1. 基本使用

  • 作用:注册事件
  • 语法:
    ①、 v-on:事件名=“要执行的少量代码"
    ②、v-on:事件名=“methods中的函数名"
    ③、v-on:事件名=“methods中的函数名(实参)"
  • 注意:事件处理函数在methods中提供

(1)最基本的语法

  • <button v-on:事件名="事件函数">按钮</button>,需要在methods中提供事件处理函数
<button v-on:click="fn">搬砖</button>
<button v-on:click="fn1">卖房</button>

// 提供方法
methods: {
  fn () {
    console.log('你好啊')
    // console.log(this)
    //methods中的所有函数都可以通过this访问到当前组件
    this.money++
  },
  fn1 () {
    this.money += 10000
  },
}
  • 需要传递参数
  • <button v-on:事件名="事件函数(参数)">按钮</button>,需要在methods中提供事件函数,接受参数
<template>
  <div>
    <h1>v-on</h1>
    <p>商品数量:{{ num }}</p>
    <p>
      <!-- add(形参) -->
      <button @click="add(7)">+几件</button>
    </p>
  </div>
</template>

<script>
export default {
  data(){
    return{
      num:10
    }
  },methods:{
    add(a){
      //add(实参)
      this.num+=a;
    }
  }
}
</script>

在这里插入图片描述

  • 简写:v-on 可以 简写 成 @
<button @click="money = money+10">加十</button>
<button @click="addMoney(10000)">卖房</button>

2. Vue中获取事件对象(了解)

  • 需求: 默认a标签点击会跳走, 希望阻止默认的跳转, 阻止默认行为 e.preventDefault()
  • vue中获取事件对象
    (1) 没有传参, 通过形参接收 e
    (2) 传参了, 通过$event指代事件对象 e
<template>
  <div>
    <h1>获取事件对象</h1>
    <button @click="fn">btn</button >
  </div>
</template>

<script>
export default {
  methods:{
    fn(e){
      // 执行函数,没有传任何实参,此时形参:打印的就是事件对象!
       console.log(e)
    }
  }
}
</script>

在这里插入图片描述

  • 在下面的代码中,我们通过点击百度一下按钮,按钮不会进行跳转,因为我们在fn方法里面添加了e.preventDefault();
<template>
  <div>
    <h1>获取事件对象</h1>
    <a @click="fn" href="https://www.baidu.com/">百度一下</a>
  </div>
</template>

<script>
export default {
  methods:{
    fn(e){
      e.preventDefault();
    }
  }
}
</script>
  • 在fn1()方法里面传递的第一个值为形参,然后方法a实参传递进去;我们此时还想要一个对象,那么第二个值就必须写$event,这样我们在fn1()方法获取的才是对象。
<template>
  <div>
    <h1>获取事件对象</h1>
    <!-- 问题:又要传实参,又要拿事件对象?? -->
    <div @click="fn1(10,$event)" href="https://www.baidu.com/">百度一下</div>
  </div>
</template>

<script>
export default {
  methods:{
    fn1(a,b){
      //形参:拿实参!还要拿事件对象!
      //     多个值,形参个数也是多个,a,b
      //     实参:值,事件对象必须是$event
      console.log(a,b);
    }
  }
}
</script>

在这里插入图片描述

3. v-on 事件修饰符

  • 事件修饰符:vue提供事件修饰符,可以快速阻止默认行为或阻止冒泡
  • vue中提供的事件修饰符
    .prevent 阻止默认行为(下面代码阻止页面跳转)
    .stop 阻止冒泡
<template>
  <div>
    <h1>事件修饰符</h1>
    <!-- 事件后面加修饰符 .prevent组织阻止默认行为-->
    <a href="https://www.baidu.com" @click.prevent="fn">百度一下</a>
  </div>
</template>

<script>
export default {
  methods:{
    fn(){
      console.log(1);
    }
  }
}
</script>
  • 冒泡:从目标元素,往根元素一层一层的找,如果在它尽力的父辈元素们也注册了同样的事件类型,那么父辈会按照冒泡的顺序也执行了。
<template>
  <div>
    <h1>事件修饰符</h1>
    <div class="father" @click="fn2">
      <div class="son" @click="fn1"></div>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    fn1(){
      console.log("儿子");
    },
    fn2(){
      console.log("父亲");
    }
  }
}
</script>
<style>
  .father{
    width: 400px;
    height: 400px;
    background-color: rgb(0, 0, 0);
  }
  .son{
    width: 200px;
    height: 200px;
    background-color: #2bff00;
  }
</style>

在这里插入图片描述

  • 那如何阻止上面冒泡事件的发声呢? 直接 .stop 阻止冒泡即可。
<template>
  <div>
    <h1>事件修饰符</h1>
    <div class="father" @click.stop="fn2">
      <div class="son" @click.stop="fn1"></div>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    fn1(){
      console.log("儿子");
    },
    fn2(){
      console.log("父亲");
    }
  }
}
</script>
<style>
  .father{
    width: 400px;
    height: 400px;
    background-color: rgb(0, 0, 0);
  }
  .son{
    width: 200px;
    height: 200px;
    background-color: #2bff00;
  }
</style>

在这里插入图片描述

4. 按键修饰符

  • 需求: 用户输入内容, 回车, 打印输入的内容
  • 在监听键盘事件时,我们经常需要判断详细的按键。此时,可以为键盘相关的事件添加按键修饰符
  • @keyup.enter 回车 — 只要按下回车才能触发这个键盘事件函数
  • @keyup.esc 返回
    在这里插入图片描述
<div id="app">
  <input type="text" @keyup="fn"> <hr>
  <input type="text" @keyup.enter="fn2">
</div>

5. 案例:反转字符串

<template>
  <div>
    <h1>反转世界</h1>
    <h3>{{ msg }}</h3>
    <button @click="fn">反转</button>
  </div>
</template>

<script>
export default {
  // 思路:
  //  1.点击:肯定注册点击事件
  //  2.字反转,点击后控制字!字符串!
  //  3.字符串一定是个初始化数据变量,控制这个变量,用相应的方法!
  data(){
    return{
      msg:"一大堆文字,你要找麻烦??"
    }
  },
  methods:{
    fn(){
      // 数组
      let arr = this.msg.split("");
      // 反转数组
      let res = arr.reverse();
      // 变为字符串
      let str = res.join("");
      // 重新赋值
      this.msg = str;
    }
  }
}
</script>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

树莓派安装 VScode 与卸载 VScode

0. 实验准备 一个带有系统的树莓派&#xff08;有屏幕更好&#xff09; 一台联网的电脑&#xff0c;且可以使用 VNC 登录树莓派&#xff08;与屏幕二选一&#xff09; 一个可以与树莓派交互文件的软件、如&#xff1a;MobaXterm&#xff08;推荐&#xff09;、WinSCP 1. 获取…

AI制作口播视频,原来这么简单

&#x1f4a1;大家好&#xff0c;我是可夫小子&#xff0c;《小白玩转ChatGPT》专栏作者&#xff0c;关注AIGC、读书和自媒体。 在前面的文章中&#xff0c;我们介绍了生成自己专属卡通形象照&#xff0c;这张照片不仅能作头像&#xff0c;还可以让照片说话&#xff0c;作为我们…

【面试题】前端面试 15 问高频题

大厂面试题分享 面试题库 前后端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;前端面试题库 web前端面试题库 VS java后端面试题库大全 数组去重 遍历旧数组&#xff0c;然后拿着旧数组元素去查询新数组&#xff0c;如果该元素…

Redis的主从复制、哨兵机制、集群

一、主从复制 1、定义 主&#xff1a;master以写为主当master数据变化的时候从&#xff1a;slave以读为主自动将新的数据异步同步到其他slave数据库 2、作用 读写分离、容灾恢复、数据备份、水平扩容支撑高并发。 3、使用方式——配从不配主 权限配置&#xff1a;master如…

Mysql数据库基础和增删改查操作(每一次「欢喜」都值得纪念)

文章目录 一、数据库基本概念数据表数据库数据库管理系统(DBMS)数据库系统 二、数据库类型和常用数据库1.关系型数据库2.非关系型数据库 三、数据库的数据类型四、SQL语句1.简介2.分类 五、SQL语句的使用1.数据库操作&#xff08;1&#xff09;创建数据库 2.数据库表操作&#…

云服务器上使用Docker Compose创建Redis三主三从集群

一、环境 云服务器Ubuntu20.4Dokcer 24.0.2 二、步骤 目录结构是这样&#xff1a; 绿色的目录是用来存储容器中的文件&#xff0c;不需要我们手动创建&#xff0c;将路径配置在配置文件中即可。黑色的目录和文件需要自己手动创建。 我们一共创建7个容器&#xff1a; redis…

【实现微信红包效果】前端CSS实现微信红包打开效果(附源码下载)

【写在前面】上次领了一分钱微信红包后就在想如何实现红包打开翻转效果&#xff0c;微信带来最大的一个里程碑就是红包功能的开发&#xff0c;以至于出现这个现象&#xff0c;一块钱掉地上都不一定有人捡&#xff0c;但是微信群里抢到1分钱还得说一声谢谢老板&#xff0c;更有甚…

JQuery全部详细笔记-下

JQuery全部详细笔记-下 jQuery 的 DOM 操作 查找节点, 修改属性 查找属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值 应用实例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UT…

《导航帖》-全系列软考A计划

专栏分享 点击跳转>Unity3D特效百例点击跳转>案例项目实战源码点击跳转>游戏脚本-辅助自动化点击跳转>Android控件全解手册点击跳转>Scratch编程案例点击跳转>软考全系列 文章目录 &#x1f449;关于作者&#x1f449;前提&#x1f449;链接追踪&#x1f449…

【探索 Kubernetes|容器基础进阶篇 系列 4】理解现代云原生时代的引擎

文章目录 系列文章目录&#x1f479; 关于作者一、前言|回顾二、静态和动态视图三、爆火的容器编排工具 Kubernetes 的诞生四、Kubernetes 要解决的问题是什么&#xff1f;五、理解 Kubernetes 全局架构图Master&#xff08;控制节点&#xff09;Node&#xff08;计算节点&…

Unreal Engine 5.1 AI行为树基础入门

ai行为树理解起来其实是npc根据自身一些情况进行一些逻辑执行&#xff0c;而这些逻辑是我们使用ai行为树去实现的。 ai行为树需要一个寻路网格体边界体积&#xff0c;在ue引擎中&#xff0c;体积Actor分为多种&#xff0c;寻路网格体边界体积只是其中的一种。 关于其它的体积&a…

什么是M-LAG?为什么需要M-LAG?

M-LAG&#xff08;Multichassis Link Aggregation Group&#xff09;提供一种跨设备链路聚合的技术。M-LAG通过将两台接入交换机以同一个状态和用户侧设备或服务器进行跨设备的链路聚合&#xff0c;把链路的可靠性从单板级提升到设备级。同时&#xff0c;由于M-LAG设备可以单独…

基于SSM的养老机构信息管理系统设计与实现

摘 要 随着我国老年人逐渐增加&#xff0c;老人们的子女数量减少&#xff0c;工作时间过长无暇照顾父母&#xff0c;导致养老院和护工需求量大幅上涨。伴随我国生活水平提高的同时对老年人的护工人员的要求也越来越高。根据以上要求关于养老院有很多的信息需要进行管理&#…

项目笔记-瑞吉外卖(全)

文章目录 1.业务开发day011.软件开发整体介绍2.项目整体介绍:star:3.开发环境搭建4.登录功能:star:4.1代码实现 5.退出功能6.页面效果出现 day021.完善登录功能2.新增员工功能3.启用禁用员工信息:star:(自定义消息转换器使用)4.编辑员工信息 day031.公共字段自动填充2.新增分类…

创业很长时间以后

创业过很长时间以后…综合能力是有滴 创业和打工后的思维习惯 为了效率&#xff0c;一般情况是这样滴 趣讲大白话&#xff1a;区别还是有滴 【趣讲信息科技195期】 **************************** 创业还是很难滴 每年成立很多新公司 有很多公司关门 公司平均生存时间&#xff1…

【哈佛积极心理学笔记】第6讲 乐观主义

第6讲 乐观主义 How can we create consciously and subconsciously a positive environment, where we actually can take out the most moral, the most successful self to appreciate that self. Create a powerful positive situation to bring out the best in people.…

基于Github开源项目Next Chat4 —— 之原生Js前端特效给你的眼睛来一场视觉盛宴吧

前期回顾 打造极简风格动效 —— 5 分钟轻松实现惊艳、震撼人心的视觉效果_彩色之外的博客-CSDN博客css Loading 实战教学https://blog.csdn.net/m0_57904695/article/details/131156011?spm1001.2014.3001.5501 &#x1f44d; 本文专栏&#xff1a;开发技巧 一键使用 GP…

OpenCV中的图像处理3.11(10) OpenCV中的图像变换

目录 3.11 OpenCV中的图像变换3.11.1 傅里叶变换目标理论Numpy中的傅里叶变换OpenCV中的傅立叶变换DFT的性能优化为什么Laplacian是一个高通滤波器&#xff1f;其他资源 翻译及二次校对&#xff1a;cvtutorials.com 编辑者&#xff1a;廿瓶鲸&#xff08;和鲸社区Siby团队成员&…

Linux中的用户和组的分类

目录 Linux中的用户和组的分类 用户分类 超级用户 系统用户 普通用户 组的分类 基本组&#xff08;私有组&#xff09; 附加组&#xff08;公有组&#xff09; 系统组 Linux中用户和用户组的配置文件 在Linux中&#xff0c;用户账号、密码、用户组信息和用户组密码均…

KEGG注释:KEGG富集可视化柱状图

很久很久以前&#xff0c;看到过文章中的KEGG富集可视化结果图。是对KEGG通路进行注释的。后来在一些测序公司的宣传页上也见到过类似的图&#xff1a; image.png image.png 其实这个图就是多了一个KEGG通路注释&#xff0c;近期也有小伙伴寻求怎么做。网上很多在线工具可以完…