vue复习选择题2

最新推荐文章于 2024-07-31 12:50:28 发布
最新推荐文章于 2024-07-31 12:50:28 发布
阅读量543 收藏 10
点赞数 4
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73922932/article/details/139185931
版权

1. 下面哪一个方法可以实现判断元素的class属性是否含有pp样式？ （A）

  • A. hasClass(“pp”)
  • B. is(“pp”)
  • C. attr(“class”,“pp”)
  • D. toggleClass(“pp”)

[!NOTE]

当涉及到在 jQuery 中判断元素的类属性时，下面是各个选项的作用：

A. hasClass("pp"): 这个方法用于检查匹配的元素集合中的每个元素是否具有指定的类名。如果其中至少一个元素含有指定的类名，则返回 true；否则返回 false。在这种情况下，hasClass("pp") 将检查元素是否具有类名为 “pp” 的类。

B. is("pp"): 这个方法用于检查匹配的元素集合中的每个元素是否与给定的选择器相匹配。在这里，“pp” 不是一个选择器，因此这个选项不正确。正确的使用方式是 is(".pp")，这将检查元素是否具有类名为 “pp” 的类。

C. attr("class","pp"): 这个方法用于获取或设置元素的属性值。在这种情况下，它会将元素的 class 属性设置为 “pp”。这并不是用于检查类属性的方法，而是用于设置类属性的方法。

D. toggleClass("pp"): 这个方法用于在匹配的元素集合中切换指定类名的存在。如果元素具有指定的类名，则删除它；如果元素没有指定的类名，则添加它。这个方法通常用于切换元素的样式。在这种情况下，toggleClass("pp") 将在元素的类列表中切换 “pp” 类的存在。

2. 有如下代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            float: left;
        }

        .divC {
            padding-top: 80px;
            margin: 0 30px;
        }

        select {
            width: 122px;
            height: 200px;
        }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>   $(function () {
            $("#btn1").click(function () {
                ______(1)________.appendTo("#sel2");
            });
            $("#btn2").click(function () {
                _______(2)_______.append($("#sel2>option:selected"));
            });
        }) 
    </script>
</head>

<body>
    <h1>课题专业选择</h1>
    <div> <span>课题适合专业</span><br> <select name="se1" id="sel1" multiple size="10">
            <option value="软件工程">软件工程</option>
            <option value="软件工程(专升本)">软件工程(专升本)</option>
            <option value="自动化">自动化</option>
            <option value="电子信息">电子信息</option>
            <option value="光学电子">光学电子</option>
            <option value="物联网">物联网</option>
        </select> </div>
    <div> <button id="btn1">添加-->></button><br><br> <button id="btn2">删除<<--< /button> </div>
    <div> <span>已选专业</span><br> <select name="se1" id="sel2" multiple size="10"> </select> </div>
</body>

</html>

请从下面四个选项中，选择出正确的答案到上面的空白处，实现单击"添加"按钮，将左边下拉列表框中的选中的选项添加到右边列表框中；单击"删除"按钮，将右边下拉列表框中的选中的选项添加到右边列表框中；实现效果如下图所示：（B）

