美文网首页Vue3.0+TSVue3
Vue3+TS Day03 - 基础指令 v-if、v-show

Vue3+TS Day03 - 基础指令 v-if、v-show

作者: 望穿秋水小作坊 | 来源:发表于2021-11-24 17:55 被阅读0次

    一、 条件渲染

    1、条件渲染指令是做什么的?有哪些常见的条件渲染语句?

    • 在某些情况下,我们需要根据当前的条件决定某些元素或组件是否渲染,这个时候我们就需要进行条件判断了。
    • 条件渲染语句:v-if、v-show
    image.png image.png

    2、 v-if 和 v-show 渲染上的区别? 使用上有什么区别?

    • v-if 会将元素从 dom 树上擦除
    • v-show 仅仅是将元素的 display=none,进行元素隐藏
    image.png image.png

    3、因为 v-if 是一个模板指令,所以必须有一个标签作为载体,如果我们希望多个元素同时切换,要怎么设计比较好?

    image.png image.png

    二、 列表渲染

    1、列表渲染通常需要借助那个指令?

    • v-for 指令
    image.png

    2、v-for 的基本使用?

    image.png image.png

    3、v-for 什么情况下和 template 一起使用?

    image.png

    4、Vue 能监听到哪些变更数组的方法?

    image.png

    5、什么是 VNode?

    image.png

    6、什么是 VDom?

    • VNode === Virtual Node 是一个虚拟节点
    • VDom === Virtual Dom 是多个 VNode 形成的树结构
    • 虚拟 dom 最大的好处,就是方便跨平台渲染


      image.png

    7、v-for 中的 key 是什么作用?

    image.png

    8、插入 F 的案例,好好练习理解

    image.png

    9、Vue 对于v-for 【没有key】 的 diff 流程?

    image.png image.png

    10、Vue 对于v-for【有key】 的 diff 流程?

    image.png image.png image.png image.png

    相关文章

      网友评论

        本文标题:Vue3+TS Day03 - 基础指令 v-if、v-show

        本文链接:https://www.haomeiwen.com/subject/ypantrtx.html