前端面试题之 Vue

1. 谈谈对 MVVM 的认识。

   • MVVM 分为 Model、View、ViewModel 三者：
     • Model：代表数据模型，数据和业务逻辑都在 Model 层中定义
     • View：代表 UI 视图，负责数据的展示
     • ViewModel：就是与界面(view)对应的 Model。因为，数据库结构往往是不能直接跟界面控件一一对应上的，所以，需要再定义一个数据对象专门对应 view 上的控件。而 ViewModel 的职责就是把 model 对象封装成可以显示和接受输入的界面数据对象
   • Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步
   • 简单来说，ViewModel 就是 View 与 Model 的连接器，View 与 Model 通过 ViewModel 实现双向绑定

2. Vue 框架主要的优点是什么？

   • 渐进式构建能力是 vue.js 最大的优势，vue 有一个简洁而且合理的架构，使得它易于理解和构建
   • vue 有一个强大的充满激情人群的社区，这为 vue.js 增加了巨大的价值，使得为一个空白项目创建一个综合的解决方案变得十分容易

3. 列举 Vue 中常见的指令及其作用。

   • 文本插值：{{ }} Mustache

     •   
       
             {{ message }}
         
       

   • DOM 属性绑定： v-bind

     •   
       
             
                 鼠标悬停几秒钟查看此处动态绑定的提示信息！
             
         
       

   • 指令绑定一个事件监听器：v-on

     •   
       
            
       {{ message }}
            逆转消息
         
       

   • 实现表单输入和应用状态之间的双向绑定：v-model

     •   
       
             
       {{ message }}
             
         
       

   • 控制切换一个元素的显示：v-if 和 v-else

     •   
       
             
       现在你看到我了
         
       

   • 列表渲染：v-for

     •   
       
             
       
                 
       
                     {{ todo.text }}
                 
             
         
         var app4 = new Vue({
             el: '#app-4',
             data: {
                 todos: [
                     { text: '学习 JavaScript' },
                     { text: '学习 Vue' },
                     { text: '整个牛项目' }
                 ]
             }
         })
       

   • 根据条件展示元素：v-show

     •   
       Hello!
       

     • 带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display
     • 注意：v-show 不支持