首页 > 其他分享 >《vue概念篇》vue设计思路

《vue概念篇》vue设计思路

时间:2024-01-16 10:12:52浏览次数:26  
标签:vue 绑定 视图 js 概念 思路 Model View

vue工作原理

参考链接:https://www.cnblogs.com/lishanlei/p/8423407.html
参考链接:https://www.cnblogs.com/wzfwaf/p/10553160.html

MV模式

之前,我们都是通过原生js操作dom元素,比如:获取内容、增加点击事件等,如果任务量非常大,那么我们的js代码会随着业务的增加变得臃肿,那么多逻辑,用原生js去写,是很恐怖的行为。

为了解决这种问题,有些人把js的代码做了分类,分为三个部分(把js拆成三个js),分别是Model(数据)、View(视图)、逻辑控制,其中,View部分只负责更改前端;Model部分只负责数据;逻辑控制部分负责联系上两个部分。这就是MVC、MVP、MVVM等模式的思路,只不过是逻辑部分有所不同。

无论是MVC,还是MV什么,其目的就是为了分类,将数据部分和视图部分拆解开,让代码更加清楚,更加易于维护。

MVVM

MVVM(Model-View-ViewModel),模型-视图-视图模型,是MVC的改进,由上述可知,Model是负责数据,View是负责更改前端,而ViewModel就是逻辑控制部分。

ViewModel,它有两个功能,
(1)将Model转化为View,实现方式就是数据绑定
(2)将View转化为Model,实现方式就是监听DOM
上述两个功能统称为:双向绑定

双向绑定

双向绑定,简单来说,View和Model绑定,更改一个,另一个也会随之更改。具体实现逻辑可以看看参考博客。

标签:vue,绑定,视图,js,概念,思路,Model,View
From: https://www.cnblogs.com/fusio/p/17421057.html

相关文章

  • 《vue语法篇》基础语法
    ref和$ref在Vue中,$ref是一个特殊的属性,它允许您引用组件或DOM元素。可以使用$ref属性在组件或元素上绑定一个唯一的标识符,然后在Vue实例中使用$ref来访问该组件或元素。类似于id选择器。例如,假设您有一个组件:点击查看代码<template><div><inputtype="text"ref="myI......
  • Vue实现大文件分片上传,包括断点续传以及上传进度条
    首先解释一下什么是分片上传分片上传就是把一个大的文件分成若干块,一块一块的传输。这样做的好处可以减少重新上传的开销。比如:如果上传的文件是一个很大的文件,那么上传的时间应该会比较久,再加上网络不稳定各种因素的影响,很容易导致传输中断,用户除了重新上传文件外没有其他的办法......
  • vue中render函数和h函数
    "render"函数是Vue组件的一个重要方法,它用于描述组件的视图结构,并负责渲染虚拟DOM树。"render"函数是一个JavaScript函数,它接受一个名为createElement的参数,用于创建虚拟DOM节点。这使得你可以使用JavaScript来构建虚拟DOM树,包括元素、组件、指令等,为你提供更高的灵活性。render......
  • vue知识
    v-if和v-for的比较vue组件data函数形式key的作用diff算法你了解哪些vue的性能优化方法一、v-if和v-for的哪个优先级更高,如果两个同时出现,应该怎么优化得到更好的性能在源码中发现,先处理静态节点(staticRoot),再处理once,接着才会处理for,最后处理if(看下图)结论:1......
  • vue cli使用介绍
    一、介绍VueCLI是一个基于Vue.js进行快速开发的完整系统。有三个组件:CLI:@vue/cli 全局安装的npm包,提供了终端里的vue命令(如:vuecreate、vueserve、vueui等命令)CLI服务:@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上(提供如:s......
  • Vue 项目离线安装 ArcGIS for JavaScript
    注意:arcgis-js-api在4.18及之后版本,可以通过npminstall@arcgis/[email protected]直接安装在写些博客时,npm能安装的最新版为4.28.10,下面以4.28.10为例,讲解离线安装。在vue3项目中,通过npminstall@arcgis/[email protected]安装,但默认是半本地化的,因为assests资源是通过https://js.ar......
  • vue 滚动条滚动到列表的某个区域时,将(负责的、参与的、管理的)区域的title固定到头部
    1、html1<div:id="item.id"class="list-item"v-for="(item,index)inokrTableDate":key="index">2<pclass="bold":class="{'is-fixed':isFixedFlag1&&item.id===�......
  • vue3使用 vant ui 3 如何获取组件 popup dom的高度?
    我目前使用的是vant-ui 3.1.2popup弹出层组件,我想要获取弹出层的高度来计算一些东西,但是使用常规定义refdom的方式总是无法获取,最终找到方案如下:vant-ui官方文档:https://vant-contrib.gitee.io/vant/v3/#/zh-CN/popup<template><van-popupv-model:show="show......
  • 【Vue2+3入门到实战】(18)VUE之Vuex状态管理器概述、VueX的安装、核心概念 State状态代
    目录一、[Vuex](https://vuex.vuejs.org/zh/)概述1.是什么2.使用场景3.优势4.注意:二、需求:多组件共享数据1.创建项目2.创建三个组件,目录如下3.源代码如下三、vuex的使用-创建仓库1.安装vuex2.新建`store/index.js`专门存放vuex3.创建仓库`store/index.js`4在main.j......
  • Spring解决泛型擦除的思路不错,现在它是我的了。
    你好呀,我是歪歪。Spring的事件监听机制,不知道你有没有用过,实际开发过程中用来进行代码解耦简直不要太爽。但是我最近碰到了一个涉及到泛型的场景,常规套路下,在这个场景中使用该机制看起来会很傻,但是最终了解到Spring有一个优雅的解决方案,然后去了解了一下,感觉有点意思。和你......