vue 事件触发

最新推荐文章于 2024-04-29 21:35:15 发布
最新推荐文章于 2024-04-29 21:35:15 发布
阅读量1.5k 收藏 5
点赞数 12
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61479892/article/details/121799237
版权

一、遮罩 隐藏

 点击隐藏后

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style></style>
</head>
<body>
  <div id="app">
    <!-- css 隐藏元素：通过 display: none; -->
    <p style="display: none;">这是一段消息</p>
    <!-- show：显示，出现 -->
    <p v-show="true">这是一段true消息</p>
    <p v-show="false">这是一段false消息</p>

    <p v-show="show">这是一段消息</p>
    <button @click="doShow">显示</button>
    <button @click="doHide">隐藏</button>
  </div>
  <script src="../vendor/vue.js"></script>
  <script>
    new Vue({
      el:"#app",
      data:{
        show:true
      },
      methods:{
        doShow(){this.show=true},
        doHide(){this.show=false},
      },
    })
  </script>
</body>
</html>

二、pre

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- pre: 原样输出, 忽略 vue 关键词 -->
    <div id="app">
      <p v-pre>使用{{name}}可以输出vue中的name变量</p>
      <div>
        <!-- v-pre 专门针对 {{}} 语法, 让标签中的此语法不解析 -->
        <span v-pre>{{name}}</span>
        <span v-text="{{name}}"></span>
        <span>的值是{{name}}</span>
      </div>
    </div>
    <script src="./vendor/vue.js"></script>
    <script>
一一次性渲染
双双向向数数据据绑绑定定
      new Vue({
        el: "#app",
        data: { name: "Lucy" },
     })
    </script>
  </body>
</html>

三、一次性渲染

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 一次性: 值的变化只更新一次 DOM, 后续不会修改 -->
    <div id="app">
      <h3 v-once>页面显示时间: {{time}}</h3>
      <h3>当前系统时间: {{time}}</h3>
    </div>
    <script src="./vendor/vue.js"></script>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          time: new Date().toLocaleString(),
       },
     })
      console.log(vm)
      // 定时器更新时间
      setInterval(() => {
        vm.time = new Date().toLocaleString()
     }, 1000)
    </script>
  </body>
</html>

 四、双向数据绑定

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!--
输输入入框框内内容容实实时时监监听听
      双向数据绑定:
      1. 方向1 - 数据绑定到DOM元素上
      2. 方向2 - 表单元素:输入框, 单选框, 多选框, 下拉框... 用户可以操作 来修改其值 -- 把用户操作的值
更新给数据
         简单说: DOM变化 更新绑定的数据
    -->
    <div id="app">
      <!-- form表单元素: 特色是 与用户可以交互 -->
      <!-- 用v-model 替代 value 属性 -->
      <!-- v-model: 数据绑定值的同时, DOM变化也会修改变量 -->
      <input type="text" v-model="uname" />
      <div>{{uname}}</div>
      <hr />
      <!-- 用途: 获取输入框的值 -->
      <input type="password" v-model="upwd" />
      <button @click="doLogin">登录</button>
    </div>
    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: { uname: "liang", upwd: "" },
        methods: {
          doLogin() {
            // 由于双向绑定的存在, 变量的值 一定和DOM元素的值相同
            console.log("用户名:", this.uname)
            console.log("密码:", this.upwd)
         },
       },
     })
    </script>
    <!-- v-model: 用来快速获取 form 表单元素的值, 因为双向绑定可以确保 DOM元素 的值和 变量的值 一定相
同! -->
  </body>
</html>

 五、输入框内容实时监听

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-        双向数据绑定:
        1. 数据 显示到 DOM 元素中
        2. 用户修改DOM元素的值 实时更新到 绑定的数据项
       -->
      <!-- @input: 输入框内容变化时 触发 -->
      <input type="text" v-model="word" @input="wordChanged" />
      <p>{{word}}</p>
    </div>
键键盘盘事事件件监监听听
    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: { word: "111" },
        methods: {
          wordChanged() {
            console.log(this.word)
         },
       },
     })
    </script>
  </body>
</html>

 六、键盘事件监听

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="word" @keyup="doEnter" />
      <hr />
      <!-- 作者知道 用户通常需要过滤 keyCode, 所以提供了简化写法
      @keyup.13: 会自动过滤出 keyCode=13的 事件
      -->
      <input type="text" v-model="word" @keyup.13="doEnter1" />
      <p>{{word}}</p>
    </div>
    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: { word: "111" },
        methods: {
          doEnter1() {
            console.log("回车触发:", this.word)
         },
          doEnter(e) {
            if (e.keyCode == 13) {
              // console.log(e)
              console.log("回车触发:", this.word)
           }
         },
       },
     })
    </script>
  </body>
</html>

七、watch监听器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>
        <span>{{count}}</span>
        <button @click="changeCount(+1)">+1</button>
        <button @click="changeCount(-1)">-1</button>
        <br />
        <input type="text" v-model="count" />
      </div>
    </div>
    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: { count: 5 },
        methods: {
          changeCount(delta) {
            // 字符串转数字: parseInt(字符串) Number(字符串)
            // 取巧: *1   隐式转换: 乘法的结果必定是数字
            this.count = this.count * 1 + delta
         },
       },
        // watch: 监听器. 监听data中属性的变化
        watch: {
          // 要监听的属性名: 变化时触发的事件
          // count: function () {
          //   console.log("侦测到 count 发生变更:", this.count)
          // },
          // 简化: 去掉 function 关键词
          count() {
            console.log("侦测到 count 发生变更:", this.count)
         },
       },
     })
    </script>
  </body>
</html>

 八、单选框

 <body>
    <div id="app">
      <span>性别:</span>
      <!-- label: 此标签会接受点击事件, 传递给内部的 单选框 -->
      <!-- name相同的单选框, 会被识别为一组 -->
      <label
        ><input type="radio" value="1" name="sex" v-model="sex" /> 男</label
      >
      <label
        ><input type="radio" value="0" name="sex" v-model="sex" /> 女</label
      >
      <br />
      <h3>您选择的性别是: {{sex}}</h3>
    </div>
    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: { sex: 0 },
     })
    </script>
  </body>

九、下拉选框

根据城市的不同变更图片

!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <span>请选择城市:</span>
      <select v-model="target">
        <option value="./img/1.jpg">上海</option>
        <option value="./img/2.jpg">北京</option>
        <option value="./img/3.jpg">深圳</option>
      </select>
      <div>选择的图片:{{target}}</div>
      <img :src="target" alt="" />
    </div>
    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        // 默认值:
        data: { target: "./img/1.jpg" },
     })
    </script>
  </body>
</html>

十、多选框

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <span>选择你喜欢的队伍:</span>
      <label>
        <input type="checkbox" value="FPX" v-model="teams" />
        <span>FPX</span>
      </label>
      <label>
        <input type="checkbox" value="EDG" v-model="teams" />
        <span>EDG</span>
      </label>
      <label>
        <input type="checkbox" value="RNG" v-model="teams" />
        <span>RNG</span>
      </label>
      <p>喜欢的队伍有: {{teams}}</p>
    </div>
    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        // 多选操作: 需要数组来存放选项
        data: { teams: [] },
     })
    </script>
  </body>
</html>

十一、多选框单独使用

点击选项框  按钮才可用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <label>
双双向向绑绑定定练练习习
        <input type="checkbox" v-model="agree" />
        <span>同意软件的用户协议</span>
      </label>
      <br />
      <p>{{agree?'同意':"不同意"}}</p>
      <button :disabled="!agree">注册</button>
    </div>
    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        // agree: 同意 - 输入框单独使用, 应该绑定boolean值
        data: { agree: false },
     })
    </script>
  </body>
</html>

