欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue面试题整理上

程序员文章站 2022-03-21 22:30:47
1.v-show和v-if指令的共同点和不同点?共同点:都能控制元素的显示和隐藏;不同点:实现本质⽅法不同,v-show本质就是通过控制css中的display设置为none,控制隐藏,只会编译⼀次;v-if是动态的向DOM树内添加或者删除DOM元素,若初始值为false,就不会编译了。⽽且v-if不停的销毁和创建⽐较消耗性能。总结:如果要频繁切换某节点,使⽤v-show(切换开销⽐较⼩,初始开销较⼤)。如果不需要频繁切换某节点使⽤v-if(初始渲染开销较⼩,切换开销⽐较⼤)2.如何只让css只....

Vue面试题整理上

1.v-show和v-if指令的共同点和不同点?

共同点:都能控制元素的显示和隐藏;不同点:实现本质⽅法不同,v-show本质就是通过控制css中的display设置为none,控制隐藏,只会编译⼀次;v-if是动态的向DOM树内添加或者删除DOM元素,若初始值为false,就不会编译了。⽽且v-if
不停的销毁和创建⽐较消耗性能。总结:如果要频繁切换某节点,使⽤v-show(切换开销⽐较⼩,初始开销较⼤)。如果不需要频繁切换某节点使⽤v-if(初始渲染开销较⼩,切换开销⽐较⼤)

2.如何只让css只在当前组件起作用?

  • 在组件中的style前面加上scoped
  • 通用样式写在跟组件中,不设置scoped这样其他组件就会继承跟组件的样式

3.keep-alive的作用

  • 组件缓存**
  • 动态路由缓存**

是Vue的内置组件,能够在组件切换过程中将状态保留在内存中,防止重复渲染DOM.
包裹动态组件时,会缓存不活动的组件实例,而不是销毁他们,在vue2.1.0版本之后,新增加了两个属性:include(包含的组件缓存)与exclude(排除的组件不缓存,优先级大于include)

1.组件缓存
        将想要缓存得组件进行包裹,
        include属性,里面得值,就是想要缓存的组件名字  name= “count” 该组件的name
        include数组形式:
       Keepalive 默认里面只能显示一个组件
         <keep-alive :include="['count','todo']">
            <count v-if="isShow"></count>
            <todo v-else></todo>
        </keep-alive>


    2.路由组件缓存
        路由表中进行配置:
        示例:
        {
            path: '/',
            name: 'List',
            component: List,
            meta:{
                keepAlive:false  // 想要缓存的路由组件 就设置为true
            }
        },

         <!-- transition 只能在单个元素上使用 -->
    <transition name="slide-left">
         <keep-alive>
              <router-view class="view" v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
    </transition>
    <transition>
            <router-view class="view" v-if="!$route.meta.keepAlive"></router-view>
    </transition>

4.如何获取dom?

一、通过元素类型的方法来操作:

  1. .document.getElementById(); //id名,在实际开发中较少使用,选择器中多用class id一般只用在*层存在 不能太过依赖id
  2. document.getElementsByTagName()//标签名
  3. document.getElementsByClassName()//类名
  4. document.getElementsByName() //name属性值,一般不用
  5. document.querySelector() //css选择符模式,返回与该模式匹配的第一个元素,结果为一个元素。如果没有找到匹配元素,则返回null
  6. document.querySelectorAll() //css选择符模式,返回与该模式匹配的所有元素。结果为一个数组
<div id="myDiv">
            <p>html</p>
            <p>css</p>
            <p>javascript</p>
</div>
<p>jquery</p>

    <script>
        var div=document.getElementById("myDiv");
        var p1=div.getElementsByTagName("p");//在div下调用
        alert(p1.length);//3  div节点下的p元素只有三个
        var p2 = document.getElementsByTagName("p");
        alert(p2.length);//4  document节点下的p元素有四个

    </script>

querySelector()和querySelectorAll()方法,最后两个为静态的,不是实时的,保存的是当时的状态,是一个副本,即:在以后的代码中通过方法使所选元素发生了变化,但该值依然不会改变,因此使用有局限性,一般不用,除非就想得到副本

 <div id="myDiv">
            <p>html</p>
            <p>css</p>
            <p>javascript</p>
        </div>
        <p>jquery</p>

    <script>
        var div=document.getElementById("myDiv");
        var p1=div.getElementsByTagName("p");
        alert(p1.length);//3
        var p2 = document.getElementsByTagName("p");
        alert(p2.length);//4
        var p3=document.querySelectorAll("p");
        alert(p3.length);//4
        document.body.appendChild(document.createElement("p"));//创建新元素P,并添加到body中
        alert(p1.length);//3   div节点下的p元素依然只有三个
        alert(p2.length);//5   在body中添加了一个新的P元素,该方法是“动态的”,因此,长度发生了变化
        alert(p3.length);//4   该方法是“静态的”,因此,无论发生什么变化,p3的值依然不会发生改变

