当前位置: 首页 > news >正文

vue面试题——描述一下vue

目录

    • 1 vue是什么
    • 2 Vue的核心特性
      • 2.1 数据驱动(MVVM)
      • 2.2 组件化
      • 2.3 指令系统
    • 3 Vue跟传统开发的区别

1 vue是什么

  简单点说,vue就是一个用于创建用户界面的JavaScript框架,同时也是一个创建单页面应用的Web应用框架,Vue关注的核心是MVC(Modle-View-Controller)中的视图层(View)。同时,Vue能方便地获取数据,并且通过组件内部特定的方法(主要是双向绑定)实现视图与模型的交互。

2 Vue的核心特性

2.1 数据驱动(MVVM)

(1)什么是数据驱动
  所谓数据驱动,就是视图是由数据驱动生成,我们更新视图是通过修改数据更新的,而不是直接操作DOM。

(2)MVVM

MVVM表示的是Model-View-ViewModel

  • Model:模型层,负责业务处理逻辑以及和服务端进行交互
  • View:视图层,负责将数据模型转化为UI(界面)展示出来,可以简单理解为HTML页面
  • ViewModel:视图模型层,用来连接Model和View(两者通信的桥梁)

下面用代码展示Model、View以及ViewModel到底是什么:

在这里插入图片描述

  • View和Model是如何通过ViewModel进行通信的?

    在这里插入图片描述

    ① 从View这边看:ViewModel中的DOM监听器(DOM Listeners)监听DOM元素的变化,当DOM元素发生变化时,Model中的数据也随之变化。
    eg.当我们从输入框输入数据时,Model中的数据页会更新为我们输入的数据
    在这里插入图片描述

    ② 从Model这边看:数据绑定绑定了Model中的数据,Model钟的数据变化会反馈到视图中。
    eg.在message中输入‘哈哈哈’字符串,视图中的输入框中也会出现该字符串。

    在这里插入图片描述
    在这里插入图片描述

2.2 组件化

(1)什么是组件化
  Vue组件化是指将一个应用划分为多个独立的、可复用的模块,每个模块都包含自己的HTML模板、CSS样式以及JavaScript逻辑三个部分。在Vue中,每个.vue文件就是一个组件。

(2)组件化的优点

  • 降低系统的耦合度(模块间的依赖程度):需求相同的组件可以相互替换,快速完成开发。例如,输入框可以换成下拉框、日历等。
  • 调试方便:由于组件之间是低耦合的,因此可以单独对组件进行调试,而不是对整个系统进行调试。
  • 提高系统的可维护性:由于每个组件的职责单一,并且组件在系统中是可以被复用的,因此对代码进行优化可获得系统的整体升级。

2.3 指令系统

  指令 (Directives) 是带有 v- 前缀的特殊属性作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM

常用的指令:

  • 内容渲染指令‌:
    v-text‌:将变量的值作为纯文本输出。
    v-html‌:‌将变量的值作为HTML解析和渲染。

  • 条件判断指令‌:
    v-if:根据条件判断是否渲染元素。
    v-else‌、‌v-else-if‌:与v-if配合使用进行条件判断。
    v-show‌:根据条件控制元素的显示和隐藏。

  • 事件绑定指令‌:
    v-on‌(或缩写为@):绑定事件监听器。

  • 属性绑定指令‌:
    v-bind‌:动态绑定属性。

  • ‌列表渲染指令‌:
    v-for‌:‌基于数据集合渲染列表。

  • 双向绑定指令‌:
    v-model‌:‌在表单控件上创建双向数据绑定。

  • 其他指令‌:
    v-slot‌:插槽。
    v-once‌:‌只渲染元素和组件一次。
    ‌v-cloak‌:防止模板内容在编译完成前显示。

3 Vue跟传统开发的区别

  主要的区别有以下两个:

  • Vue所有的界面事件都是去操作数据的,而传统开发操作DOM
  • Vue所有界面的变动都是通过数据自动绑定出来的,而传统开发操作DOM

http://www.mrgr.cn/news/77858.html

相关文章:

  • Spring AI Alibaba-Chat Client
  • RK356x-10:串口(uart)配置与调试
  • 关于安卓模拟器或手机设置了BurpSuite代理和安装证书后仍然抓取不到APP数据包的解决办法
  • 基于SpringBoot的数据结构系统设计与实现(源码+定制+开发)
  • core 不可变类型 线程安全 record
  • 时间请求参数、响应
  • Linux高阶——1123—
  • 【阵列信号处理】相干信号和非相干信号生成
  • docker基础命令
  • 【C++知识总结2】C++里面的小配角cout和cin
  • #Verilog HDL# Verilog中的generate用法集锦
  • 【线程】Java多线程编程
  • 瑞佑液晶控制芯片RA6807系列介绍 (三)软件代码详解 Part.10(让PNG图片动起来)完结篇
  • MySQL学习/复习10视图/用户/权限/语言连接数据库
  • Vue实训---3-element plus的使用与布局
  • 深入解读:2023华为流程体系及落地实施
  • 【Bluedroid】A2DP SINK播放流程源码分析
  • BERT解析
  • 鸿蒙进阶-状态管理之@Prop@Link
  • 【老白学 Java】Warship v2.0(三)
  • 增量预训练(Pretrain)样本拼接篇
  • Gate学习(6) 指令学习3
  • WPF异步UI交互功能的实现方法
  • cangjie (仓颉) vscode环境搭建
  • .NET9 - 新功能体验(二)
  • 使用bcc/memleak定位C/C++应用的内存泄露问题