Vue指令之v-on

1.v-on怎么使用？

2.事件名到底写什么呢？

3.方法名在哪里定义呢？

4.v-on的简写

5. 访问data中的数据,通过this关键字

6.总结

v-on指令是事件绑定指令，当用户需要点击，按下键盘，滚动鼠标等操作时，想要添加一些自己的逻辑处理时，就可以为特定的元素绑定一些特定的事件。

我们先在被vue实例挂载的标签div中，放入一个按钮为input标签，在标签内部写入v-on指令，冒号(:)后面就是事件名，等号(=)后面就是需要绑定的事件名称。

1.v-on怎么使用？

<div id="app"><input type="button" value="事件绑定" v-on:事件名="方法名">
</div>

2.事件名到底写什么呢？

假设如果是点击事件就写click，如果是鼠标移入事件就写monseenter，如果是鼠标双击事件就写 dblclick

<div id="app"><input type="button" value="事件绑定" v-on:click="方法名"><input type="button" value="事件绑定" v-on:mouseenter="方法名"><input type="button" value="事件绑定" v-on:dblclick="方法名">
</div>

3.方法名在哪里定义呢？

方法我们写在methods里面

<body><div id="app"><input type="button" value="事件绑定" v-on:click="todo"><input type="button" value="事件绑定" v-on:mouseenter="todo"><input type="button" value="事件绑定" v-on:dblclick="todo"></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var  app = new Vue({el:"#app",methods:{todo:function() {//方法执行的逻辑}}})</script></body>

4.v-on的简写

从代码中，我们可以发现，在绑定的事件都是v-on开头，Vue其实提供了一个简洁的写法，用@符号替代v-on

<div id="app"><input type="button" value="事件绑定" @click="todo"><input type="button" value="事件绑定" @mouseenter="todo"><input type="button" value="事件绑定" @dblclick="todo">
</div>

5. 访问data中的数据,通过this关键字

6.总结

v-on指令作用是为元素绑定事件
v-on指令可以简写为@
绑定的方法在methods中
方法内部通过this关键字访问定义在data中的数据

Vue指令之v-on相关推荐

Vue——基本的代码结构和插值表达式、v-cloak||Vue指令之v-text和v-html||v-bind的三种用法||Vue指令之v-on
Vue的基本代码 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
Vue基础-vue指令
一.vue基础-插值表达式 1.思考 1.以前改变标签内容,如何做? 2.用 Vue 有没有更简单的方式? 2.目的在dom标签中, 直接插入内容 3.语法又叫: 声明式渲染/文本插值语法: { ...
vue停止指令_一个微小的Vue指令，当到达边缘时停止传播滚动
vue停止指令停止滚动 (vue-scroll-stop) A tiny Vue directive that stop propagation scroll when edge reached. ...
vue脚手架_基础API、Vue基本概念、vue-cli 脚手架、vue指令
vue脚手架_基础API 安装:vue-devtools 学习和调试vue必备之利器 - 官方插件安装: 打开Chrome浏览器 =>点击浏览器右上角小图标,按图示操作 2.进入扩展程序菜单 ...
Vue指令实战：结合bootstrap做一个用户信息输入表格
结合前面的vue指令做了个小例子,用户在表单里面输入用户名和年龄,点击"添加"以后会保存到用户信息表里面 <!DOCTYPE html> <html> &l ...
数字气泡 php,vue指令如何实现气泡提示（附代码）
本篇文章给大家带来的内容是关于vue指令如何实现气泡提示(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 菜鸟学习之路 //L6zt github 自己在造组件轮子,也就是 ...
Vue指令练习实例-学生信息录入
很好的一个可以感受Vue.js的MVVM模型,数据和模型双向绑定的实例练习. <!doctype html> <html lang="en"> <he ...
Vue -- 指令【学习笔记】（持续更新）
Vue – 指令[学习笔记](持续更新) 记录了Vue第三天的学习笔记 v-show 注意,v-show 不支持 <template> 元素,也不支持 v-else. 带有 v-show ...
vue全套笔记，前端工程化+vue指令+脚手架
文章目录一. 前端工程化 webpack 的基本使用 webpack 中的插件 webpack 中的 loader 打包发布 Source Map的使用注意,实际开发不需要自己配置webpack ...
4.Vue指令（Directives）
目录 1. Vue环境搭建(Node) 2. npm与yarn详细使用 3. Vue介绍及其基本使用 4. Vue指令(Directives) 5. Vue修饰符(Modifier) 6. Vue计算 ...

Vue指令之v-on

Vue指令之v-on

1.v-on怎么使用？

2.事件名到底写什么呢？

3.方法名在哪里定义呢？

4.v-on的简写

5. 访问data中的数据,通过this关键字

6.总结

Vue指令之v-on相关推荐

最新文章

热门文章