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

    一、$nextTick

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

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

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

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

    1. <template>
    2.     <li>
    3.         
    4.         <label>
    5.             
    6.             <input type="checkbox"  :checked="todo.done" @change="handleCheck(todo.id)"/>
    7.             
    8.             <span v-show="!todo.isEdit">{{todo.title}}span>
    9.             
    10.             <input type="text" v-show="todo.isEdit"  :value="todo.title" @blur="handleBlur(todo,$event)"
    11.                     ref="inputTitle" />  
    12.         label>
    13.         
    14.  
    15.         
    16.         <button class="btn btn-danger"  @click="handleDelete(todo.id)" >删除button>
    17.  
    18.         <button class="btn btn-edit"  v-show="!todo.isEdit" @click="handleEdit(todo)">编辑button>
    19.     li>
    20. 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 函数 虽然调用的时候没有传入参数，但是我们在方法中依然可以使用

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title> 初识vuetitle>
    6.         
    7.         <script type="text/javascript" src="../js/vue.js">script> 
    8.     head>
    9.     <body>
    10.         <div id="root">
    11.             <h2>欢迎来到{{name}}学习h2>
    12.             
    13.             <button v-on:click="showInfo1">点我提示信息1(不传参)button>
    14.             
    15.             <button @click="showInfo2($event,66)">点我提示信息2（传参）button>
    16.         div>
    17.  
    18.  
    19.         <script type="text/javascript">
    20.             //阻止vue在启动时生成生产提示
    21.             Vue.config.productionTip=false 
    22.  
    23.             new Vue({
    24.                 el:'#root',
    25.                 data:{
    26.                     name:'尚硅谷'
    27.                 },
    28.                 methods:{
    29.                     showInfo1(event){
    30.                         // 打印标签中的文字
    31.                         console.log(event.target.innerText)
    32.                         alert('同学你好!')
    33.                     },
    34.                     showInfo2(event,number){
    35.                         console.log(event,number)
    36.                         alert('同学你好!!')
    37.                         
    38.                     }
    39.                 }
    40.             })
    41.         script>   
    42.     body>
    43. html>

    五、$bus

    首先说明Vue官方并没有为我们提供这个API，这个只是在开发中总结出来的经验

    Vue.prototype.$bus

    http://t.csdn.cn/w5n1u

  • 相关阅读:
    面经总结 （一）
    LeetCode(力扣)77. 组合Python
    Python Selenium 之数据驱动测试的实现！
    中医对于帕金森病的病因和症状有何解释？
    在Uni-app中实现计时器效果
    LC39.组合总和
    React源码分析8-状态更新的优先级机制
    精益生产之MES制造执行系统
    这些 JavaScript 笔试题你能答对几道？
    插入排序图解
  • 原文地址：https://blog.csdn.net/weixin_51351637/article/details/126857057