vue常用事件绑定

最新推荐文章于 2023-06-27 15:49:52 发布
最新推荐文章于 2023-06-27 15:49:52 发布
阅读量962 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fiona_0427/article/details/107049382
版权

v-on

  • 用来绑定事件的
  • 形式如：v-on:click 缩写为 @click;

v-on事件函数中传入参数

<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <!-- 1、如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
            <button v-on:click='handle1'>点击1</button>
            <!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，
                 并且事件对象的名称必须是$event 
            -->
            <button v-on:click='handle2(123, 456, $event)'>点击2</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle1: function(event) {
                    console.log(event.target.innerHTML)
                },
                handle2: function(p, p1, event) {
                    console.log(p, p1)
                    console.log(event.target.innerHTML)
                    this.num++;
                }
            }
        });
    </script>

事件修饰符

  • 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
  • Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符
  • 修饰符是由点开头的指令后缀来表示的
    <!-- 阻止单击事件继续传播 -->
    <a v-on:click.stop="doThis"></a>
    
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    
    <!-- 修饰符可以串联   即阻止冒泡也阻止默认事件 -->
    <a v-on:click.stop.prevent="doThat"></a>
    
    <!-- 只当在 event.target 是当前元素自身时触发处理函数----会传递给其他元素 -->
    <!-- 即事件不是从内部元素触发的 -->
    <div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

按键修饰符

  • 在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
    <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
    <input v-on:keyup.13="submit">
    
    <!-- -当点击enter 时调用 `vm.submit()` -->
    <input v-on:keyup.enter="submit">
    
    <!--当点击enter或者space时  时调用 `vm.alertMe()`   -->
    <input type="text" v-on:keyup.enter.space="alertMe" >
    
    常用的按键修饰符
    .enter =>    enter键
    .tab => tab键
    .delete (捕获“删除”和“退格”按键) =>  删除键
    .esc => 取消键
    .space =>  空格键
    .up =>  上
    .down =>  下
    .left =>  左
    .right =>  右
    
    <script>
    	var vm = new Vue({
            el:"#app",
            methods: {
                  submit:function(){},
                  alertMe:function(){},
            }
        })
    
    </script>

自定义按键修饰符别名

  • 在Vue中可以通过config.keyCodes自定义按键修饰符别名
    <div id="app">
        预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法
        <input type="text" v-on:keydown.f5="prompt()">
    </div>
    
    <script>
    	
        Vue.config.keyCodes.f5 = 116;
    
        let app = new Vue({
            el: '#app',
            methods: {
                prompt: function() {
                    alert('我是 F5！');
                }
            }
        });
    </script>

v-bind

  • v-bind 指令被用来响应地更新 HTML 属性
  • v-bind:href 可以缩写为 :href;
    <!-- 绑定一个属性 -->
    <img v-bind:src="imageSrc">
    
    <!-- 缩写 -->
    <img :src="imageSrc">

v-bind绑定对象

  • 我们可以给v-bind:class 一个对象，以动态地切换class。

  • 注意：v-bind:class指令可以与普通的class特性共存

    1、 v-bind 中支持绑定一个对象
    如果绑定的是一个对象 则 键为 对应的类名 值 为对应data中的数据

  <!-- 
    	HTML最终渲染为 <ul class="box textColor textSize"></ul>
    	注意：
    		textColor，textSize  对应的渲染到页面上的CSS类名	
    		isColor，isSize  对应vue data中的数据  如果为true 则对应的类名 渲染到页面上 
    
    
    		当 isColor 和 isSize 变化时，class列表将相应的更新，
    		例如，将isSize改成false，
    		class列表将变为 <ul class="box textColor"></ul>
    -->
    
    <ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
        <li>学习Vue</li>
        <li>学习Node</li>
        <li>学习React</li>
    </ul>
      <div v-bind:style="{color:activeColor,fontSize:activeSize}">对象语法</div>
    
    <sript>
    var vm= new Vue({
        el:'.box',
        data:{
            isColor:true,
            isSize:true，
        	activeColor:"red",
            activeSize:"25px",
        }
    })
    </sript>
    <style>
    
        .box{
            border:1px dashed #f0f;
        }
        .textColor{
            color:#f00;
            background-color:#eef;
        }
        .textSize{
            font-size:30px;
            font-weight:bold;
        }
    </style>

v-bind绑定class

