Vue---$nextTick、$set、$ref、$event、$bus详细理解

最新推荐文章于 2023-07-31 16:49:39 发布

我爱布朗熊

最新推荐文章于 2023-07-31 16:49:39 发布

阅读量614

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_51351637/article/details/126857057

版权

Vue 专栏收录该内容

26 篇文章 9 订阅

订阅专栏

一、$nextTick

不用$nextTick有时候会导致什么问题？

导致执行的代码顺序不对，造成功能失败！

我们要实现一个编辑功能，当我们单击编辑的时候，也要让编辑的文本框获取焦点

    handleEdit(todo){
        // todo.hasOwnProperty()判断身上有无什么属性
      if(todo.hasOwnProperty()){
       //有的话
       todo.isEdit= true
      }else{
        //  没有的话
        
    //   todo.isEdit= true不能这么写 这么添加的isEdit的话 一会更改isEdit的时候，页面不会更改
      this.$set(todo,'isEdit',true)  //这样写才被vue认可  上面那种做法不会有getter和setter
      }
    //   让我们编辑的那个输入框获取焦点
    //   this.$refs.inputTitle.focus()   这样做显然是不行的 存在一个顺序问题
    //   走完if语句之后,vue并没有解析模板,而是顺着往下执行this.$refs.inputTitle.focus()
    // 但是因为没有解析模板  this.$refs.inputTitle.focus()并不能使已经隐藏的编辑框得到焦点
    
    // $nextTick所指定的回调会在DOM结点更新完毕之后再执行
    this.$nextTick(function(){
        this.$refs.inputTitle.focus()
        })
    },

<template>
    <li>
        <!-- <label>作用将input和span捆绑在一起 -->
        <label>
            <!-- 初始化谁勾谁不勾;    @change 也可以用@click时间 -->
            <input type="checkbox"  :checked="todo.done" @change="handleCheck(todo.id)"/>
            <!-- v-show谁真谁展示 -->
            <span v-show="!todo.isEdit">{{todo.title}}</span>
            <!-- v-show 未展示的元素未被移除，适用于切换频率较高的场景 -->
            <input type="text" v-show="todo.isEdit"  :value="todo.title" @blur="handleBlur(todo,$event)"
                    ref="inputTitle" />  
        </label>
        

        <!-- style="display:none" 让元素隐藏起来，看不见，摸不着 -->
        <button class="btn btn-danger"  @click="handleDelete(todo.id)" >删除</button>

        <button class="btn btn-edit"  v-show="!todo.isEdit" @click="handleEdit(todo)">编辑</button>
    </li>
</template>

二、$set

这是全局 Vue.set 的别名。

http://t.csdn.cn/OUoPw

下面这个是另一个好人整理的

http://t.csdn.cn/lHA2K

三、$ref

http://t.csdn.cn/j836G

四、$event

vue中点击事件或者是其他的事件可以通过在事件中添加$event进行对标签元素的dom获取或者修改标签指的属性等等。

$event是指当前触发的是什么事件（鼠标事件，键盘事件等）

$event.target则指的是事件触发的目标，即哪一个元素触发了事件，这将直接获取该dom元素

showInfo1 函数虽然调用的时候没有传入参数，但是我们在方法中依然可以使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初识vue</title>
        <!--引入vue    引入之后，全局就多了一个vue这个构造函数-->
        <script type="text/javascript" src="../js/vue.js"></script> 
    </head>
    <body>
        <div id="root">
            <h2>欢迎来到{{name}}学习</h2>
            <!-- 当点击button的时候，就会调用showInfo函数 -->
            <button v-on:click="showInfo1">点我提示信息1(不传参)</button>
            <!-- 简写v-on就是一个@字符 -->
            <button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
        </div>
 
 
        <script type="text/javascript">
            //阻止vue在启动时生成生产提示
            Vue.config.productionTip=false 
 
            new Vue({
                el:'#root',
                data:{
                    name:'尚硅谷'
                },
                methods:{
                    showInfo1(event){
                        // 打印标签中的文字
                        console.log(event.target.innerText)
                        alert('同学你好!')
                    },
                    showInfo2(event,number){
                        console.log(event,number)
                        alert('同学你好!!')
                        
                    }
                }
            })
        </script>   
    </body>
</html>