二、根据关系树来选择(遍历节点树):
【先简单介绍一下节点:
DOM(文档对象模型)可以将任何HTML、XML文档描绘成一个多层次的节点树。所有的页面都表现为以一个特定节点为根节点的树形结构。html文档中根节点为document节点。

所有节点都有nodeType属性,代表节点的不同类型,通过nodeType属性可以来判断节点的类型。经常使用的节点主要有以下几种类型:

  1. Element类型(元素节点):nodeType值为 1
  2. Text类型(文本节点):nodeType值为 3
  3. Comment类型(注释节点):nodeType值为 8
  4. Document类型(document节点):nodeType值为 9;其规定的一些常用的属性有 document.body
    document.head 分别为HTML中的 document.documentElement为标签

所有的节点都有 hasChildNodes()方法 判断有无子节点 有一个或多个子节点时返回true】

通过一些属性可以来遍历节点树:

  1. parentNode//获取所选节点的父节点,最顶层的节点为#document
  2. childNodes //获取所选节点的子节点们
  3. firstChild //获取所选节点的第一个子节点
  4. lastChild //获取所选节点的最后一个子节点
  5. nextSibling //获取所选节点的后一个兄弟节点 列表中最后一个节点的nextSibling属性值为null
  6. previousSibling //获取所选节点的前一兄弟节点 列表中第一个节点的previousSibling属性值为null

三,vue中的获取dom节点
ref=“domName” ⽤法:this.$refs.domName

jquery中获取dom节点

jQuery中包裹后的DOM对象实际上是一个数组,要获得纯粹的DOM对象可以有两种方式:
1、使用数组索引方式访问,例如:
var dom = $(dom)[0];
如: $("#id")[0]
2、使用函数get()访问,例如:
var dom = $(dom).get(0);
get()函数中的参数为索引号

5,说出⼏种vue当中的指令和它的⽤法

1.v-bind:

当一个属性想要使用 data中的数据时,在属性前,加上一个v-bind:(动态属性)
简便语法: v-bind: 省略成 :属性=“属性值”

2.v-on:

给元素进行绑定事件,v-on:click=“alertFn”
事件方法定义在 与data平级的属性 methods中
methods:{ // 方法集合
alertFn() {
}
}
简便语法: v-on: 省略成 @事件=“回调方法”

3.v-if:

指令加载元素上,v-if的条件只有true或者false,当条件为真时,显示在页面上,当条件为假时,移除dom节点
v-else-if: 给元素加v-else-if时,当前dom元素上面的dom元素 必须要有v-if v-else
给元素加v-else时,当前dom元素上面的dom元素 必须要有v-if或者v-else-if

4. v-show:

指令加载元素上,v-show的条件只有true或者false,当条件为真时,显示在页面上,当条件为假时,隐藏dom节点
在使用上,如果说隐藏显示切换的不频繁,建议使用v-if,如果频繁使用,建议使用v-show template 模板标签,也可认为是
透明标签,v-if可以控制删除节点或者添加节点,v-show不起作用

4.v-for:

循环数组:
指令使用在想要循环显示的元素上,


第一个参数item,表示数组中的每一项
第二个参数index,表示数组中的下标(索引)
循环对象:

{{value,key}}


第一个参数value,表示循环对象中的属性值
第二个参数key,表示循环对象中的属性
循环字符串:
第一个参数v,表示 字符串中每一个字符
第二个参数i,表示 字符串中字符对应的下标
循环数字:
第一个参数,表示数字从1到循环的数结束
第二个参数,表示数字索引,从0开始

5.v-model 双向数据绑定

给可以用户操作的一些标签,标签中数据发生改变,数据也跟着发生改变

  1. input:
    text类型
    v-model 相当于给input动态绑定了一个value,在输入时候,触发一个事件,改变value值
    2.input:
    radio类型
    v-model 相当于给input radio类型,加了一个点击事件,点击事件做了同步 radioValue值
  2. input:
    checkbox类型
    v-model
    1.v-model 后面的值是true 或者false ,相当于给标签加了一个是否选中的属性checked,还加一个点击事件,点击事件做数据同步
    2.v-model 后面的值是数组,收集input checkbox类型中的value值,放到这个数组中
    4.select:
    v-model: 可以将用户选择的数据,v-model绑定的值,就是用户操作之后的变化值

6. v-text:

可以填充元素内容,指令右侧值就是内容

7. v-html:

他可以将带有标签形式的字符串,进行解析渲染
与原生js中innerHTML功能 很像

8.v-cloak:

可以解决插值表达式闪烁的问题,解决办法
给元素加上一个 v-cloak 指令
在style标签中,加上 [v-cloak]{display:none;}

本文地址:https://blog.csdn.net/weixin_46902438/article/details/107535779

相关标签: vue