vue学习笔记(9)——事件处理

事件的基本应用:

  1. 使用v-on:xxx或@xxx绑定事件,其中xxx是事件名

  1. 事件的回调需要配置在methods对象中,最终会在vm上

  1. methods中配置的函数,不要用箭头函数,否则this的指向就不是vm了

  1. methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实例对象

  1. @click=“demo”和@click=“demo($event)”效果一致,但后者可以传参

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>事件的基本使用</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
    <h2>欢迎来到{
    
    {name}}学习</h2>
    <button v-on:click="showInfo">点我提示信息1(不传参)</button>
    <button @click="showInfo1(66,$event)">点我提示信息2(传参)</button>
</div>

<script type="text/javascript">
Vue.config.productionTip=false

new Vue({
    el:'#root',
    data:{
        name:'尚硅谷'
    },
    methods:{
        showInfo(event){
            alert('同学你好')
        },
        showInfo1(number,a){
            alert('同学你好!')
            ,console.log(number,a)
        }
    }
})

</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_54763080/article/details/128781101