Vue----Vue简介

news/2024/7/10 2:52:08 标签: 前端, vue, vue.js, 前端框架

文章目录

    • 1 Vue简介
      • 1.1 什么是Vue
      • 1.2 vue的特性
      • 1.3 MVVM
        • 1.3.1 MVVM的工作原理
      • 1.4 vue的版本


1 Vue简介

1.1 什么是Vue

Vue是一套用于构建用户界面的前端框架
在这里插入图片描述

构建用户界面:

用Vue往页面中填充数据非常方便。
前端开发者最主要的工作就是为网站的使用者构建美观、舒适、好用的网页。

在这里插入图片描述

框架:
一套现成的解决方案
vue全家桶:vue(核心库)、vue-router(路由方案)、vuex(状态管理方案)、vue组件库(快速搭建页面UI效果的方案)
辅助vue开发的一系列工具:

vue-cli:npm全局包,一键生成工程化的vue项目,基于webpack,大而全
vite:npm全局包,一键生成vue项目,小而巧
vue-devtools:浏览器插件,辅助调试工具
vetur:vscode插件,提供语法高亮和智能提示

在这里插入图片描述

vue_24">1.2 vue的特性

vue框架的特性主要体现在:

1.数据驱动视图

使用vue的页面中,vue会监听数据的变化,自动重新渲染页面的结构(数据驱动视图是单向的数据绑定)
在这里插入图片描述
数据发生变化,页面会自动重新渲染

2.双向数据绑定

在填写表单时,双向数据绑定可以辅助开发者在不操作dom的前提下自动把用户填写的内容同步到数据源,开发者不用再手动操作dom
在这里插入图片描述

1.3 MVVM

MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。

它把每个HTML页面拆分成三个部分:

Model:当前页面所渲染的DOM结构。
View:当前页面渲染时所依赖的数据源。
ViewModel:vue实例,MVVM的核心。

1.3.1 MVVM的工作原理

ViewModel作为MVVM的核心,是它把当前页面的数据源(Model)和页面的结构(View)连接在了一起。
在这里插入图片描述
当数据源发生变化时,会被ViewModel监听到,VM会根据最新的数据源自动更新页面的结构。
当表单元素的值发生变化时,也会被VM监听到,VM会把变化过后最新的值自动同步到Model数据源中。

vue_48">1.4 vue的版本

当前,vue 共有3个大版本,其中:

2.x版本的vue是目前企业级项目开发中的主流版本
3.x版本的vue 于 2020-09-19发布,生态还不完善,尚未在企业级项目开发中普及和推广
1.x版本的vue只乎被淘汰,不再建议学习与使用

vue3.x和vue2.x版本的对比:

vue2.x中绝大多数的API与特性,在vue3.x中同样支持。同时,vue3.x中还新增了3.x所特有的功能、并废弃了某些2.x中的旧功能

新增的功能例如:
组合式API、多根节点组件、更好的 TypeScript支持等

废弃的旧功能如下:
过滤器、不再支持$on,$off和$once 实例方法等

[详细的变更信息,请参考官方文档给出的迁移指南](https://v3.vuejs.org/guide/ migration/introduction.html)


http://www.niftyadmin.cn/n/563774.html

相关文章

Vue----vue的基本使用

文章目录2 vue的基本使用2.1 基本使用步骤2.2 基本代码与MVVM的对应关系2 vue的基本使用 2.1 基本使用步骤 1.导入vue.js的script脚本文件可在官网下载 2.在页面中声明一个将要被vue所控制的DOM区域 3.创建vm对象(vue的实例对象) <!DOCTYPE html> <html lang"en…

模型的评估

准确率,精确率,召回率和F1值:假如某个班级有男生80人,女生20人,共计100人.目标是找出所有女生.现在某人挑选出50个人,其中20人是女生,另外还错误的把30个男生也当作女生挑选出来了.作为评估者的你需要来评估(evaluation)下他的工作精确率的定义为:对于给定的数据集,分正确的数据…

Vue----Vue的调试工具

文章目录Vue的调试工具Vue的调试工具 vue-devtools vue官方提供的调试工具&#xff0c;能够方便开发者对vue项目进行调试与开发。 vue-devtools官网 Vue.js devtools - Crx4Chrome插件下载 Microsoft Edge 浏览器中 Vue.js devtools 插件安装与使用 … GitHub - vuejs/devtool…

Vue---- 内容渲染指令

文章目录3.3 内容渲染指令3.3.1常用的内容渲染指令&#xff1a;3.3.2 v-text3.3.3 {{}} 插值表达式3.3.4 v-html3.3 内容渲染指令 内容渲染指令是用来辅助开发者渲染DOM元素中的文本内容。 3.3.1常用的内容渲染指令&#xff1a; 1.v-text 2.{{ }} 3.v-html 3.3.2 v-text 用法…

RF、GBDT、XGBOOST常见面试算法整理

1、RF与GBDT之间的区别 相同点 都是由多棵树组成最终的结果都是由对棵树一起决定不同点组成随机森林的数可是分类树也可以是回归树&#xff0c;而GBDT只由回归树组成组成随机森林的数可是并行生成&#xff0c;而GBDT只能是串行生成随机森林的结果是多棵树表决决定&#xff0c;而…

Vue----属性绑定指令

文章目录3.4 属性绑定指令3.4 属性绑定指令 插值表达式只能用在元素的内容节点中&#xff0c;不能用在元素的属性节点中。在vue中可以使用 v-bind:指令为元素的属性动态绑定值。简写为英文的 &#xff1a;。 用法示例&#xff1a; <!DOCTYPE html> <html lang"…

数据挖掘之异常点检测

iForest &#xff08;Isolation Forest&#xff09;孤立森林 是一个基于Ensemble的快速异常检测方法&#xff0c;具有线性时间复杂度和高精准度&#xff0c;是符合大数据处理要求的state-of-the-art算法&#xff08;详见新版教材“Outlier Analysis”第5和第6章 PDF&#xff0…

Vue----模板渲染语法中使用JavaScript表达式

文章目录3.5 模板渲染语法中使用JavaScript表达式3.5 模板渲染语法中使用JavaScript表达式 在vue提供的模板渲染语法中&#xff0c;除了支持绑定简单的数据值外&#xff0c;还支持JavaScript表达式运算。 用法示例&#xff1a; <!DOCTYPE html> <html lang"en…