事件的基本使用

最新推荐文章于 2023-05-30 15:25:59 发布

一只829

最新推荐文章于 2023-05-30 15:25:59 发布

阅读量121

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_63533863/article/details/122506453

版权

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

2.事件的回调需要配置在methods对象中，最终会在vm上:
3.methods中配置的函数，不要用箭头函数!否则this就不是vm了:
4.methods中配置的函数，都是被Vue历管理的函数，this的指向是vm或组件实例对象:5.@click="demo”和@click="demo($event”效果一致，但后者可以传参:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <title>初识vue</title>
   <!--引入vue-->
    <script type="text/javascript"src="../js/vue.js"></script>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
        <h1>hello, {{name}}</h1>
        <button v-on:click="showInfo">点我提示信息(不传参)</button>
        <button @click="showInfo2(66,$event)">点我提示信息2（传参）</button>
    </div>

    <script type="text/javascript">
       Vue.config.productionTip=false//组织vue在启动时生成生产提示

       new Vue({
           el:'#root',//el用于制定当前vue实例为哪个容器服务，值通常为css选择字符串
           data: {
               name:'zxz'//data中用于存储数据，数据供el所制定的容器去使用，值我们暂时先携程一个对象
           },
           methods:{
               showInfo(){
                   alert('hello')
               },
               showInfo2(number,a){
                   console.log(number,a)
                   //alert('hello2')
               }
           }
       })
  
    </script>
</body>
</html>