Vue学习笔记（一、关于MVC和MVVM）

已于 2024-10-23 07:55:35 修改
阅读量380 收藏
点赞数 4
分类专栏： VUE 文章标签： vue.js 笔记
于 2024-10-22 11:42:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ttod/article/details/143140745
版权

一、MVC

        MVC是整个应用的分层概念，M是model层，处理数据的CRUD（Create、Read、Update、Delete），V是view是前端页面，C是Control逻辑控制。

        补充小知识：关于router.js：Vue.js中，通过Vue Router来实现前端路由（路由就是URL路径与特定代码逻辑（如组件、视图）的映射关系）管理。

二、MVVM

        MVVM是前端视图的分层开发思想，主要把每个页面分成了M、V和VM，其中VM是MVVM思想的核心，VM是M和V之间的调度者。MVVM通过VM提供了数据的双向绑定。

三、图示

vue学习笔记（一）【 MVC与MVVM的图解 】
欢迎来到我的频道~
08-04 726
（一）什么是MVC呢，说实话对于MVC，我的理解不是很好，怕误人子弟，于是我就百度了下。 （1）MVC框架： MVC （Model View Controller ），是模型（model）视图（view） 控制器（controller）的缩写。 它是一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化制定界面及用户交互的同时，不需要...
Vue 学习总结笔记 (一)
m0_67401153的博客
03-09 330
文章目录 1. Vue 的介绍 1.1 什么是Vue？ 1.2 Vue的诞生 和 特点 1.3 Vue 的引入 和 Vue devtools开发者工具 1.4 Vue 引入后浏览器端的信息处理 1.5 Vue.config 配置全局 2. MVC和MVVC的基本流程 3. Vue 的使用详解 3.1 Vue 的mvvm架构 3.2 Vue 的注意事项 (重要) 3.2.1 Vue实例对象和容器是一一对应的关系 3.2.2 开发中只有一个Vue实例 3.2.3 Vue中 {{ xxx }}
vue学习笔记--MVC、MVVM
watson_pillow的博客
10-17 202
MVC 针对整个项目 M：Model层 V：view视图层 C：controller层 MVVM 前端视图层的分层开发思想，主要把每个页面，分成了M，V和VM； VM：MVVM的核心，是M和V之间的调度者；分割了M和V；当V层需要调用/保存数据时，都需要调用VM做中间处理；VM提供了数据的双向绑定 M：保存每个页面中的单独的数据 V：每个页面的单独的html ...
vue学习笔记
porterfly的博客
03-16 395
MVVM（Model-View-ViewModel）是一种软件设计模式,是一种简化用户界面的。MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。View是视图层， 也就是用户界面Model是指数据模型， 泛指后端进行的各种业务逻辑处理和数据操控， 主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则.
Vue.js学习笔记（浅谈MVVM）
dogeggcrazy的博客
11-26 377
MVVM是M-V-VM(模型-视图-视图模型)
Vue学习笔记01 vue模板-MVVM模型-数据绑定
好好学习天天向上
03-25 1207
文章目录Vue2.0简介el / datael与data的两种写法模板语法数据绑定 v-bind/v-modelMVVM模型 Vue2.0 简介 vue是什么？ 构建用户界面的渐进式JavaScropt框架 Vue的特点 1.采用组件化模式，提高代码复用率，且让代码更好维护 2.声明式编码，让编码人员无需直接操作DOM，提高开发效率 3.使用虚拟DOM和DIff算法，尽量复用DOM节点 原生：更新之后全部重新覆盖？vue:追加式，更新不一样的 el / data el:指定当前Vue实例为哪个容器服务，通
Vue学习笔记——一、MVVM
weixin_43950643的博客
05-07 267
1. MVVM //此处 new Vue() 得到的VM实例就是MVVM中的 VM 视图，提供了双向数据绑定的能力 const vm = new Vue({ el:'#app', //此处el属性指定的元素就是MVVM中的 V 视图 data:{ //此处的data属性就是MVVM中的 M 视图 msg:'hello' } }) MVVM是一种设计思想...
vue-cli学习笔记 MVC、MVP、MVVM
Joker_DJ
04-25 420
vue-cli学习笔记Vue.js介绍MVC、MVP、MVVM1. MVC好处2. MVP3. MVVM总结 Vue.js介绍 基本概念 Vue.js 是目前最火的一个前端框架 React是最流行的一个前端框架 React除了开发网站，还可以开发手机原生App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex Vue.js 是前端的主流框架之一，和Angular.js、Rea...
Vue基础和MVC，MVP，MVVM简介
qq_41369286的博客
08-21 298
Vue.js 一、Vue基础 1 开发流程规范 与 Vue基础 1.0 前端开发流程规范 前端开发流程规范 1.1 前端框架发展历史 html html [1990]----> html5 [2008.1.12] css css 1.0 1996 css 2.0 1998 css 3.0 2001 EcmaScript 1997年诞生 2015 ...
Vue学习笔记
lskj的博客
07-08 1061
学习视频链接：B站 遇见狂神说 Vue.js是一个前端框架，三大主流前端框架之一。 一、概述 Vue是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库（如vue-router：跳转，vue-resource：通信，vuex：管理）或既有项目整合。 Vue中文官网：https://cn.vuejs.org/ 二、前端知识 前端三要素： HTML（结构）：超文本标记语言，决定网页的结
一些vue-tutorial - 《Vue学习笔记》.zip
12-02
《Vue学习笔记》是为那些希望掌握Vue.js的开发者们提供的学习材料。该教程详细介绍了Vue.js的核心概念、特性以及相关的开发技巧，让学习者能够从基础到进阶全方位地理解并应用Vue.js。 首先，教程会引导学习者认识...
【学习笔记】前端（I）—— Vue2（Ⅰ）
Eddie_hyh的博客
04-30 1013
前端第一部分：Vue（Ⅰ）
vxe-table 动态列筛选，以及筛选项动态变化的解决方案记录
Curry_On的博客
04-15 158
需求场景： 1. table 的列是由接口动态返回的； 2. 列的筛选项就是数据的值，比如【姓名】这个字段总共有三个值，那么姓名这一列的筛选项就是这三个值本身； 3. 当有一列筛选后，其他列的筛选项也要动态变化。
Vue3生命周期钩子详解
BillKu的博客
04-15 690
Vue 3 生命周期通过 Composition API 提供了更灵活的代码组织方式。理解各钩子的触发时机和用途，能帮助开发者高效处理初始化、副作用清理和性能优化。Vue 3 的生命周期钩子函数允许开发者在组件不同阶段执行特定逻辑。与 Vue 2 相比，Vue 3 在 Composition API 中引入了新名称，并废弃了部分钩子。：操作 DOM、发起异步请求、初始化第三方库。：避免在此钩子中修改状态，可能导致无限循环。：可在自定义函数内调用钩子，逻辑更内聚。最先执行，用于定义响应式数据、方法等。
【权限】v-hasPermi=“[‘monitor:job:add‘]“ 这个属性是怎么控制能不能看到这个按钮
qq_39666711的博客
04-14 388
el.parentNode && el.parentNode.removeChild(el) 这行代码的意思是，如果 el.parentNode 存在（即 el 有父节点），则从 DOM 中移除 el。这是因为在 Vue 中，使用 v-hasPermi 指令时，如果用户没有相应的权限，我们希望从 DOM 中移除这个元素，从而避免用户看到没有权限的按钮或链接。在这段代码中，el 是一个 DOM 元素，el.parentNode 是获取这个 DOM 元素的父节点。因此， 的父节点是 ，而 的父节点是 或。
前端开发 + Vue 2 + 卡片拖拽（带坐标系、左右互拖、多卡同容器）+ 学习参考
最新发布
weixin_44185995的博客
04-17 104
内容概要：本资源是基于 Vue 2 实现的卡片拖拽演示项目，深度融合坐标系机制，实现了左侧卡片区与右侧表格区的双向拖拽交互，同时支持卡片区内多卡片同容器操作。通过精准的坐标系计算，细腻地控制卡片的拖拽、定位与布局，直观呈现 Vue 2 框架下复杂交互的实现逻辑。适用人群：有 Vue 2 基础，想深入学习前端拖拽交互、坐标系应用的开发者；需在项目中集成类似功能的前端工程师；对前端交互效果实现感兴趣的技术爱好者。使用场景及目标：适用于个人技术学习、团队开发分享或项目功能预研场景。
Vue 解决 Error: please transfer a valid prop path to form item!
Aotman_的博客
04-14 315
在 Vue.js 中使用表单验证库（如 VeeValidate 或 Element UI 的表单组件时），遇到错误信息 "please transfer a valid prop path to form item!" 通常指的是在表单项的属性绑定中，路径（prop path）不正确或者未正确传递。这种问题通常出现在表单验证规则的设置或者表单项的绑定上。
用 Vue 3 + DALL·E 构建一个智能图像生成器（支持关键词推荐与图片下载）
idree的博客
04-16 1000
用 Vue 3 + DALL·E 构建一个智能图像生成器（支持关键词推荐与图片下载）
Vue初学者教程：MVVM与Express的解析
总结来说，Vue.js作为一个强大的MVVM框架，提供了高效的数据绑定和组件化功能，简化了前端开发流程。了解并掌握MVVM模式以及Vue的基本使用，是初学者迈入Vue世界的首要步骤。通过实践和学习，你可以进一步探索Vue的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值