Vue(3)

最新推荐文章于 2024-07-22 09:07:34 发布

女孩哪有代码香

最新推荐文章于 2024-07-22 09:07:34 发布

阅读量601

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_52774518/article/details/125714444

版权

本文详细介绍了Vue.js中的事件处理，包括事件的基本使用、事件修饰符如prevent、stop、once等，以及事件冒泡和捕获。同时，文章还探讨了计算属性的概念、应用场景、原理和优势，并通过姓名案例展示了计算属性的实现方式。

摘要由CSDN通过智能技术生成

事件处理

事件的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="/02_Vue模板语法/vue.js"></script>
    <title>事件的基本使用</title>
</head>
<body>
    <div id="root">
        <h2>欢迎来到{
  {name}}学习</h2>
        <button v-on:click="showInfo">点我提示信息</button>
    </div>
</body>
 <script type="text/javascript">
        // function showInfo(){
     
        //     alert('同学你好')
        // }
         const vm =new Vue({
     
             el:'#root',
             data:{
     
                 name:'尚硅谷'
             },
             methods:{
     
                 showInfo(event){
     
                     console.log(event.target.innerText)
                     console.log(this)//此处的this是vm
                     console.log(vm==this)
                 }
            //    console.log((this===vm)),
                }
         })
          </script>
</html>

点击按钮后，观察控制台：
在这里插入图片描述
如果把函数变成箭头函数：

    showInfo:(event)=>{
   
                     console.log(event.target.innerText)
                     console.log(this)//此处的this是vm
                     console.log(vm==this)
                 }

运行之后点击按钮，再观察控制台：
在这里插入图片描述
原先的vue变成了windows，true变成了false。
所以，所有被vue管理的函数最好都写成普通函数，不要写成箭头函数。

总结：

     事件的基本使用：
           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 lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="/02_Vue模板语法/vue.js"></script>
    <title>事件的基本使用</title>
</head>
<body>
    <div id="root">
        <h2>欢迎来到{
  {name}}学习</h2>
        <!-- <button v-on:click="showInfo1">点我提示信息</button> -->
        <button @click="showInfo1">点我提示信息1(不传参)</button>
        <button @click="showInfo2(66,$event)">点我提示信息2</button>
    </div>
</body>
 <script type="text/javascript">
        // function showInfo(){
     
        //     alert('同学你好')
        // }
         const vm =new Vue({
     
             el:'#root',
             data:{
     
                 name:'尚硅谷'
             },
             methods:{
     
                 showInfo1(