专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

你知道几种前端框架中的事件的方法

ins518 2025-01-11 13:50:18 技术文章 30 ℃ 0 评论

1、函数写法格式:

Bash
//vue中默认出现data中的属性，同时也会出现methods中的函数，但是computed属性不会以函数形式出现
methods:{
//点击事件的“属性名(){}” ,举例如下：
    showInfo(event){    
       }
}

2、函数中this的指向：

Bash
//以下的this指向vm本身
methods:{
//点击事件的属性名(){} ,举例如下：
showInfo(event){    
    console.log(this)
   }
}

//函数写成箭头函数，以下的this指向windows
methods:{
//点击事件的属性名(){} ,举例如下：
showInfo：(event)=>{
    
    console.log(this)
   }
}

3、此处函数以插值语法的形式来获取函数的返回值

<body>
    <!-- 准备好一个容器-->
    <div id-"root">
        姚: <input type="text"  v-model="firstName"> <br/><br/>
        名: <input tvpe="text"  v-model="lastName"> <br/><br/>
        <!-此处表示将函数的返回值以插值的形式显示在页面中，引处的函数后面必须（）括号-->
        全名:<span>{{ful1Name()}}</span>
    </div>
</body>
//当处查还留都舰昌誉场值语法的形式显示在页面d。
<script type="text/javascript">
    //限止 vue 在启动时生成生产提示.
    Vue.config.productionTip = false 
    new Vue({
        el:'#root',
        data:{
            firstName:'张';
            lastName:'三';
            },
        methods:{                
            fulIName(){
                return  "小猪佩奇";
            }
        },
   })
</script>

4. 事件处理的总结如下：

事件的基本使用:

1.使用vIon:xxx 或 @xxx 绑定事件，其中xxx是事件名;

2.事件的回调需要配置在methods对象中，最终会在vm上显示;

3.methods中配置的函数，不要用箭头函数!否则this就不是vm了，而是windows;

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

5.@click="demo”和 @click="demo($event)” 效果一致，但后者可以传参;

6.事件处理函数，使用methods , 是没有使用缓存，只有计算属性才有缓存；


搜索小程序“群应荟萃” 并转发 ，有无限多的免费资源提供大家

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表