基于Vue3+Vite+TS，二次封装element-plus业务组件吾爱fen享 vue3

前言： download：基于Vue3+Vite+TS，二次封装element-plus业务组件

复制下载课程：https://www.97yrbl.com/t-979.html

MVVM的介绍 MVVM，一种更好的UI模式解决方案

从Script到Code Blocks、Code Behind到MVC、MVP、MVVM - 科普 MVC M: Model 数据模型（专门用来操作数据，数据的CRUD） V：View 视图（对于前端来说，就是页面） C：Controller 控制器（是视图和数据模型沟通的桥梁，用于处理业务逻辑） MVVM组成 MVVM ===> M / V / VM M：model数据模型 V：view视图 VM：ViewModel 视图模型

优势对比 【基于Vue3+Vite+TS，二次封装element-plus业务组件吾爱fen享】MVC模式，将应用程序划分为三大部分，实现了职责分离
在前端中经常要通过 JS代码来进行一些逻辑操作，最终还要把这些逻辑操作的结果现在页面中。也就是需要频繁的操作DOM
MVVM通过数据双向绑定让数据自动地双向同步
`V（修改数据） -> M
M（修改数据） -> V`
数据是核心
Vue这种MVVM模式的框架，不推荐开发人员手动操作DOM
Vue中的MVVM
虽然没有完全遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例
学习Vue要转化思想
不要在想着怎么操作DOM，而是想着如何操作数据！！！
起步 - Hello Vue
安装：npm i -S vue

{{ msg }}

Vue实例
注意 1：先在data中声明数据，再使用数据
注意 2：可以通过 vm.$data 访问到data中的所有属性，或者 vm.msg

var vm = new Vue({ data: { msg: '大家好，...' } })vm.$data.msg === vm.msg // true

数据绑定最常用的方式：Mustache(插值语法)，也就是 {{}} 语法
解释：{{}}从数据对象data中获取数据
说明：数据对象的属性值发生了改变，插值处的内容都会更新
说明：{{}}中只能出现JavaScript表达式而不能解析js语句
注意：Mustache 语法不能作用在 HTML 元素的属性上

Hello, {{ msg }}.{{ 1 + 2 }} {{ isOk ? 'yes': 'no' }}

双向数据绑定 Vue two way data binding
双向数据绑定：将DOM与Vue实例的data数据绑定到一起，彼此之间相互影响
数据的改变会引起DOM的改变
DOM的改变也会引起数据的变化
原理：Object.defineProperty中的get和set方法
getter和setter：访问器
作用：指定读取或设置对象属性值的时候，执行的操作

Vue - 深入响应式原理 MDN - Object.defineProperty() /*defineProperty语法介绍 */ var obj = {} Object.defineProperty(obj, 'msg', { // 设置 obj.msg = "1" 时set方法会被系统调用参数分别是设置后和设置前的值 set: function (newVal, oldVal) {}, // 读取 obj.msg 时get方法会被系统调用 get: function ( newVal, oldVal ) {} })

Vue双向绑定的极简实现
剖析Vue原理&实现双向绑定MVVM