首页 > 其他分享 >VUE学习

VUE学习

时间:2024-12-04 10:22:32浏览次数:6  
标签:VUE 视图 学习 Vue 组件 Model 页面 View

一、VUE出现的原因是:跨平台应用

  1. 它的核心库专注于视图层,使得开发者能够便捷地构建单页面应用。
  2. Vue通过简洁的API实现了响应式的数据绑定和组合的视图组件
  3. Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
  4. Vue具有轻量级和易上手的特点,因此在国内得到了广泛的应用和喜爱。

二、VUE的样子是:结构化

  1. 渐进式框架(Incremental Framework)是一种软件开发过程中的架构设计方法它强调将整个软件系统划分为一系列较小的、可独立开发和测试的组件,逐步构建和扩展整个系统,以满足不断变化的需求
  2. 渐进式框架与“一步到位”的传统开发方式不同,后者试图在一开始就构建完整的系统架构,但往往面临着需求变更和系统复杂性的挑战。
  3. 渐进式框架允许开发者根据项目的需求和复杂度选择性地使用框架提供的不同功能和特性,是一种灵活、高效、适应性强的软件开发方法。

三、VUE的开发方式是:数据驱动UI

  • Vue采用了MVVM(Model-View-ViewModel)模式来管理应用程序的数据模型(Model)和视图界面(View)的交互。在MVVM模式中,Model代表数据模型,View代表用户界面,而ViewModel则是连接Model和View的桥梁。

    • Model:是数据模型,表示应用程序中的数据。

    • View:是用户界面,即用户看到的页面结构。

    • ViewModel:是Vue.js的核心,它连接了Model和View。当Model中的数据发生变化时,ViewModel能够监听到这种变化,并自动更新View;同样,当用户在View中进行了某些操作(如输入数据),ViewModel也能够监听到并自动更新Model中的数据。

  • 通过MVVM模式,Vue实现了数据的双向绑定,即数据变化会驱动视图自动更新,而视图的变化也会反映到数据中。这种解耦机制使得开发者可以更加专注于业务逻辑的实现,而不需要过多地关注View和Model之间的细节。

四、总结:VUE是单网页应用程序

Vue单网页应用程序(SPA,Single Page Application)是一种特殊的Web应用模式,其核心特点在于用户在整个使用过程中,页面无需重新加载,仅通过动态更新页面的局部内容来实现页面间的切换。

  1. 页面切换流畅:在SPA中,页面跳转并非传统意义上的加载全新页面,而是根据路由规则,动态地加载和渲染对应的组件。
  2. 组件化开发:Vue是一个组件化的框架,SPA充分利用了这一点。开发者可以将页面拆分为多个可复用的组件,每个组件都有自己独立的HTML模板、JavaScript逻辑和CSS样式。
  3. 前后端分离:SPA通常采用前后端分离的开发模式。前端负责页面的渲染和用户的交互,后端则负责提供数据接口。
  4. 路由管理:Vue Router是Vue.js的官方路由管理器,它使得我们可以轻松实现SPA的页面跳转和组件渲染。
  5. 数据驱动:Vue是一个数据驱动的框架,SPA中的页面渲染和组件状态都是基于数据的。当数据发生变化时,Vue会自动更新相关的视图,实现了视图与数据的双向绑定。

 

标签:VUE,视图,学习,Vue,组件,Model,页面,View
From: https://www.cnblogs.com/guangzhiruijie/p/18585743

相关文章

  • vue2/3 中使用 @vue-office/docx 在网页中预览(docx、excel、pdf)文件
    1.安装依赖:#docx文档预览组件npminstall@vue-office/docxvue-demi@0.14.6#excel文档预览组件npminstall@vue-office/excelvue-demi@0.14.6#pdf文档预览组件npminstall@vue-office/pdfvue-demi@0.14.6vue2.6版本或以下还需要额外安装@vue/composition-apinp......
  • 来学习typescript 吧! --1基础类型(string、number、 boolean、void 、Null、undefined
    TS是JS的超集,所以js基础的类型都包含在内基础类型:Boolean、Number、String、null、undefined以及ES6的Symbol和ES10的BigInt一、安装和使用ts:1、npminstalltypescript-g//全局安装typescript2、tsc--init//生成tsconfig.json文件3、tscindex.ts//编译ts文......
  • 决策单调性优化dp学习笔记
    点的第一个省选级算法,算是一个很好的过渡。决策单调性,也称四边形不等式优化dp。主要适用于转移式子大概长这样的时候:\(f_i=\min/\max\{f_j+w(j,i)\}\),其中\(w(j,i)\)满足四边形不等式。四边形不等式当\(a\leb\lec\led\)时,若存在$w(a,c)+w(b,d)\lew(a,d)+w(b,c)......
  • 9.在 Vue 3 中使用 OpenLayers 加载 Bing 地图示例(多种形式)
    前言随着地理信息技术的不断发展,地图应用在现代项目中的需求也日益增长。Bing地图提供了高质量的地图服务,包括矢量、卫星和混合标记等多种类型。OpenLayers是一款强大的开源地图框架,能让我们在项目中轻松实现地图加载与交互。本文将介绍如何在Vue3项目中使用OpenLayers......
  • 8.在 Vue 3 中使用 OpenLayers 加载天地图示例(多种形式)
    前言OpenLayers是一个强大的开源地图框架,可以轻松实现地图加载与操作。而Vue3则通过CompositionAPI提供了更加简洁和灵活的开发体验。本文将介绍如何在Vue3中结合OpenLayers实现对天地图的加载,包括矢量地图、卫星地图以及中文和英文标记等多种形式。环境准备在......
  • 【机器学习】机器学习的基本分类-监督学习-支持向量机(Support Vector Machine, SVM)
    支持向量机是一种强大的监督学习算法,主要用于分类问题,但也可以用于回归和异常检测。SVM的核心思想是通过最大化分类边界的方式找到数据的最佳分离超平面。1.核心思想目标给定训练数据,其中是特征向量,是标签,SVM的目标是找到一个超平面将数据分开,同时最大化分类边界的......
  • B站朝夕教育 【.NET9.0+WPF实战三类流程化业务逻辑控制】学习记录 【二】
    播放地址:20241120-.NET9.0+WPF实战三类流程化业务逻辑控制-10_哔哩哔哩_bilibili第6课使用ViewModel绑定的方式实现拖拽创建MainViewModel.cs文件1publicclassMainViewModel2{3publicObservableCollection<string>ProcessList{get;set;}=n......
  • 从零开始学习黑客技术,看这一篇就够了
    ......
  • Git-代码管理学习
    注注注:橙色字就博客自己AI创作的这个是,我可写不出来,好早之前下载了Git,但是不太会用,就知道可以管理各种py的文件,还写了一些学习的命令。(这个介绍的真不错呀,现在真的是AI占据大部分)也记录一下。使用的时候不断更新学习Git是一个版本控制系统,它用于跟踪和管理项目的文件和代码......
  • 计算机毕业设计SpringCloud+大模型微服务高考志愿填报推荐系统 高考大数据 SparkML机
    温馨提示:文末有CSDN平台官方提供的学长联系方式的名片!温馨提示:文末有CSDN平台官方提供的学长联系方式的名片!温馨提示:文末有CSDN平台官方提供的学长联系方式的名片!作者简介:Java领域优质创作者、CSDN博客专家、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO......