Vue方法与事件

最新推荐文章于 2024-11-13 17:27:29 发布
最新推荐文章于 2024-11-13 17:27:29 发布
阅读量70 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/lily1010/p/5842285.html
版权
gitHub地址:https://github.com/manlili/vue_learn里面lesson10

 

一 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>

 

转载于:https://www.cnblogs.com/lily1010/p/5842285.html

weixin_30892987
关注
Vue 方法与事件
Kofe_Chen的博客
11-29 245
<div id='app'> // 方法没有参数可以省略括号 <div v-on:click="handle"></div> // 有参数要加括号 <div v-on:click="handle()"></div> // 或者传入参数 <div @click="handle(8)"></div&...
Vue入门-事件处理
压缩疯雷的博客
10-19 293
事件处理监听事件事件处理方法内联处理器中的方法事件修饰符按键修饰符按键码系统修饰键.exact 修饰符鼠标按钮修饰符为什么在 HTML 中监听事件？ 监听事件 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been cli
vue:Vue中的事件和方法
做个懂管理、懂产品，懂技术的大叔
04-30 489
vue中的事件绑定及注意事项
Vue入门---事件与方法详解
weixin_33961829的博客
08-25 81
一、 vue方法实现 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue方法与事件</title> 6 <met...
Vue方法与事件(简单讲解)
atu1111的博客
08-19 594
Vue方法与事件   下面这段定义讲解，我只是敲了大概的实现，对定义不是很了解 1. @click方法名可以不加(),默认会将原生事件对象 event 传入。 2..Vue 提供了一个特殊变量$event，用于访问原生 DOM 事件 3.使用的preventDefault()也可以用 Vue 事件的修饰符来实现，在＠绑定的事件后加 小圆点“．”，再跟一个后缀来使用修饰符 <!DOCTYPE html> <html lang="en">
Vue常用实例方法和事件
weixin_44415461的博客
07-26 374
方法： $mount() 挂载 $destroy() 卸载 $forceUpdate() 更新(迫使Vue实例重新渲染) $nextTick() 回调 事件: $on() 监听当前实例的自定义事件 $once() 监听一个自定义...
vue中 点击事件的写法_vue 方法与事件
weixin_39602560的博客
01-30 3161
在事件绑定上，类似原生Javascript的onclick写法，也是在HTML上进行监听的。@click的表达式可以直接使用javascript语句，也可以是一个在Vue实例中methods选项内的函数名。点击次数:{{ counter }}+ 1+ 10var app = new Vue({el:'#app',data: {counter: 0},methods: {handleAdd: fun...
Vue:Vue事件整理
qjyws的博客
06-19 9554
Vue事件内容整理
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 方法与事件处理器
12-29
方法与事件处理器 方法处理器 可以用 v-on 指令监听 DOM 事件： <button v-on:click=greet>Greet</button> 我们绑定了一个单击事件处理器到一个方法 greet。下面在 Vue 实例中定义这个方法： var ...
【Vue2】Vue2中的事件和方法全解
Jessieeeeeee的博客
01-17 3729
Vue2中的事件和方法全解
Vue实践--指令和事件
codesWay的博客
11-26 1338
Vue思想是数据驱动DOM，所以你只需要把主要精力放在数据和逻辑上即可，DOM的事情交给Vue就行了； 指令的作用是当表达式的值发生变化的时候，将某些行为应用到DOM上： Vuejs中的一些指令： 1.v-bind：动态更新DOM元素的属性（通常用来绑定DOM属性），例如： {{greeting|toUpperCase|strClip(3)}}//给该元素绑定href属性，属性的值是对
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
zhzijun的博客
11-13 407
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
vue2面试题5|[2024-11-08]
m0_49474690的博客
11-08 969
关于vue2API的面试题
解决@ant-design-vue/nuxt模块加载到许多没用到的组件，影响开发下加载速度的问题
清晰编程
11-12 147
升级命令：npm up @ant-design-vue/nuxt。解决方法：将该模块版本升级到1.4.6。
Vue中的常用指令
m0_62388400的博客
11-12 974
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
Javascript中Map与Set以及其常见遍历方式
警警的博客
11-12 739
在JavaScript中，Map和Set是两种非常重要的集合类型，它们提供了比传统对象（Object）和数组（Array）更强大和灵活的数据存储和操作方法。下面是对Map和Set的详细解释。
如何编译 Cesium 源码
最新发布
ismartcube的博客
11-13 721
通过以上步骤，您可以成功地从 GitHub 上下载 Cesium 源代码并在本地进行编译。对于开发人员来说，编译 Cesium 源码有助于定制功能，或者调试某些问题。如果您只是想使用 Cesium 进行开发，而不需要编译源代码，您也可以直接从 CDN 或下载预构建版本进行使用。编译的 Cesium 版本可以直接在您的应用中引用，或者部署到 Web 服务器上，供其他用户访问。提供一个高效、兼容、优化的数据转换工具，一站式完成数据转换、数据发布、数据预览操作。
Vue事件处理：监听与方法
本文将详细讲解Vue中的事件处理机制，包括监听事件、事件处理方法以及内联处理器中的方法。 1. 监听事件 Vue 提供了 `v-on` 指令来监听DOM事件。例如，在给定的示例中，`v-on:click` 指令用于监听按钮的点击事件，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值