那位姓邹的先森
关注
  • 12
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue触发input选取文件点击事件操作
10-14
主要介绍了Vue触发input选取文件点击事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue.js笔记------事件
weixin_69270668的博客
10-23 4165
页面触发一个事件时,会按照一定的顺序来响应事件,事件的响应过程为事件流。事件冒泡阶段(bubbling phrase):事件由具体的元素先接收,然后逐级向上传播,直到不具体的元素;因此在事件捕获的概念下在button按钮发生click事件的顺序应该是document→html→bodv→div→button。事件冒泡和事件捕获分别由微软和网景公司提出,是为了解决页面中事件流(事件发生顺序)的问题。与事件冒泡相反,事件会从最外层开始发生,直到具体的元素。鼠标事件:使用鼠标在页面上执行某些操作时触发的事件。
vue鼠标事件归纳
qq_46100747的博客
09-19 1693
【代码】vue鼠标事件归纳。
推荐项目：Vue-Touch - 轻松集成触摸事件到你的Vue应用中
gitblog_00066的博客
03-30 453
推荐项目：Vue-Touch - 轻松集成触摸事件到你的Vue应用中 项目地址:https://gitcode.com/904790204/vue-touch 项目简介 Vue-Touch 是一个为Vue.js框架设计的轻量级库，它使你在Web应用中处理触摸事件变得简单而直观。该项目的目标是帮助开发者在移动设备上实现类似与桌面端的交互体验，无需深陷于复杂的原生触摸API。 技术分析 Vue-Tou...
Vue案例
qq_47433906的博客
01-18 3507
vue购物车案例
vue2知识点：事件处理
刘大猫
05-20 1840
文章目录一、事件的基本使用二、$event 对象三、事件的修饰符1）prevent2）阻止事件冒泡3）once4）capture5）self6）passive四、键盘事件(键值修饰符) 一、事件的基本使用 注意点1：定义事件函数时，普通函数this指代vue对象，而箭头函数中this指代Window对象。 注意点2：定义事件没参数小括号()可省略，但是用在插值表达式使用一个函数返回值就必须带小括号()，比如 全名：{{fullName()}}。 注意点3：不被vue所管理的函数那么请使用箭头函数。 代.
vue快速入门(四) 之 v-on:事件绑定 以及 @keyup事件触发
weixin_44415928的博客
03-16 6458
在JavaScript中有点击,鼠标移动等事件,vue中自然也有对应的方法,如下 这一次我们使用了method而不是data,在method里边定义各种方法,比如这个弹出警告的方法,在div里边呢,我们使用v-on 后边接动作类型,比如点击,鼠标移动等,后边就是触发的方法名 点击弹出警告就会弹出 代码如下 <body> <div id="app"> ...
Vue 中常用的事件总结（ 事件的概念 +事件要素+事件修饰符）
Love_malichao的博客
05-05 6332
例如：methods：{//处理Click事件的逻辑。
Vue学习笔记1(基础知识点和触发事件)
qq_55695208的博客
06-18 787
一套用于构建用户界面的渐进式JavaScript框架。Vue可以自底向上逐层的应用，简单应用：只需一个轻量小巧的核心库。1.英文官网：Vue.js - The Progressive JavaScript Framework | Vue.js2.中文官网：Vue.js注意： 中文网址访问不上时，可以试着访问一下英文网址。vue的md文档:在线版 https://wekenw.gitee.io/vuedoc/Vue开发者工具：https://pan.baidu.com/s/1UvK1QtFjfrFKqqzYB
(vue)进入页面自动触发点击事件
nyf_unknow的博客
10-30 2169
思路：使用 ref 属性将 div 标签绑定到了 Vue 实例中的 clickMe 变量上。在 mounted 钩子函数中，通过 this.$refs.clickMe.click() 代码模拟了点击事件，从而触发了 onSubmit 方法。背景：进入页面后需根据表单默认值查询出数据。1.alert弹出说明已进入点击事件中。
vue 回车触发事件
cjj123580的博客
06-28 2672
登录页面,输入完成后 回车触发事件。步骤一: input里绑定回车事件。
mui vue java_使用mui+vue框架做原生app的坑(一)
weixin_34505281的博客
03-02 688
一、app连接不到后台：1.ajax部分写的url路径错误2.访问被拦截。3.访问的ip和端口是否正确，这里是个统一配置的js。将一些默认配置写在里面，减少重复代码而已。二、 app用的是缓存，全局通用，不是session。//设置缓存信息plus.storage.setItem("user",userInfo);//读取本地存储，检查是否为首次启动var showGuide = plus.st...
基于vue 兄弟组件之间事件触发(详解)
09-09
下面小编就为大家分享一篇基于vue 兄弟组件之间事件触发(详解)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue父组件点击触发子组件事件的实例讲解
12-29
最近在学习Vue父子组件通信的问题，刚好遇到一个父子之间事件事件派发与接收，在这里记录一下，在这里我使用的是ref 给子组件注册引用信息。官网是这样解释的 ref 被用来给元素或子组件注册引用信息。引用信息将会...
Vue 事件处理操作实例详解
10-17
主要介绍了Vue 事件处理操作,结合实例形式较为详细的分析了vue.js事件处理相关的事件监听、处理、修饰符等相关概念、用法及操作注意事项,需要的朋友可以参考下
element-ui的bug记录
最新发布
nick_zhang的博客
04-29 327
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
党务学习|基于SprinBoot+vue的大学生党务学习平台(源码+数据库+文档)
伟庭的博客
04-27 765
大学生党务学习平台管理系统按照操作主体分为管理员和用户。用户的功能等。该系统采用了Mysql数据库，Java语言，Spring Boot框架等技术进行编程实现。大学生党务学习平台管理系统可以提高大学生党务学习平台信息管理问题的解决效率，优化大学生党务学习平台信息处理流程，保证大学生党务学习平台信息数据的安全，它是一个非常可靠，非常安全的应用程序。大学生党务学习平台管理系统；入党申请,党课Mysql数据库；Java语言。
vue3循环设置ref并获取的解决方案
hyx_1225的博客
04-27 263
我们在平时做业务的时候,父子组件通信会经常用到ref,这篇文章主要给大家介绍了关于vue3循环设置ref并获取的解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下。倘若有许多个ref，一个个去定义未免过于繁琐，还有就是若是dom是使用v-for循环出来的，那么ref也就不确定了，无法提前定义。vue可通过ref来获取当前dom，但是vue3有个问题，就是必须定义ref的变量名，才能使用。可以操作上面定义的变量或方法。这是使用v-for循环出来的dom，ref通过index下标来命名。
vue 快速入门 系列 —— 玩转 CMS
ZL4120505的博客
04-29 742
例如 src/layouts/BasicLayout.less，里面包含一些基本布局的样式，被 src/layouts/BasicLayout.vue 引用，项目中使用这种布局的页面就不需要再关心整体布局的设置。好比中医发展了好几千年，许多本源的东西老中医也是不清楚的，但我们摸索出一套规则，按照这个能治病，这个就很好。.clearfix() 混合器定义了清除浮动的样式。组件相关的样式，有一些在页面中重复使用的片段或相对独立的功能，你可以提炼成组件，相关的样式也应该提炼出来放在组件中，而不是混淆在页面里。
vue事件触发父子传参
05-18
// $emit方法触发事件，并传递参数 this.$emit('child-event', 'hello world') } } ``` 2. 在父组件中监听子组件触发的事件，并定义对应的处理函数。此时，可以通过 `$event` 参数获取子组件传递过来的参数。 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值