标签：Vue vue ++ 模版 绑定 num 事件 event

事件绑定

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

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: {
            //空参数，默认第一个参数传递event
            handle: 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,vue,++,模版,绑定,num,事件,event
来源： https://www.cnblogs.com/qa-freeroad/p/14660858.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。