img

  • A.

    (1)$(“#sel1>option”)

    (2)$("#sel2)

  • B.

    (1)$(“#sel1>option:selected”)

    (2)$("#sel1)

  • C.

    (1)$(“#sel2>option:selected”)

    (2)$("#sel1)

  • D.

    (1)$(“#sel1>option”)

    (2)$("#sel1)

3. 有如下HTML 代码：

<input type="checkbox" value="c1" />复选框1
<input type="checkbox" value="c2" />复选框2
<input type="checkbox" value="c3" />复选框3
<input type="checkbox" value="c4" />复选框4

则执行代码：$(“input”).val([“c1”,“c2”]);后，下面哪一项描述是正确的？（D）

  • A. 将所有input元素的value值设置为c1
  • B. 获取复选框1和复选框2的value值
  • C. 将所有input元素的value值设置为c2
  • D. 将复选框1和复选框2选中

4. 有如下HTML 代码：

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
</ul>

则执行代码：$("ul li:gt(0)").wrap("<b></b>");后，动态生成的代码是下面哪一项？（B）

  • A.

    <b>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ul>
</b>

  • B.

    <ul>
 <li>苹果</li>
 <b><li>香蕉</li></b>
 <b><li>橘子</li></b>
</ul>

  • C.

    <ul>
    <li>苹果</li>
    <b>
        <li>香蕉</li>
        <li>橘子</li>
    </b>
</ul>

  • D.

    <ul>
    <li>苹果</li>
    <li><b>香蕉</b></li>
    <li><b>橘子</b></li>
</ul>

5. 有如下HTML代码：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script src="jquery-3.3.1.min.js" type="text/javascript"></script>
    <script>
        $(function () {
            //输入代码
        })
    </script>
</head>

<body>
    <form>你爱好的运动是？<br><input type="checkbox" name="items" value="足球">足球<input type="checkbox" name="items"
            value="篮球">篮球<input type="checkbox" name="items" value="羽毛球">羽毛球<input type="checkbox" name="items"
            value="乒乓球">乒乓球<br><input type="button" id="CheckedAll" value="全选"><input type="button" id="CheckedNo"
            value="全不选"><input type="button" id="CheckedRev" value="反选"><input type="button" id="send" value="提交">
    </form>
</body>

</html>

运行效果如下图所示：

QQ截图20210321100805.jpg

单击“反选”按钮，实现复选框全部反向选中，下面哪个选项不能实现该功能。©

  • A.

    $("#CheckedRev").click(function() {
    $(":checkbox").each(function() {
        this.checked=!this.checked;
    })
})

  • B.

    $("#CheckedRev").click(function){
    $(":checkbox").each(function((i，val){
        val.checked=!val.checked;
    })
})

  • C.

    $("#CheckedRev").click(function(){
    $(":checkbox").each(function(){
        $(this).checked=!$(this).checked;
    })
})

  • D.

    $("#CheckedRev").click(function() {
    $(":checkbox").each(function() {
        $(this).prop("checked",!$(this).prop("checked"))
    })
})

6. 有如下HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #dd{
                width:200px;
                height:200px;
                padding:0 60px;
                background-color: pink;
                position: fixed;
            }
        </style>
        <script src="jquery-1.12.4.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                ____________；
            })
        </script>
    </head>
    <body>
        <div id="dd"></div>
    </body>
</html>

从下面选项中选出正确的选项补充完整上面的代码，实现div元素在浏览器窗口中居中。 （A）

  • A.

    $("#dd").css({
    left:($(window).width()-$("#dd").innerWidth())/2,
        top:($(window).height()-$("#dd").height())/2
});

  • B.

    $("#dd").css({
    left:($(window).width()-$("#dd").width()),
    top:($(window).height()-$("#dd").height())
})

  • C.

    $("#dd").css({
    left:($(window).width()-$("#dd").width())/2,
        top:($(window).height()-$("#dd").height())/2
});

  • D.

    $("#dd").css({
    left:($(window).width()-$("#dd").width())/2,
        top:($(window).height()-$("#dd").innerHeight())/2
});

7. 下面哪个方法可以实现判断DOM元素包含样式? （B）

  • A. toggleClass()
  • B. hasClass()
  • C. addClass()
  • D. removeClass()

[!NOTE]

A. toggleClass(): toggleClass() 方法用于在元素上切换一个或多个类。如果元素已经有指定的类，则该类会被移除；如果元素没有指定的类，则会被添加。这个方法在添加或移除样式时很方便。

B. hasClass(): hasClass() 方法用于检查元素是否包含指定的类。如果元素包含指定的类，则返回 true，否则返回 false。这个方法在需要根据元素的类来进行条件判断时非常有用。

C. addClass(): addClass() 方法用于向元素添加一个或多个类。这个方法将指定的类添加到元素的类列表中，如果元素已经有指定的类，则不会重复添加。这个方法常用于动态地向元素添加样式。

D. removeClass(): removeClass() 方法用于从元素中移除一个或多个类。这个方法将从元素的类列表中移除指定的类，如果元素不存在指定的类，则不会报错。通常用于动态地从元素中移除样式。

这些方法在 jQuery 中都是用于操作元素的类或样式的常见方法。

8. 下面哪一项描述是错误的？ （C）

  • A. $("div").html()作用是获取第一个div元素的html代码

  • B.$("div").attr("class","dd")作用是设置所有div元素的class属性值为dd

  • C.$("div").text()作用是获取第一个div元素的文本

  • D.$("div").attr("class")作用是获取第一个div元素的class属性值

9. 有如下代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>微博发布</title>
        <style>
            .box{
                width:600px;
                margin:20px auto;
                border: 1px solid #000;
                padding:10px;
            }
            
            #txt{
                width:400px;
                height: 150px;
            }
            
            ul,li{
                padding:0;
                margin:0;
            }
            
            ul{
                list-style: none;
                margin:0 126px 0 65px;
            }
            
            li{
                border-bottom: 1px dashed #ccc;
            }
        </style>
        
        <script src="jquery-3.3.1.min.js" type="text/javascript">   </script>
        <script>
            $(function(){
                $("#btn").click(function(){
                    var txt=___(1)___;
                    var $lis=___(2)___;
                    $("#ul").___(3)___($lis);
                    $("#txt").val("");
                });
            })
        </script>
    </head>
    <body>
        <div id="weibo">
            <span>微博发布</span>
            <textarea name="" id="txt" cols="30" rows="10"></textarea>
            <button id="btn">发布</button>
            <ul id="ul">
            </ul>
        </div>
    </body>
</html>

请从下面四个选项中，选择出正确的答案到上面的空白处，实现单击"发布"按钮，将多行文本框中的内容以列表形式添加到代码中的
  • 元素里面，要求最新发布的内容显示在最上面，同时清空多行文本框。实现效果如下图所示：（B）

img

  • A.

    (1)$(“#txt”).val()

    (2)$(“

  • txt
  • ”)

    (3)prepend

  • B.

    (1)$(“#txt”).val()

    (2)$(“

  • ”+txt+“
  • ”)

    (3)prepend

  • C.

    (1)$(“#txt”).val()

    (2)$(“

  • ”+txt+“
  • ”)

    (3)prependTo

  • D.

    (1)$(“#txt”).text()

    (2)$(“

  • ”+txt+“
  • ”)

    (3)prependTo

10. 有如下HTML代码：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        table {
            border: 0;
            border-collapse: collapse;
        }

        td {
            padding: 2px;
            width: 100px;
        }

        th {
            text-align: left;
            padding: 4px;
            border-bottom: 1px solid #333;
        }

        .odd {
            background: #FFF38F;
        }

        /* 奇数行样式*/
        .even {
            background: #EEEEEE;
        }

        /* 偶数行样式*/
        .selected {
            background: #FF6500;
            color: #fff;
        }

        /* 被选中样式*/
    </style>
    <script src="jquery-1.12.4.js" type="text/javascript"></script>
    <script type="text/javascript">$(function () {
            $('tbody>tr').click(function () {
                if ($(this).___(1)____) {
                $(this).removeClass('selected').___(2)___.prop('checked', false);
            }else {
                $(this).addClass('selected').find(':checkbox').prop('checked', true);
            }
        });
    })
    </script>
</head>

<body>

    <body>
        <table>
            <thead>
                <tr>
                    <th> </th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>暂住地</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="choice" value="" /></td>
                    <td>张山</td>
                    <td>男</td>
                    <td>浙江宁波</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="choice" value="" /></td>
                    <td>李四</td>
                    <td>女</td>
                    <td>浙江杭州</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="choice" value="" checked='checked' /></td>
                    <td>王五</td>
                    <td>男</td>
                    <td>湖南长沙</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="choice" value="" /></td>
                    <td>赵六</td>
                    <td>男</td>
                    <td>浙江温州</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="choice" value="" /></td>
                    <td>Rain</td>
                    <td>男</td>
                    <td>浙江杭州</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="choice" value="" /></td>
                    <td>MAXMAN</td>
                    <td>女</td>
                    <td>浙江杭州</td>
                </tr>
            </tbody>
        </table>
    </body>

</html>
</body>

从下面选出正确的答案补充完整程序，实现单击行如果添加了“.selected”样式，删除该样式，同时行里的复选框不被选中；如果没有添加“.selected”样式，添加该样式，同时行里的复选框被选中，另外可以多行被选中。如下图所示。（B）

img

  • A.

    (1)hasClass(.‘selected’)

    (2)children(‘:checkbox’)

  • B.

    (1)hasClass(‘selected’)

    (2)find(‘:checkbox’)

  • C.

    (1)hasClass(.‘selected’)

    (2)find(‘:checkbox’)

  • D.

    (1)is(.‘selected’)

    (2)children(‘:checkbox’)

11. 有如下HTML代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul,
        li {
            margin: 0;
            padding: 0;
        }

        .tab {
            width: 240px;
            margin: 50px;
        }

        .tab_menu {
            overflow: hidden;
        }

        .tab_menu li {
            float: left;
            text-align: center;
            cursor: pointer;
            list-style: none;
            padding: 1px 6px;
            margin-right: 4px;
            background: #F1F1F1;
            border: 1px solid #898989;
            border-bottom: none;
        }

        .tab_menu li.selected {
            color: #FFF;
            background: #6D84B4;
        }

        .tab_box {
            border: 1px solid #898989;
            height: 100px;
            font-size: 40px;
        }

        .hide {
            display: none
        }
    </style>
</head>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("div.tab_menu ul li").click(function () {
            $(this).___(1)___.siblings().___(2)___;
            var index = ___(3)___;
            $("div.tab_box>div").___(4)___.show().siblings().hide();
        })
    })
</script>

<body>
    <div>
        <div>
            <ul>
                <li class="selected">时事</li>
                <li>体育</li>
                <li>娱乐</li>
            </ul>
        </div>
        <div>
            <div>时事</div>
            <div class="hide">体育
            </div>
            <div class="hide">娱乐</div>
        </div>
    </div>
</body>

</html>

运行效果如下图所示：

11.png

从下面选出正确的选项，补充完整上面的程序，实现单击上面的选项卡，添加相应selected样式,同时显示下面相应的div框显示。（B）

  • A.

    (1)attr(“class”,selected")

    (2removeClass(“selected”)

    (3)$(this).index()

    (4)get(index)

  • B.

    (1)addClass(“selected”)

    (2)removeClass(“selected”)

    (3)$(this).index()

    (4)eq(index)

  • C.

    (1)addClass(“.selected”)

    (2)removeClass(“.selected”)

    (3)$(this).index

    (4)eq(index)

  • D.

    (1)attr(“class”,selected")

    (2removeClass(“.selected”)

    (3)$(this).index()

    (4)get(index)

12. 有如下代码：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script src="jquery-3.3.1.min.js" type="text/javascript">   </script>
    <script>
        $(function () {
            $("#CheckedAll").click(function () {
                $(":checkbox").prop(___(1)___);
            })

            $("#CheckedNo").click(function () {
                $(":checkbox").prop(___(2)___);
            })

            $("#CheckedRev").click(function () {
                $(":checkbox").___(3)___(function () {
                    this.checked = !this.checked;
                })
            })
            $("#send").click(function () {
                var str = "你选中的是：\n";
                ___(4)___.each(function () {
                    str = str + $(this).val() + "\n";
                })
                alert(str);
            })
        })
    </script>
</head>

<body>
    <form> 你爱好的运动是？<br> <input type="checkbox" name="items" value="足球">足球 <input type="checkbox" name="items"
            value="篮球">篮球 <input type="checkbox" name="items" value="羽毛球">羽毛球 <input type="checkbox" name="items"
            value="乒乓球">乒乓球<br> <input type="button" id="CheckedAll" value="全选"> <input type="button" id="CheckedNo"
            value="全不选"> <input type="button" id="CheckedRev" value="反选"> <input type="button" id="send" value="提交">
    </form>
</body>

</html>

请从下面四个选项中，选择出正确的答案到上面的空白处，实现单击"全选"按钮，将上面所有复选框都选中；单击"全不选"按钮，将上面所有复选框都不选中；单击"反选"按钮，将上面所有复选框进行反选；单击"提交"按钮，将上面选中复选框中的value属性值输出。实现效果如下图所示：（C）

img

  • A.

    (1)"checked","checked"

    (2)"checked",false

    (3)filter

    (4)$(":checked")

  • B.

    (1)"checked","checked"

    (2)"checked",false

    (3)each

    (4)$(":input")

  • C.

    (1)"checked",true

    (2)"checked",false

    (3)each

    (4)$(":checkbox:checked")

  • D.

    (1)"checked","checked"

    (2)"checked",false

    (3)each

    (4)$(":checkbox")

二. 多选题（共8题，40分）

13. 下面哪些操作属于jQuery中的DOM操作?（ABCDE）

  • A. 创建节点与插入节点
  • B. 复制节点
  • C. 获取节点
  • D. 删除节点
  • E. 替换节点与包裹节点

14. 在jQuery中下面哪些方法可以将节点以兄弟节点的形式插入到指定节点的前面或后面？（BCDE）

  • A. appendChild()
  • B. before()
  • C. insertAfter()
  • D. insertBefore()
  • E. after()

15. 下面哪些语句写法是正确的？（BC）

  • A. $("select#sel1>option:selected")[0].appendTo($("select#sel2");
  • B. $("select#sel1>option:selected").appendTo($("select#sel2"));
  • C. $("select#sel2").append($("select#sel1>option:selected"));
  • D. $("select#sel2")[0].append("select#sel1>option:selected");
  • E. $("select#sel2")[0].append($("select#sel1>option:selected"));

16. 在jQuery中下面哪些方法可以删除节点?（AE）

  • A. remove()
  • B. filter()
  • C. clone()
  • D. removeChild()
  • E. detach()

[!NOTE]

A. remove(): 这个方法用于从DOM中永久移除匹配的元素及其所有的数据和事件处理程序。它会彻底清除元素及其子元素，释放内存并防止内存泄漏。

B. filter(): 这个方法用于筛选匹配的元素集合，只返回符合指定条件的元素。

C. clone(): 这个方法用于创建匹配元素的副本。

D. removeChild(): 这个方法是 JavaScript 原生 DOM API 中的方法，而不是 jQuery 方法。它用于从指定父节点中删除指定的子节点。在 jQuery 中，通常使用 remove() 或 empty() 方法来删除节点，而不是使用原生的 removeChild() 方法。

E. detach(): 这个方法用于从DOM中移除匹配的元素，但保留元素的数据和事件处理程序。被移除的元素可以在稍后重新插入到DOM中。这在需要移除元素但稍后可能需要重新插入到DOM中的情况下很有用。

总的来说，remove()、filter()、clone() 和 detach() 方法用于对元素进行操作和处理，而 removeChild() 方法不是 jQuery 提供的，而是 JavaScript 原生 DOM API 中的方法。

17. 在jQuery中下面哪些方法可以将节点以子节点的形式插入到指定节点里面？（ABCD）

  • A. append()
  • B. prependTo()
  • C. appendTo()
  • D. prepend()
  • E. after()

[!NOTE]

after()方法是用于将指定内容插入到目标元素后面的方法，并非以子节点的形式插入到指定节点里面。

18. 下面哪些语句写法是正确的？（AC）

  • A. $("ul").prepend($("<li>菠萝</li>"));
  • B. $("<li>菠萝</li>").prependTo($("ul")[0]);
  • C. $("<li>菠萝</li>").prependTo($("ul"));
  • D. $("<li>菠萝</li>").prepend("ul")[0];
  • E. $("ul")[0].prepend($("<li>菠萝</li>"));

[!NOTE]

让我们逐个分析：

B. $("<li>菠萝</li>").prependTo($("ul")[0]);

在这个语句中，prependTo() 方法是正确的，因为它可以将新创建的 <li> 元素插入到选择器选择的元素的开头位置。但是，$("ul")[0] 返回的是一个 DOM 元素，而不是 jQuery 对象，因此无法直接使用 jQuery 的方法。正确的写法应该是 $("ul").prepend($("<li>菠萝</li>"));。

D. $("<li>菠萝</li>").prepend("ul")[0];

这个语句中，.prepend() 方法被错误地用于选择器字符串 "ul" 上，而不是一个 jQuery 对象上。.prepend() 方法需要一个 DOM 元素、HTML 字符串、或者 jQuery 对象作为参数，而不是选择器字符串。因此，这个语句是错误的。

E. $("ul")[0].prepend($("<li>菠萝</li>"));

这个语句中，$("ul")[0] 返回的是一个 DOM 元素，而不是 jQuery 对象，因此无法直接使用 jQuery 的 .prepend()

19. 在页面中有一个ul元素，代码如下：

<ul>
    <li title='苹果'>苹果</li>
    <li title='橘子'>橘子</li>
    <li title='菠萝'>菠萝</li>
</ul>

下面对节点的操作哪些说法是正确？（ABCDE）

  • A. $("ul>li:eq(1)").insertBefore($("ul>li:first"));是将ul下“橘子”节点移动到“苹果”节点前面。
  • B. $("ul").append($("<li title='香蕉'>香蕉</li>")); 是在ul元素内部后面追加节点。
  • C. var $li = $("<li title='香蕉'>香蕉</li>"); 是创建节点。
  • D. $("ul li:eq(2)").remove();是删除ul下“菠萝”那个节点。
  • E. $("ul>li:eq(1)").clone(true).insertBefore($("ul>li:first"));是复制ul下“橘子”节点，然后插入到“苹果”节点前面。

20. 在页面中有一个ul元素，代码如下：

<ul>
    <li title='苹果'>苹果</li>
    <li title='橘子'>橘子</li>
    <li title='菠萝'>菠萝</li>
    <li title='葡萄'>葡萄</li>
    <li title='香蕉'>香蕉</li>
</ul>

现在实现将“菠萝”和“葡萄”移动到苹果前面，下面哪些写法是正确的？（ABCDE）

  • A. $("li:eq(2),li:eq(3)").prependTo("ul");
  • B. $("li:gt(1):not(:last)").insertBefore($("li:first"));
  • C. $("li:eq(2),li:eq(3)").insertBefore($("li:first"));
  • D. $("ul").prepend($("li:gt(1):not(:last)"));
  • E. $("li").filter(":eq(2),:eq(3)").prependTo("ul");
丁小喜
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2面试题
m0_70647221的博客
05-10 167
Vue2的双向数据绑定原理？ Vue中数据代理？ 组件之间的传值方式有哪些？ computed和watch的区别？ 谈一下key值的作用？说一下diff算法？ 为什么用中括号操作数组，Vue不更新页面？ Vue的生命周期？ Vue事件绑定原理说一下？ Vuex说一下？ 不需要响应式的数据应该怎么处理？ 父子组件生命周期顺序？ 说说nextTick的用处？场景？ Vue的SSR？ 小知识点 [](()说一下Vue优缺点？ 优：渐进式，组件化，轻量级..
Vue组件测试分析选择题
weixin_56258427的博客
11-22 2147
这里是解析 子组件将值传递给父组件是逆向传值，通过$emit触发事件，在父组件（A）中，修改了msg的值。这里是解析 父组件通过v-bind向子组件传值，子组件通过props来获取父组件传递过来的值。这里是解析 fn是接收到事件后响应方法的名称，定义是在父组件中定义。这里是解析 组件间的作用域相互独立，所以组件之间的数据不可共用.这里是解析 局部组件和全局组件都需以函数返回值的形式定义数据。这里是解析 组件的作用域：定义该组件的作用域内可调用。这里是解析 组件分为全局组件和局部组件。
vue面试题1
记录美好生活
03-14 1701
1、active-class是哪个组件的属性？嵌套路由怎么定义？答：vue-router模块的router-link组件。 2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id 3、vue-router有哪几种导航钩子？答：三种，一种是全局导航钩子：route...
【面试题一】 2024 大厂进阶Vue2面试题及答案（10道）
最新发布
jiadsadfasfs的博客
07-31 661
2024 大厂进阶Vue2面试题及答案（10道）
一些简单的vue考试题(选择题和简答题)
热门推荐
Wmlikeweb的博客
05-24 4万+
1、下面代码结果打印结果为: new Vue({ data: { a: 1, b: 2 }, created: function () { console.log(this.a) }, mounted(){ console.log(this.b) } }) A：1，2 B: 1,1 C: 2,2 D:2,1 2、在beforeRouteEnter钩子函数中进行console.log(...
Vue面试题 70道题目及答案（重排）
SSWmouse的博客
10-11 2万+
Vue面试题 Vue.js介绍 Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API Vue.js是一个构建数据驱动的Web界面的库。 Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue生态系统支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。 简而言之：Vue.j
Vue期末考试试题.pdf
06-27
2. MVVM设计模式：Vue实现了经典的MVVM模式，其中Model代表数据层，View代表视图层，而ViewModel则是Vue实例，通过数据绑定把View层和Model层连接起来。这种模式简化了视图更新与数据模型的依赖关系，使开发者能够...
Vue.js期末总复习
06-28
Vue.js期末总复习 Vue.js是一款流行的JavaScript框架，用于构建用户界面。下面是Vue.js期末总复习的知识点总结： 1. 在Vue实例中可以定义方法的是methods选项。 在Vue实例中，可以定义方法、数据、计算属性等。...
《Vue-框架开发》期末考试试题
07-10
《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试...
Vue课程雨课堂练习选择题判断题
01-18
本题涉及到的Vue知识点包括但不限于组件、事件绑定、生命周期、属性和方法、过渡效果、插件安装以及Vue CLI的使用。以下是相关知识点的详细解释： 1. `vm.$attrs`：Vue实例的`$attrs`属性可以用来获取父组件传递给...
Vue常见的考试题
dsdjf的博客
06-25 2589
一.src和href的区别？ 1、请求资源类型不同 （1）href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。 （2）在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe； 2、作用结果不同 （1）href 用于在当前文档和引用资源之间确立联系； （2）src 用于替换当前内容； 3、浏览器解析方式不同 （1）若在文档中添加 ，浏览器会识别该文档为 CSS 文件，就会并.
Vue.js面试题及答案大全（已经帮助大部分人面试成功）（十题）
09-29
vue遇到的坑，如何解决的？ Vue1.0升级2.0有很多坑:生命周期；路由中引入静态js，全局组件，全局变量，全局function；v-for循环的key，value值互换了位置，还有track-by；filter过滤器；遍历数组时，key值不能做model；父子通信等。
Vue.js面试题整理带答案 .pdf
06-14
关于Vue的各类面试题 下面列举一些题目 什么是MVVM？ mvvm 和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？ vue的优点是什么？ 组件之间的传值？ vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？ vue如何实现按需加载配合webpack设置 不用Vuex会带来什么问题？ 。。。。。。
2022Vue经典面试题及答案汇总(持续更新）
m0_54866636的博客
07-27 4152
如果在组件上，引就指向组件实例。保证组件的独立性和可复用性，data是一个函数，组件实例化的时候将会调用这个函数，返回一个对象，计算机会给这个对象分配一个内存地址，你实例化几次，就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变。总结在后端接没有开发完成之前，前端可以已有的接档，在真实的请求上拦截ajax，并根据mockjs的mock数据的规则，模拟真实接返回的数据，并将随机的模拟数据返回参与相应的数据交互处理，这样真正实现了前后台的分离开发。..
vue前端面试题知识点整理
weixin_30588827的博客
03-31 347
vue前端面试题知识点整理 1. 说一下Vue的双向绑定数据的原理 vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调 2. 解释单向数据流和双向数据绑定 单向数据流： 顾名思义，数据流是单向的。数据流动方向可以跟踪，流动...
vue考试题
woshierdanya的博客
08-13 1万+
1.目前三大主流框架：vue、react、angular 2.设计模式：主流框架模式MVC、MVP、MVVM全程为：Model View controller 、Model View presenter、 Model View ViewModel 3.
vue - 使用vue实现自定义多选与单选的答题功能
weixin_33759269的博客
07-04 3608
4月底立得flag，五月底插上小旗，结果拖到六月底七月初才来执行。说什么工作忙都是借口，就是睡的比猪早，起的比猪晚。 本来实现多选单选这个功能，vue组件中在表单方面提供了一个v-model指令，非常的善解“猿”意， 能把我们的多选单选功能很完美且很强大得双向绑定起来，实现多选、单选、任意选...根本不在话下。 但是，凡事都有一个但是！ 但是奈何这个项目...
Vue2 面试题
yuan
01-13 1563
认识自己的无知 愚昧，接纳自己，然后一点点改变 一、Vue 是什么？ 1. Web 发展历史 ⑴. 静态页 最早的网页是没有数据库的，可以理解成就是一张可以在网络上浏览的报纸，直到CGI技术的出现通过 CGI Perl 运行一小段代码与数据库或文件系统进行交互 ⑵. 服务端渲染 ASP，JSP大家应该都不会太陌生，最早出现于 2005 年左右，先后出现了微软的 ASP 和 Java Server Pages [JSP] 等技术,取代了 CGI ，增强了 WEB 与服务端的交互的安全性，类似.
Vue基础测试题整理
lovewulibingbing的博客
03-31 2449
1.什么是vue? 前端渐进式javaScript框架 2.框架和库的区别 框架是一套完整的解决方案，对项目侵入性大，项目如果需要更换框架，则需要重新架构整个项目。 库是提供某个小功能，对项目入侵性小，若库不适用，很容易切换到其他库 3.mvc与mvvm的区别 MVC是后端的分层开发概念MVVM是前端视图层的概念，主要关注与视图层分离，也就是把前端视图层分成了三部分Model、view、VMViewModel； MVC中M是model层：负责操纵数据库 。V是view层：视图层，发送请求，接收响应。C是co
vue期末考试选择复习
06-10
当准备复习 Vue 期末考试时，您可以从以下几个方面进行复习： 1. Vue 基础知识：包括 Vue 常用指令、组件、生命周期、模板语法、计算属性、事件处理等内容。 2. Vue 路由：包括路由的配置、路由传参、路由守卫等...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值