2021-12-21 笔试题(一) 列举vue指令和用法,vue组件通信:父子组件传值

前端OnTheRun

已于 2022-10-31 23:18:49 修改

阅读量187

点赞数

分类专栏：面试文章标签： vue.js javascript 组件

于 2021-12-20 23:16:39 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/122052583

版权

面试专栏收录该内容

41 篇文章 0 订阅

订阅专栏

文章目录

1.输出国籍

    var star = [{
        name: "成龙",
        from: "中国"
    }, {
        name: "泰森",
        from: "美国"
    }];
    var arr = [];
    for (var i = 0; i < star.length; i++) {
        arr.push(star[i].from);
    }
    console.log(arr);

2.输出程序的结果

    function hello() {
        console.log(typeof "hello");
        setTimeout(() => {
            console.log(typeof 3000);
        }, 3000);
        console.log(typeof true);
    }
    hello();

结果:

String
Boolean
Number

3.设置样式

对于<a>跳转</a>标签,要求设置样式:宽100px,高32px,背景色#000000,字体颜色#fff,字体大小12px
圆角7px,文字水平垂直居中

        a {
            display: block;
            text-decoration: none;
            width: 100px;
            height: 32px;
            color: #fff;
            background: #333333;
            font-size: 12px;
            border-radius: 7px;
            text-align: center;
            line-height: 32px;
        }

4.说出至少4种vue指令和它们的用法

v-show:boolean 控制标签的显示和隐藏
v-if 条件判断
v-for 条件循环
v-cloak 控制元素延迟显示
v-bind 元素绑定样式
v-on 元素绑定事件

5.简要写出vue组件中父组件向子组件传值和子组件向父组件传值的过程

父传子:父组件通过自定义属性的形式绑定值到子组件身上,子组件通过属性props进行接收
子传父:子组件的模板内容用$emit定义自定义属性,父组件模板内容的子组件占位符上,用v-on绑定子组件定义的自定义事件名,监听子组件的事件实现通信
示例:
父==>子

<body>
    <div id="app">
        <!-- myname是自定义属性(不能用驼峰命名法) -->
        <navbar myname="home" v-bind:myshow="true"></navbar>
    </div>
</body>
<script>
    Vue.component('navbar', {
        // 调用自定义属性myname和myshow
        template: `<div>返回{{myname}}页:<span v-show="myshow">显示</span></div>`,
        // 接收父组件传来的属性(数组)
        props: ["myname", "myshow"]
    })
    new Vue({
        el: "#app",
    })
</script>

子==>父

<body>
    <div id="app">
        <!-- step2:父组件模板内容中.子组件占位标签上.用v-on绑定子组件定义的自定义事件名myclick -->
        <!-- bigger不用带括号 -->
        <child @myclick="bigger"></child>
        <p :style="{fontSize:fontSize+'px'}">hello</p>
    </div>
</body>
<script>
    Vue.component("child", {
        //step1:子组件模版内容中.用 $emit() 定义自定义事件myclick 
        //$emit()的两个参数:自定义的事件名称 需要传递的数据
        template: `<button @click="$emit('myclick',10)">点击</button>`
    });
    new Vue({
        el: "#app",
        data: {
            fontSize: 12
        },
        methods: {
            bigger: function(n) {
                this.fontSize += n//效果:点击button,p标签字体变大
            }
        }
    })
</script>