• 面试题


    1,谈谈你对单项数据的理解?

      当父组件给子组件传递数据的时候,子组件只允许进行接收,不能够进行修改,因为数据是单项流动的。

      如果子组件修改了父组件的信息后,可能会导致其他组件也会发生一些莫名的错误,导致你的错误无法捕获

    2,为什么组件中的data是一个函数而不是一个对象?

      因为每个组件执行的时候都会返回一个对象,如果data是一个对象的情况下,那么这个对象就可能会进行复用(对象是引用数据类型)

      但是如果是一个函数的情况下,那么就是以每次返回一个新的对象,保证每个组件都有一份独立的对象(状态)

    3,动态组件

      解释:多个组件通过同一个挂载点进行切换展示,通过is属性动态来改变组件

      通过一个内置组件<component></component>以及这个组件的属性is来进行切换的

      keep-alive:用来去包裹动态切换的页面或者组件(内置组件)

      作用:凡是keep-alive包裹的组件,不会被二次创建和销毁,而是进行一个缓存

      keep-alive组件身上会有以下这几个常用的属性

    include:

      值:字符串 正则表达式

      作用:指定哪些组件被缓存

    exclude:

      值:字符串 正则表达式

      作用:指定哪些组件被缓存

    max:数字

      作用:最大可以缓存多少个组件

      凡是使用了keep-alive包裹的组件都会多2个生命周期函数

    deactivated:
      当组件被切换隐藏的时候会进行缓存状态的生命周期
    activated:
      当组件被切换显示的时候会进行进入活跃状态的生命周期

    4.如何使每一个组件都拥有自己独立的css作用域

      在style标签上添加一个属性scoped

    slot插槽

      正常情况下组件当作标签使用的时候,组件标签

    基本使用(匿名插槽):

      1,在组件内部书写一个template标签,添加一个指令,v-slot

      2,将需要做嵌套的内部放在template标签内部

      3,在组件内部通过<slot></slot>进行接收

    具名插槽:

      有名字的插槽

      1,在组件标签内部书写一个template标签添加一个指令v-slot:插槽的名称

      2,将需要做嵌套的内部放在template标签内部

      3,在组件内部通过<slot name="插槽的名称"></slot>进行接收

    作用域插槽

      带参数的插槽

      数据的子传父

      1,在组件内部通过<slot name="插槽名称":自定义属性=“需要传递的值”></slot>绑定一个自定义属性   值为需要传递的数据

      2,在组件标签内部书写一个template标签  标签添加一个指令v-slot:插槽的名称=“需要接收的这个对象”

      3,在template内部的标签上进行数据的渲染{{需要接收的这个对象.自定义属性}}

    Vue动画

      1,如果需要使用Vue的动画,那么需要变动的元素外层必须加一个内置组件<transition></transition>

      2,需要进行动画的元素必须经历隐藏和显示 v-if  v-show

     动画的类名

      name就是动画的名称 template会有一个属性name name的值就是动画的名称

      进入的类名
      <name>-enter
      <name>-enter-active
      <name>-enter-to

      离开的类名
      <name>-leave
      <name>-leave-active
      <name>-leave-to
      当多个元素需要相同的动画的时候  需要将transition  换成transition-group另外需要给每一个元素添加一个不同的key值
    animate.css
      当你使用了第三方的css动画库的时候,可以直接将动画的,名称通过以下方式赋值给transition
    <transition
    enter-class=""
    enter-active-class=""
    enter-to-class=""
    leave-class=""
    leave-active-class=""
    leave-to-class=""
    >
    <div class="box" v-if="show" ></div>
    </transition>
  • 相关阅读:
    创业艰难
    2013.5.20 a
    碱基对
    安装免费在线客服livezilla系统
    简单实现后台订单页面 上一单,下一单 的按钮
    zencart新进产品滚动
    ZEN CART 一级分类显示所有二级分类产品
    frame弹出框
    zen cart 打开错误信息显示调试开关
    zencart外贸网站促销方案
  • 原文地址:https://www.cnblogs.com/wwwxxjsyy/p/10914064.html
Copyright © 2020-2023  润新知