2021-04-21

1、vue的特点是什么？

1. 国人开发的一个较轻量级框架。
2. 双向数据绑定，在数据操作方面更为简单。
3. 视图、数据、结构分离，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。
4. 组件化，方便封装和复用。
5. 虚拟DOM：dom操作是非常消耗性能的，不再使用原生的dom操作节点，极大解放dom操作

2、vue组件是如何传值的？

3、v-show和v-if指令的共同点和不同点？

• 共同点：都能控制元素的显示与隐藏
• 不同点：实现本质方法不同
  v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向DOMshu内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停地销毁和创建比较消耗性能。
• 总结：如果要频繁地切换某节点，使用v-show（切换开销比较小，初始开销较大）。如果不需要频繁切换缪节点使用v-if（初始渲染开销较小，切换开销比较大）

4、说出集中vue当中的指令和它的用法？

• v-model双向数据绑定

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

• 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>

• v-if v-show显示与隐藏

<div id="box">

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

</div>

<script>

    new Vue({

            el: "#box",

            data(){

                return {

                    show: true

                }

            }

        })

</script>

• v-on事件

<div id="box">

    <button v-on:click="say">按钮</button>

</div>按钮-->

<script>

new Vue({

        el: "#box",

        data(){

            return {}

        },

        methods: {

            say() {

                alert(111);

            }

        }

    })

</script>

• v-once只绑定一次

5、vue-loader是什么？使用它的用途有哪些？

• vue文件的一个加载器，将template/js/style转换成js模块
• 用途：js可以写es6、style样式可是scss或less、template可以加jade

6、axios是什么？怎么使用？

• 请求后台资源模块
• npm install axios --save装好，js中使用inport进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中。

7、单页面应用和多页面应用的区别以及优缺点

• 单页面应用（SPA）,通俗一点说就是指只有一个页面的应用，浏览器一开始要价在所有必须的html,js,css。所有页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的是由路由程序动态载入。
• 多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整个页面刷新。
• 单页面的有点：用户体验好，快，内容的改变不需要加载整个页面，基于这一点SPA对服务器压力较小；前后端分离；页面效果会比较酷炫（比如切换页面内容是的专长动画）。
• 单页面缺点：不利于seo；导航不可用，如果一定要当行需要进行前进、后退。

8、简述一下vue常用的修饰符和作用？

• .stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
• .prevent:等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件取消，则取消该事件，而不停止事件的进一步传播；）
• .capture：与事件冒泡方向相反，事件捕获由内到外
• .self：只会触发自己范围内的事件，不包含子元素
• .once：只会触发一次

9、谈谈你对MVVM开发模式的理解

MVVM分为Model、View、ViewModel三者。

• Model：代表数据模型，数据和业务逻辑都在Model层中定义
• View：代表UI视图，负责数据的展示
• ViewModel：负责监听Model中数据的改变并其他控制视图的更新，处理用户交互操作；

Model和Viwe并无直接关联，而是通过ViewModel来进行联系的，Model和VideModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新,View中由于用户交互操作而改变的数据也会在Model中同步
.