前言：

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

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

MVVM的介绍

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

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

劣势比照

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
<!-- 指定vue治理内容区域，须要通过vue展现的内容都要放到找个元素中 通常咱们也把它叫做边界 数据只在边界外部解析-->

<div id="app">{{ msg }}</div><!-- 引入 vue.js --><script src="vue.js"></script><!-- 应用 vue --><script>  var vm = new Vue({    // el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载指标    el: '#app',    // Vue 实例的数据对象，用于给 View 提供数据    data: {      msg: 'Hello Vue'    }  })</script>

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 元素的属性上

<h1>Hello, {{ msg }}.</h1><p>{{ 1 + 2 }}</p><p>{{ isOk ? 'yes': 'no' }}</p><!-- ！！！谬误示范！！！ --><h1 title="{{ err }}"></h1>

双向数据绑定 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

<!-- 示例 --><input type="text" id="txt" /><span id="sp"></span><script>var txt = document.getElementById('txt'),    sp = document.getElementById('sp'),    obj = {}// 给对象obj增加msg属性，并设置setter拜访器Object.defineProperty(obj, 'msg', {  // 设置 obj.msg  当obj.msg反生扭转时set办法将会被调用    set: function (newVal) {    // 当obj.msg被赋值时 同时设置给 input/span    txt.value = newVal    sp.innerText = newVal  }})// 监听文本框的扭转 当文本框输出内容时 扭转obj.msgtxt.addEventListener('keyup', function (event) {  obj.msg = event.target.value})</script>