Vue方法与事件

最新推荐文章于 2024-04-24 09:32:44 发布
最新推荐文章于 2024-04-24 09:32:44 发布
阅读量496 收藏
点赞数 1
分类专栏： Vue/Angular/React/Ember/Roit 文章标签： Vue 方法 事件

原文地址：http://www.cnblogs.com/lily1010/p/5842285.html

一 vue方法实现

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue方法与事件</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="test">
            <button @click="sayHi">点击我</button> <!--这里使用@-->
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: '#test',
                methods: {      //这里使用methods
                    sayHi: function () {
                        alert('我被点击了')
                    }
                }
            })
        </script>
    </body>
</html>
复制代码

 

二 方法传参

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue方法与事件</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="test">
            <button @click="sayHi('你好')">说你好</button> <!--这里使用@-->
            <button @click="sayHi('我被点击了')">说我被点击了</button> <!--这里使用@-->
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: '#test',
                methods: {      //这里使用methods
                    sayHi: function (message) {
                        alert(message)
                    }
                }
            })
        </script>
    </body>
</html>
复制代码

 

三 vue访问原生 DOM 事件

注意用$event获取

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue方法与事件</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="test">
            <button @click="changeColor('你好',$event)">点击我</button> <!--这里使用@-->
            <div style="height: 100px;width: 100px;background-color: red;" @mouseover="over('鼠标从我上面滑过',$event)">
                鼠标从我上面滑过试试
            </div>
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: '#test',
                methods: {      //这里使用methods
                    changeColor: function (message, event) {
                        alert(message+event);    //弹出我被点击了,事件是[object MouseEvent]
                    },
                    over :function (message, event) {
                        alert(message+event);   //弹出鼠标从我上面滑过,事件是[object MouseEvent]
                    }
                }
            })
        </script>
    </body>
</html>
复制代码

 

四 事件修饰符

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue方法与事件</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="test">
            <button @click.stop="sayHi('你好')">说你好</button> <!-- 阻止单击事件冒泡 -->
            <button @click.prevent="sayHi('你好')">说你好</button> <!-- 提交事件不再重载页面 -->
            <button @click.stop.prevent="sayHi('你好')">说你好</button> <!-- 阻止单击事件冒泡和提交事件不再重载页面 -->
            <button @click.capture="sayHi('你好')">说你好</button>  <!-- 添加事件侦听器时使用 capture 模式 -->
            <button @click.self="sayHi('你好')">说你好</button>    <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
            
            <div @keyup.13="sayHi('你好')">说你好</div>  <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: '#test',
                methods: {      //这里使用methods
                    sayHi: function (message) {
                        alert(message)
                    }
                }
            })
        </script>
    </body>
</html>
复制代码
坦GA
关注
专栏目录
Vue方法与事件处理器详解
09-01
1. **Vue方法**：Vue实例的方法是定义在`methods`选项中的函数，可以在模板中通过`v-on`指令调用。例如，在提供的代码中，`successT`和`addproject`是两个定义在`methods`对象下的方法。`successT`接受一个参数`...
详解Vue方法与事件
12-04
一 vue方法实现 ...Vue方法与事件</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> [removed][removed]
Vue中的事件
qq_45954420的博客
03-06 3742
使用v-on:xxx 或 @xxx绑定事件 其中xxx是事件名
vue事件
小蚂蚁的世界
11-11 1011
之前学习到v-on指令绑定，引入了事件绑定。所以这一章学习事件相关知识。先把之前的一个例子贴出来： &lt;template&gt;   &lt;div&gt;     &lt;input type="text" v-bind:value="number"&gt;     &lt;button @click="addFunction"&gt;number + 1&lt;/b
[Vue]事件
emmmm.....
09-27 755
1. 事件处理 1.1 事件绑定指令 1.2 元素事件绑定代码示例 1.3 事件处理函数的参数 1.4 事件处理函数的this 1.5 事件处理函数存放位置 2. 事件修饰符 3. 键盘事件
Vue:Vue事件整理
qjyws的博客
06-19 9532
Vue事件内容整理
详解Vue 方法与事件处理器
12-29
方法与事件处理器 方法处理器 可以用 v-on 指令监听 DOM 事件： <button v-on:click=greet>Greet</button> 我们绑定了一个单击事件处理器到一个方法 greet。下面在 Vue 实例中定义这个方法： var ...
Vue之事件相关
玉案轩窗的博客
01-26 908
前言 本篇文章带来Vue.js的事件机制，具体的分析点如下： $emit、$on、$off、$once背后的处理逻辑 @click形式背后的处理逻辑 具体逻辑梳理 实际上在 Vue初始化 这篇文章中就提及了事件相关实例方法的创建，这里就在具体说下。 在Vue.js文件加载执行，其中会执行eventsMixin函数，该函数的作用就是： 创建事件相关的的原型方法，即$on、$once、$off、...
Vue 中常用的事件总结（ 事件的概念 +事件要素+事件修饰符）
Love_malichao的博客
05-05 8412
例如：methods：{//处理Click事件的逻辑。
Vue 事件处理
学习笔记
12-06 293
事件处理 事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。 .stop .pre...
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)” 效果一致，但后者可以传参；代码直接上代码这个在有些场景中可能不适用 那么我们该如何只让
5. Vue 事件绑定
heaven_dad的博客
07-29 151
5. Vue 事件绑定 ​ 代码演示1 @click单击事件 <body> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <div id="app"> <!-- 通过按钮实现事件的绑定 --> <button v-on:click="search()">查询结果<
vue事件处理
zqh862735956的博客
03-08 603
事件处理 监听事件 监听事件就是直接把事件代码写在v-on:里 &lt;button v-on:click="count += 1"&gt;add 1&lt;/button&gt; 事件处理方法 就是把事件放入的methods: {}中调用 内联处理剂中的方法 就是传了参数的method: {} &lt;button :on:click=say('hi')"...
Vue介绍以及事件
HushPlot的博客
10-31 683
vue
【Vue】常见的事件梳理
最新发布
qq_51933234的博客
04-24 1307
个人觉得这篇的内容还是很重要的，这些事件是平时常用的，我们在写项目中也会经常使用。熟悉这些事件，对我们理解Vue有很多好处的。
vue事件处理器
AmberWu
05-17 592
事件处理器监听事件可以用 v-on 指令监听 DOM 事件来触发一些事件。 po上之前的计数器的小呆毛！ html: <div id="example"> <button v-on:click='minus()' class='minus'>-</button> <input v-model="message" class="inputnum" onkeyup="this.va
Vue实践--指令和事件
codesWay的博客
11-26 1327
Vue思想是数据驱动DOM，所以你只需要把主要精力放在数据和逻辑上即可，DOM的事情交给Vue就行了； 指令的作用是当表达式的值发生变化的时候，将某些行为应用到DOM上： Vuejs中的一些指令： 1.v-bind：动态更新DOM元素的属性（通常用来绑定DOM属性），例如： {{greeting|toUpperCase|strClip(3)}}//给该元素绑定href属性，属性的值是对
【Vue 快速入门系列】Vue中的事件用法
一个非常Cool的人
10-10 1783
在说Vue中如何定义事件，如何触发事件、如何阻止事件冒泡之前先回顾一下什么是事件，事件的基本定义是什么？事件的三要素有哪些？事件触发后的三个阶段是什么？以及介绍一下Vue中的函数用法。最后介绍Vue中如何定义事件以及触发事件。总的来说本篇博客会介绍到vue中的函数使用、事件绑定、事件绑定添加修饰符、键盘事件。结合实例达到学练结合的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值