2、 v-bind 中支持绑定一个数组 数组中classA和 classB 对应为data中的数据

    
    
    这里的classA  对用data 中的  classA
    这里的classB  对用data 中的  classB
    <ul class="box" :class="[classA, classB]">
        <li>学习Vue</li>
        <li>学习Node</li>
        <li>学习React</li>
    </ul>
    <script>
    var vm= new Vue({
        el:'.box',
        data:{
            classA:‘textColor‘,
            classB:‘textSize‘
        }
    })
    </script>
    <style>
        .box{
            border:1px dashed #f0f;
        }
        .textColor{
            color:#f00;
            background-color:#eef;
        }
        .textSize{
            font-size:30px;
            font-weight:bold;
        }
    </style>

绑定对象和绑定数组 的区别

- 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据 
- 绑定数组的时候数组里面存的是data 中的数据

样式绑定相关语法细节：
1、对象绑定和数组绑定可以结合使用
2、class绑定的值可以简化操作
3、默认的class如何处理？默认的class会保留

v-bind绑定style

   <div v-bind:style="styleObject">绑定样式对象</div>'
     
    <!-- CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来)    -->
     <div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">内联样式</div>
    
    <!--组语法可以将多个样式对象应用到同一个元素 -->
    <div v-bind:style="[styleObj1, styleObj2]"></div>
    
    
    <script>
    	new Vue({
          el: '#app',
          data: {
            styleObject: {
              color: 'green',
              fontSize: '30px',
              background:'red'
            },
            activeColor: 'green',
       		fontSize: "30px"
          },
          styleObj1: {
                 color: 'red'
           },
           styleObj2: {
                fontSize: '30px'
           }
    
    </script>
fiona_0427
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue动态绑定class的几种常用方式小结
10-16
主要介绍了vue动态绑定class的几种常用方式,结合实例形式总结分析了vue.js常见的对象方法、数组方法进行class动态绑定相关操作技巧,需要的朋友可以参考下
Vue基础--Vue中的事件绑定指令详解
qq_44749491的博客
09-24 5938
详解Vue中的事件绑定
vue中的事件绑定
最新发布
ead_gbe的博客
06-27 4865
按钮1</button><button class="btn" v-on:click = "showInfo2(66)">按钮2
Vue事件绑定
过客如期的博客
05-26 7281
一，原生事件绑定 1.在原生js中，我们有三种方式为一个属性绑定事件，分别为： 在HTML标签上添加事件属性 在js中使用html节点的事件属性绑定事件处理程序，例如node.onclick=function(){} 在js中使用addEventListener("click",function(){},false) 想了解更多，可参考js原生事件绑定 二，Vue事件绑定 v-on: 1.在vue.........
Vue中的方法和事件绑定
m0_59345890的博客
08-30 1152
self 其他元素的事件触发时 事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,只有它自己是精准对象才会触发事件, 虽然它自己不会被别人影响,但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素。3、ES6的箭头函数中的this就不是vm，因为箭头函数中的this跟谁调用无关，指向上一个不是箭头函数的函数的this==>因此推荐事件的函数采用ES6的对象的方法写方法 这种写法不推荐。我们也可以打印一下事件对象，看一下它的事件链，在绑定事件的方法传入$event,...
Vue超详细知识讲解
Zeus
08-20 1万+
️1⃣️、Vue和其他两大框架的区别 Angular 学习成本太高 React 代码可读性差 Vue 学习成本较低 很容易上手 传送门 https://cn.vuejs.org/v2/guide/comparison.html ️2⃣️、Vue是什么 Vue是一套用于构建用户界面的渐进式框架 “前端框架” 让程序员脱离自己操作DOM 专注于写逻辑和操作数据 Vue的核心库只关注视图层 易...
Vue 中常用的事件总结（ 事件的概念 +事件要素+事件修饰符）
Love_malichao的博客
05-05 6334
例如：methods：{//处理Click事件的逻辑。
vant移动端tab标签如何找到对应的标签绑定事件
seeeeeeeeeee的博客
08-18 2432
比如结构是这样的。 <van-tabs v-model="active" @click="onClick"> <van-tab title="标签 1">内容 1</van-tab> <van-tab title="标签 2">内容 2</van-tab> <van-tab title="标签 3">内容 3</van-tab> <van-tab title="标签 4">内容 4</van
VUE常用方法整理.pdf
03-28
第四节 阐述vue单双向数据流及事件绑定 6 1. vue单向数据流绑定属性值 v-bind: (属性) 简写 :(属性) 6 2. vue双向数据流 v-model 只作用于有value属性的元素 7 3. 事件绑定v-on:事件名="表达式||函数名" 简写 @事件...
Vue常用指令详解分析
12-11
v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model） v-for 格式： v-for=”字段名 in(of) 数组json” 循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index v-
vue常用指令代码实例总结
09-17
主要介绍了vue常用指令代码实例,需要的朋友可以参考下
vue--事件--事件绑定,事件修饰符,
cmy741741的博客
11-18 520
事件绑定 可以用 v-on 指令监听DOM 事件，并在触发时运行一些 JavaScript 代码。v-on 还可以接收一个需要调用的方法名称。 <button v-on:click="greet">Greet</button> methods: { greet: function (event) { if (event) { alert(event.target.tagName) } // `event` 是原生 DOM 事件 ...
Vue:Vue事件整理
qjyws的博客
06-19 9349
Vue事件内容整理
vue——事件绑定
热门推荐
weixin_54362381的博客
08-22 1万+
Vue中的事件处理方法： 一、事件绑定基础语法有两种写法： 1、直接写函数名,@click="handleClick"; 2、加$event,@click="handleClicks($event,参数)"参数可选, $event是内置事件对象 ; 好处:不但可以传事件对象,还可以传其他的参数 <div id="app"> <!-- 第一种写法 --> <button @click="handleClick">Button</button> &lt
【Vue】Vue数据及事件绑定
南栀的博客
02-13 1324
文章目录1. 数据绑定1.1 单向绑定1.1.1 插值绑定1.1.2 v-bind绑定1.2 双向绑定2. 事件绑定与监听2.1 方法及内联处理器2.2 修饰符事件修饰符键值修饰符 1. 数据绑定 1.1 单向绑定 把Model绑定到View后，当用JavaScript代码更新Model时，View会自动更新。因此，我们不需要进行额外的DOM操作，只需要进行Model操作就可以实现视图的联动更新。 单向绑定的实现过程是： 所有数据只保存一份 一旦数据变化，就去更新页面(只有data–>DOM，没有D
vue 的常用事件
个人学习使用
06-25 1万+
1.使用 v-on:xxx 或 @xxx 绑定事件，其中 xxx 是事件名； 2.事件的回调需要配置在 methods 对象中，最终会在 vm 上； 3.methods 中配置的函数，不要用箭头函数！否则 this 就不是 vm 了； 4.methods 中配置的函数，都是被 Vue 所管理的函数，this 的指向是 vm 或 组件实例对象； 5.@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；代码直接上代码这个在有些场景中可能不适用 那么我们该如何只让
Vue事件绑定（非常详细哦~）
weixin_46370867的博客
01-19 3261
下面是对Vue中事件绑定的整理，希望可以帮助到有需要的小伙伴~ 事件绑定 vue如何处理事件 v-on指令用法 <input type= ‘button”v-on:click="num++'/> v-on简写形式 <input type= ‘button'@click='num++/> 事件函数的调用方式 直接绑定函数名称 <button v-on :click（事件类型）='say（方法名）'>Hello</button>
事件绑定的几种常见方式
aolaoning2593的博客
12-23 229
在项目开发中，经常遇到绑定事件不起作用，或者事件绑定多次，导致重复触发。为了应对所遇到的问题，上网查阅了一些资料，对事件绑定做了一些系统研究。##1.事件绑定的几种常见方式（以click事件为例） 　　$(selector).click(function(){...}) 　　$(selector).bind("click",function(){...}) ...
Vue中事件绑定
qq_38368356的博客
11-15 1642
1.鼠标划过操作hover 2.添加一个鼠标点击事件v-on:click="aaa(0)" 可以写成@click="aaa(0)" &lt;div&gt;{{activeindex}}&lt;/div&gt; activeIndex=null 设置初始值为空 3.给aaa添加一个方法 method:{ aaa(index)={this.activeindex=index}; ...
总结vue2的常用事件绑定的作用以及使用方法
03-23
Vue2 的常用事件绑定包括 @click、@...使用方法是在需要绑定事件的元素上使用 v-on 或 @ 符号，然后加上事件名和对应的处理函数即可。例如，@click="handleClick" 表示在点击该元素时调用名为 handleClick 的方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值