面试题

vue

vue的特点是什么?

1.国人开发的一个轻量级框架。

2.双向数据绑定，在数据操作方面更为简单。

3.视图,数据,结构分离,不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。

4.组件化，方便封装和复用

5.虚拟DOM: dom操作是非常耗费性能的，不再使用原生的dom操作节点， 极大解放dom操作

vue中父子组件是如何传值的?

组件传值–父组件向子组件传值

第一步：父组件 在引用子组件时，通过属性绑定（v-bind：）的形式，把需要传递给子组件的数据，传递到子组件内部，供子组件使用 

第二步：把父组件传递过来的数据， 在 props数组 中定义一下

组件中的 所有props 中的数据，都是通过父组件传递给子组件的

 props 中的数据都是只读的，无法重新赋值

第三步：在该子组件中使用props数组 中定义好的数据

子组件通过事件调用向父组件传值

在子组件中，利用  $emit  触发 父组件传递过来的方法的时候，可以将子组件的数据当做参数传递给父组件

详情请点击

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

共同点:都能控制元素的显示和隐藏。

不同点:实现本质方法不同。
v-show本质就是通过控制css中的display设置为none,控制隐藏，只会编译一次;
v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false, 就不会编译了。而且v-if不停的销毁和创建比较消耗性能。

说出几种vue当中的指令和它的用法?

1.v-model双向数据绑定

<input type="text" v-model="msg"/>

2.v-for循环

<div id="box">

    <ul>

            <li v-for="item in arr">

                <span>{item.name}</span>

                <span>{item.age}</span>

            </li>

    </ul>

</div>

<script src="text/JavaScript">

    new Vue({
    

            el:"#box",

            data(){
    

                return(){
    

                    arr:[

                                {
    "name":"yifengchun","age":18},

                                 {
    "name":"yifengchun","age":18},

                                 {
    "name":"yifengchun","age":18},

                                 {
    "name":"yifengchun","age":18}

                            ]

                }

            }

    })

</script>

3.v-show 显示与隐藏

<div id="box">

    <div style="width:100px;height:100px;border:1px solid red;display:none" v-show="show"></