Vue自学之路8-vue模版语法（事件绑定)

事件绑定

一个复杂的前端应用，离不开用户交互，而用户交互离不开事件绑定。

Vue中事件绑定语法

//1. v-on指令语法：
<input type='button' v-on:click='num++' />//2. 简写方式(常用）：
<input type='button' @click='num++' />

事件函数的调用方式

//1. 直接绑定函数名称：
<button v-on:click='say'>Hello</button>/2. 调用函数
<button v-on:click='say()'>Hi</button>//3. 事件函数参数传递：
<button v-on:click='say("hi", $event)'>Hi</button>

事件绑定的例子

<div id='app'><!-- 点击button，让num自增--><input type='button' v-on:click='num++'>num++</input><!-- 点击button，让num自减--><input type='button' @click='num--'/>num--</input><!-- 点击button，让num自增--><input type='button' @click='handle'/>num++</input><!-- 点击button，让num自增--><input type='button' @click='handle()'/>num++</input><!-- 点击button，传递具体参数，设置num--><input type='button' @click='handle2(123)'/>num++</input><!-- 点击button，传递具体参数（包括事件），设置num--><input type='button' @click='handle3(123,$event)'/>num++</input><div>{{ num }}</div>
</div><!-- 先下载vue.js -->
<script type='text/javascript' src='js/vue.js'></script>
<script>
//1. html中书写标签
//2. 引入vue.js
//3. 使用vue进行数据渲染。
var vm = new Vue({el: '#app', //绑定到id选择器data: {"num": 1},methods: {//空参数，默认第一个参数传递eventhandle: function(event){//需要添加this指针（指向vm自身），否则num无法被引用到。console.log(this===vm)this.num++ ;},  handle2: function(num){this.num = num;},  handle3: function(num, event){console.log(event.target.tagName)this.num = num;}}}
)
</script>

传送门：2021最新测试资料&大厂职位

博主：测试生财（一个不为996而996的测开码农）

座右铭：专注测试开发与自动化运维，努力读书思考写作，为内卷的人生奠定财务自由。

内容范畴：技术提升，职场杂谈，事业发展，阅读写作，投资理财，健康人生。

csdn：https://blog.csdn.net/ccgshigao

博客园：https://www.cnblogs.com/qa-freeroad/

51cto：https://blog.51cto.com/14900374

微信公众号：测试生财（定期分享独家内容和资源）

Vue自学之路8-vue模版语法（事件绑定)相关推荐

微信小程序学习5：小程序语法-事件绑定之给事件传递参数
微信小程序学习5:小程序语法-事件绑定之给事件传递参数前面一讲是关于事件绑定的,下面对事件绑定进行补充. 在用户触发事件,比如点击按钮时,我们往往要传递一下参数用来识别是那个按钮,因为一个界面往往不 ...
微信小程序学习4：小程序语法 - 事件绑定
微信小程序学习4:小程序语法 - 事件绑定事件绑定最简单的例子是,你设置一个按钮为可触发的,触发条件可以是点击,按压,长按等等.当然,如果你仅仅是设置了触发事件,而没有创建回调函数,是不会产生什么效 ...
【vue大师晋级之路第一集：Vue基础】第3章——模版语法
模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 H ...
Vue学习之路第八篇：事件修饰符
学习准备: ①.顾名思义,"事件修饰符"那么肯定是用来修饰事件,既然和事件有关系,那么肯定和"v-on"指令(也可简写为:@)有关系了. ②.事件修饰符有以下几 ...
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap input （十）
【Vue】Vue数据及事件绑定
文章目录 1. 数据绑定 1.1 单向绑定 1.1.1 插值绑定 1.1.2 v-bind绑定 1.2 双向绑定 2. 事件绑定与监听 2.1 方法及内联处理器 2.2 修饰符事件修饰符键值修饰符 ...
Vue.js 之组件-监听子组件事件
1.监听子组件事件前面介绍了父组件如何通过 prop 向子组件传递数据,反过来,子组件如何向父组件通信呢? 在 Vue.js 中,这是通过自定义事件来实现的,子组件使用 $emit() 方法触发事件 ...
Vue基础—模版语法指令精细版
本资源由 itjc8.com 收集 day01 Vue 是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架 vue 的核心库只关注视图层,不仅易于上手,还便 ...
移动端 | Vue.js对比微信小程序基础语法
(1)vue 自定义组件与父组件的通信,props:[abb],可以看成自组建的一个自定义属性 (2)vue 模版语法{{}} 只能是在DOM中插入,<div>{{acc}}</di ...
vue进阶之路 webpack打包持续更新
MVVM设计思想 M(model) V(view) VM(View-Model) Vue生命周期挂载(初始化相关属性) beforeCreate->在实力初始化之后,数据观测和配置之前被调用 ...

Vue自学之路8-vue模版语法（事件绑定)

事件绑定

Vue中事件绑定语法

事件函数的调用方式

事件绑定的例子

传送门：2021最新测试资料&大厂职位

Vue自学之路8-vue模版语法（事件绑定)相关推荐

最新文章

热门文章