zoukankan      html  css  js  c++  java
  • vue面试题专题

    1,v-if和v-show的作用是什么?有什么区别?

      v-if:        创建---删除,没有元素。切换开销大。适合不频繁切换的情况用。

          例子:制作搜索框,导航栏和搜索框重叠的两个框,点击搜索图片按钮创建输入框,再点击按钮删除输入框。不占位置。

      v-show: 显示---隐藏,有元素。   切换频繁的话用这。只是初始渲染开销大。如需求,点击按钮显示隐藏盒子。

     2,vue的生命周期:8大

      beforecreate---created---beforeMount---mounted---beforeUpdate---updated---beforeDestroy---destroy

    2-1:Vue 的父组件和子组件生命周期钩子函数执行顺序?

      Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分:

      加载渲染过程

      1,父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

      2,父组件更新过程

        父 beforeUpdate -> 父 updated

      3,子组件更新过程

        父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

     

      4,销毁过程

        父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

    3,封装过哪些组件?

       (个人)封装过分页,哈哈哈

    4,父子组件怎么通信的 ? 兄弟组件怎么通信的?

       总的来说父传子是通过props,子传父是通过$emit。

           举个父传子例子:父组件传值给子组件,即父组件去改变子组件的数据,比如文字。

    父:

      0,首先引入子组件,import...

      1,  设置components:{ BtnStyle  } 节点,,注册子组件。

      2:return 返回真实数据:toMsg:“这是数据”。

      3,再在视图层把子组件用标签的形式展示出来,想改变子组件还得绑定好数据传给子组件:  <BtnStyle :toMsg="toMsg"></BtnStyle>

    子:绑定数据到父组件,让父组件可以随时修改。

      0,暴露name,方便找到这个子组件。父组件也可以暴露自己组件的名字。

      1,设置节点接收父组件传递过来的数据:  prop:["toMsg"]

      2,不用设置return值,因为值在父组件设置了。

      3,最后在视图层需要文字处,用花括号填上动态数据:<h1> {{toSonData}} </h1>

      子传父:待补。

    4,mvvm框架是啥?它和其它框架(jquery)的区别是什么?哪些场景适合?

      一个model+view+viewModel框架,数据模型model,viewModel连接两个

      区别:vue是数据驱动,通过数据来显示视图层而不是DOM节点去操作。

      场景:数据操作比较多的场景,更加便捷。。。。

    5,什么是 MVVM , 和 MVC 是什么区别, 原理是什么?

      MVVM:数据模型数据双向绑定,view和model之间没有联系,通过 viewModel进行交互,而且Model和ViewModel之间的交互是双向的,

      因此视图的数据的变化会同时修改数据源,而数据源数据的变化也会立即反应view。

      MVC:是单向通信。

    6,class与style 如何绑定实现动态改变样式 ?

      1,绑定类,用三元判断::class="[isActive?class1:class2]"

      2,返回三个值,1 是 isActive是true还是false? 以及两个类对应的类名。:class1:‘a’,.....b....

      3,设置a和a的样式

      延申:如何动态绑定多个类?

      1,绑定一个动态类::class="[active?'class-'+index:'']",到时可以随意改变index的值去设置不同的类。

      2,返回两个值:active: true,  和 index:1, 

      3,样式的选择器类选择器这样命名: .class-1{}

      总结: 有个JS基础的知识点:

      a=active -> true.

      a=null    -> false

      额外:

      对象的方法,不是数组的,不用三元的话要在返回值处判断

      <div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

      data: { isActive: true, hasError: false }。

     
  • 相关阅读:
    vuex 使用
    vue之路由嵌套
    vue 之路由跳转及传参
    vue 的组件通讯
    vue 的 axios 安装
    vue3.0脚手架 创建项目
    淘宝页面初始化的css代码
    关闭当前浏览器窗口
    BOM
    单双引号和转义字符
  • 原文地址:https://www.cnblogs.com/lvqiupingboke-2019/p/12082695.html
Copyright © 2011-2022 走看看