zoukankan      html  css  js  c++  java
  • vue 钩子函数的使用

    1、什么是自定义指令,有哪些钩子函数及自定义指令的使用场景

    ①自定义指令是什么?以及自定义指令的使用场景

        在Vue中,有很多内置指令,但是这些指令只能满足我们最基础的使用,当我们在实际项目中遇到了必须要对DOM进行操作的逻辑时,我们就用到了自定义指令

    ②自定义指令的钩子函数

        bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

        inserted:被绑定元素插入父节点时调用 

        update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

        componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

        unbind:只调用一次,指令与元素解绑时调用。

    2、父组件获取异步动态数据传递给子组件,报错如何解决?

        在父组件给子组件传值的时候,给子组件加一个判断,如果数据没有请求到就不渲染当前组件

    <div v-if="list">

    </div>

    data() {

        return{

               list : [ ]

        }

    }

    3、vue-router参数传递方法详述及区别

        vue-router传参两种方式:params和query

    方法一:

        query 方式传参和接收参数

         传参:

            this.$router.push({

                  path:'/openAccount',

                  query:{id:id}

            });

         接收参数:

           this.$route.query.id

        传参是this.$router,接收参数是this.$route

    两者区别:

            $router为VueRouter实例,想要导航到不同URL,则使用$router.push方法

            $route为当前router跳转对象,里面可以获取name、path、query、params等

    方法二:

         params方式传参和接收参数

        传参:

              this.$router.push({

                  name:'/openAccount',

                  params:{

                        id: id

                      }

                })

    接收参数: this.$route.params.id

    query和oarams的区别:

        query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示

    4、vue-router有哪几种导航钩子

        全局导航钩子:beforeEach、afterEach

        组件内导航:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

        独享导航守卫:beforeEnter




    链接:https://www.jianshu.com/p/16f78e2dc004

  • 相关阅读:
    android sdk配置
    ptmalloc, dlmalloc
    Longest common subsequence problem
    handless UI (direct UI)
    poj 题目分类
    2010有道难题练习赛2
    JAVA内存模型
    wxformbuilder+WxWidgets下载编译使用
    这几天弄一下
    活用regex的例子 zz
  • 原文地址:https://www.cnblogs.com/liang715200/p/12036088.html
Copyright © 2011-2022 走看看