Vue.js之MVVM设计模式

news/2024/10/20 7:16:42/

前言

看到招聘信息网站上有对MVVM框架经验的需求，刚好曾有过这方面的笔记，在复习的同时总结核心知识点分析给大家。
MVVM是可以实现View和Model的完全分离，通过ViewModel这个桥梁进行交互，然后ViewModel通过双向数据绑定把View层和Model层连接起来，而View层和Model层之间的通信则完全由ViewModel负责。

vuejs_5">一、MVC设计模式与MVVM设计模式，vue.js>vue.js

1、什么是MVC设计模式

MVC是一种最早出现的软件架构模式，它将应用程序的输入、处理和输出明确地划分为三个部分，使得业务逻辑、数据和界面显示可以独立地进行开发、测试和维护。其中MVC指的是Model（模型）、View（视图）、Controller（控制器）

2、为什么还需要MVVM设计模式

在MVC中，Controller负责处理用户输入，并更新Model和View。View被动地接受Controller传来的数据，并显示给用户。而在MVVM中，ViewModel是连接Model和View的桥梁，它实现了View和Model的双向绑定,当Model中的数据变化时，View会自动更新；同样，View中的数据变化也会反映到Model中。所以它比MVC更容易实现复杂的用户界面和数据交互。

vue_15">二、使用vue框架

vue框架的好处可以不用自己完成复杂的DOM操作了，而由框架帮我们去完成，同时可以使用组件化开发,子组件与父组件之间可以通过触发事件进行通信，从而改变数据，可以使我们很好的复用代码。

1、使用html，js，css在线运行代码

使用链接在线访问vue.global.js或者安装下载vue.global.js在本地项目中
如果想要切换版本

  • 链接：切换版本
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.global.js"></script>
</head>
<body><div id="app">{{message}}<input type="text" v-model="message"></div><script>javascript">let app=Vue.createApp({data(){return{message: 'hello world'}}})let vm=app.mount('#app')</script>
</body>
</html>

2、选项式API

javascript">let vm=createApp({//选项methods:{},computed:{},watch:{},data(){},mounted(){},
}).mount('#app');

3、声明式渲染

声明式渲染是Vue.js等前端框架的核心概念之一。它意味着开发者只需描述数据应该如何渲染，而不需要手动操作DOM来更新视图。其中messgae可以是js表达式，如字符串，数组，方法

<body><div id="app">{{message}}</div><script>javascript">let vm = Vue.createApp({data() {return {message: 'hello world'}}}).mount('#app')setTimeout(()=>{vm.message='world hello'},1000)</script>
</body>
  • proxy内置对象

vm.message利用的原理是Es6的Proxy对象对底层进行监控
Proxy 用于创建一个对象的代理，从而实现对目标对象某些操作的拦截和自定义。比如：
拦截和自定义操作：使用 Proxy 来拦截对目标对象的各种操作，并在这些操作发生时执行自定义代码。
验证和转换：利用 Proxy 来确保目标对象的属性总是符合某些条件，或者在读取或设置属性时执行某些转换。
日志和调试：通过 Proxy，记录对目标对象的所有操作

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.global.js"></script>
</head><body><div id="app">{{message}}</div><script>javascript">let data={message:'hello world'};data=new Proxy(data,{// 发生改变时触发setset(target,key,value){console.log(target, key, value,'set')app.innerHTML = value},// 默认执行getget(target){console.log(target.message,'get')return target.message}})app.innerHTML= data.messagesetTimeout(() => {data.message = 'world hello'}, 1000)</script>
</body></html>

4、指令系统与事件方法及传参处理

常用指令的有v-if,v-else,v-else-is,v-for,v-show,v-on,v-bind,v-model,v-html等,
v-bind:title相当于:title,v-on:click相当于@click

  • 事件方法

methods选项向组件实例添加方法，Vue自动为methods 绑定this，以便于它始终指向组件实例

  • 传参处理

Vue帮我们处理好了如何进行事件传参处理，提供了内部的$event语法来获取event对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.global.js"></script>
</head>
<body><div id="app"><div :title="message" :class="className" @click="handleClick($event,123)">{{message}}</div></div><script>javascript">let vm=Vue.createApp({data(){return {message: '点击一下有惊喜',className: 'box'}},methods: {handleClick(event,num){this.message='hello world';console.log(event,num,'event,num')}}}).mount('#app')</script>
</body>
</html>

5、计算属性

split(' ').reverse().join(' ')使用空格将字符串变成数组，然后数组顺序颠倒，最后转回字符串类型如。

  • 计算属性computed

调用方法时，若写在methods里需要再方法后加上(),如果是写在computed里，直接写上方法名即可调用

//methods
handleClick()
//computed
handleClick
  • 计算属性与方法相比

具备缓存的能力，而方法不具备缓存，在依赖的数据未改变时，即使调用了两次相同方法，计算属性只执行一次，而在methods里会执行两次。且计算属性只读取不能修改，要想修改，得修改最终依赖的东西。

  • 计算属性原理

计算属性虽然是对象方法，但是以属性的方式进行使用，并且默认是只读的

6、侦听器watch

  • 原理

侦听器是在监听的属性发生改变的时候才会触发，初始时是不会触发的

wathc:{message(newVal,oldVal){console.log(newVal,oldVal);}
}
  • 侦听器与计算属性区别

计算属性适合:多个值去影响一个值的应用;而侦听器适合:一个值去影响多个值的应用,
同时侦听器支持异步的程序，而计算属性不支持异步的程序。
如计算一个加法，由两个变量得出加法的和，这是就需要用到计算属性，而侦听器一般是在异步加载请求后，对后端返回的api进行处理。

7、条件渲染v-if

条件渲染:使用v-if指令条件性地渲染一块内容。这块内容只会在指令的表达式返回真值的时候被渲染。
同时被认为是假值fasle的有（false,0,空字符串，null,undefined和NaN ),
注意：空数组（[]）在布尔上下文中会被转换为true，因为数组对象总是真值，但是可以使用arr.length来判断

8、 列表渲染v-for

  • v-for用法

v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item 则是被迭代的数组元素的别名。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.global.js"></script>
</head><body><div id="app"><!-- key是用来跟踪每一个遍历项的身份 --><div v-for="item,index in list" :key="index">{{item}}{{index}}</div><div v-for="value,key,index in info">{{value}}{{key}}{{index}}</div><div v-for="item in test">{{item}}</div><!-- num类型和字符串也可以遍历，数字从1开始到num，字符串逐步返回单个字符类型 --></div><script>javascript">let vm = Vue.createApp({data() {return {list:['a','b','c'],info:{username:'小明',age:20},test:'hello world'}}}).mount('#app')</script>
</body></html>
  • 注意v-for不建议与v-if同时使用，可以使用计算属性来实现
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.global.js"></script>
</head><body><div id="app"><div v-for="item,index in updateList" :key="index">{{item.str}}{{index}}</div></div><script>javascript">let vm = Vue.createApp({data() {return {list:[{id:1, str:'a'},{id:2, str:'b'},{id:3, str:'c'},],}},computed:{updateList(){return this.list.filter((v)=>v.id%2 ===1)}}}).mount('#app')</script>
</body></html>
  • 在vue中，通常v-for，v-if通常是在template上使用，

9、calss和style的三种使用方式

1)、class的三种使用方式

  • 对象语法

通过绑定一个对象到:class，你可以动态地切换class。

<div :class="isActive ? 'active-class' : 'inactive-class'"></div>
<script>javascript">export default {data() {return {isActive: true};}};
</script>
  • 数组语法

将一个数组绑定到:class，以应用一个类列表。数组中的每个元素都会是一个类名。
在这个class绑定的例子中，isActive为true时，active类会被添加，而base-class则始终被添加
这个三元表达式只会判断isActive ? 'active' : '',

<template><div :class="[isActive ? 'active' : '', 'base-class']"></div>
</template>
<script>javascript">
export default {data() {return {isActive: true};}
};
</script>
  • 在组件上使用

当在Vue组件上使用class时，可以直接在组件标签上添加静态的class，同时使用:class来动态绑定。

<template><my-component :class="isActive ? 'active-class' : 'inactive-class'"></my-component>
</template>

2)、style的三种使用方式

与calss用法相似

  • 对象语法
<template><div :style="{ color: isActive ? 'aqua' : 'pink' }">Hello world</div>
</template>
<script>javascript">
export default {data() {return {isActive: true};}
};
</script>
  • 结合数组和对象语法
<template><div :class="[isActive ? 'active' : '', 'base-class']"></div>
</template>
<script>javascript">
export default {data() {return {isActive: true};}
};
</script>
  • 在组件上使用
<template><my-component :style="{ color: isActive ? 'aqua' : 'pink' }"></my-component>
</template>

3)、数组语法的demo

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.global.js"></script><style>.box1{background: aqua;}.box2{color: rebeccapurple;background: orange;}</style>
</head><body><div id="app"><div :class="myClass">123</div></div><script>javascript">let vm = Vue.createApp({data() {return {myClass:['box1','box2']}}}).mount('#app')setTimeout(()=>{//删除数组的最后一项vm.myClass.pop();},2000)</script>
</body></html>

10、表单处理与双向绑定

  • 实现双向绑定一般做法
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.global.js"></script>
</head><body><div id="app"><input type="text" :value="message" @input="message=$event.target.value"></div><script>javascript">let vm = Vue.createApp({data() {return {message: 'hello world'}}}).mount('#app')setTimeout(() => {vm.message='world hello'}, 2000)</script>
</body></html>
  • v-model也能实现双向绑定

在Vue中是通过v-model指令来操作表单的，可以非常灵活的实现响应式数据的处理
v-model本质上不过是语法糖。可通过value属性+input或change事件来实现同样的效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.global.js"></script>
</head><body><div id="app"><input type="text" v-model="message"></div><script>javascript">let vm = Vue.createApp({data() {return {message: 'hello world'}}}).mount('#app')setTimeout(() => {vm.message='world hello'}, 2000)</script>
</body></html>
  • checkbox,radio表单类型

表单为checkbox,多选框，radio单选框时，v-modal绑定相同属性

  • select下拉选项
<body><div id="app"><select v-model="city"><option value="成都">成都</option><option value="重庆">重庆</option><option value="北京">北京</option></select>{{city}}</div><script>javascript">let vm = Vue.createApp({data() {return {city:'北京'}}}).mount('#app')</script>
</body>

11、生命周期构子函数及原理分析

生命周期钩子

初始化实例触发顺序钩子
beforeCreate此时还不能访问到数据和 DOM，响应式数据页拿不到
created在实例创建完成后被立即调用。响应式数据页可以拿到但是此时还是不能访问到数据和 DOM，
beforeMount在挂载开始之前被调用：相关的 render 函数首次被调用。此时，虚拟 DOM 已经创建完成，但还没有挂载到真实的 DOM 上
mounted此时都能拿到响应式数据和DOM

更新数据时触发
beforeUpdate 在更新数据的时候会触发的生命周期,不能拿到更新后的内容
updated在更新数据后 会触发的生命周期，能拿到更新后的内容

不常用
activatedkeep-alive 组件激活时调用。
deactivatedkeep-alive 组件停用时调用。

卸载实例时触发
beforeUnmount组件实例卸载之前调用。在这一步，实例仍然完全可用。
unmounted组件实例卸载后调用,所有的事件监听器都会被移除，所有的子实例也会被销毁。

不常用
errorCaptured当捕获一个来自子孙组件的错误时被调用。
此钩子会接收三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上冒泡。
renderTracked在响应式依赖被追踪时调用。
renderTriggered在响应式依赖发生改变并导致组件重新渲染时被调用。

12、扩展JavaScript里的fetch函数使用

用于在浏览器中进行网络请求，它提供了一种简单、合理的方式来跨网络异步获取资源。fetch 返回的是一个 Promise 对象，通常用.then() 或async/await 来处理它的响应，默认不发送或接收 cookies。
fetch()发送请求里可以请求的 URL、请求方法和请求JSON数据

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.global.js"></script>
</head><body><div id="app"><ul><li v-for="item in filterList" :key="item.id">{{item.name}}</li></ul></div><script>javascript">let vm = Vue.createApp({data() {return {list: []}},created() {fetch('./test.json')// 解析响应体为 JSON.then((res) => res.json()).then((res) => {this.list = res})},computed:{filterList(){return this.list}}}).mount('#app')</script>
</body></html>

[{"id": 1,"name": "小明","gender": "女","age": 20},{"id": 2,"name": "小强","gender": "男","age": 18},{"id": 3,"name": "大白","gender": "女","age": 25},{"id": 4,"name": "大红","gender": "男","age": 22}
]

javascript_696">13、javascript中解构对象使用

javascript"><script>const obj = {name: 'yibo',age: 25,gender: 'female'};const { gender, ...newObj } = obj;console.log(obj,'obj'); // [ 'name', 'age', 'gender' ]console.log(newObj,'newObj'); // [ 'name', 'age']console.log(gender,'gender')</script>

javascriptfilter_712">14、javascript中filter过滤

filter() 方法遍历数组的每个元素，并返回一个新数组，其中只包含那些使得提供的函数返回 true 的元素。
经常用于过滤筛选不需要的值

javascript">this.list.filter((v)=>v.id%2 !==2)

15、v-for中处理特殊项

<div v-for="(item, index) in items" :key="index"><div v-if="item.special" :class="{ 'special-item': true }"><!-- 特殊项的处理方式 -->{{ item.name }} (with special feature)</div><div v-else><!-- 普通项的处理方式 -->{{ item.name }}</div>
</div><style>.special-item {color: red;font-weight: bold;}
</style>

http://www.ppmy.cn/news/1435866.html

相关文章

vsCode 配置 用户代码

vsCode 配置 用户代码

适当配置自己的代码片段 , 减少coding 时间 &#xff0c; 释放copy双手 小白值得学习 配置方法 左下脚设置 --》 用户代码片段 -- 》 输入你需要配置的文件(比如输入jsx/vue) &#xff0c;回车 编辑 -- 》 编辑示例参数 以及坑点 {"Print to console": {// &q…
阅读更多...
OllyDbg 快捷键及常用法

OllyDbg 快捷键及常用法

keywords: debug, ollydbg 快捷键 Ctrl --> C Shift --> S Alt --> M 功能快捷键设置/取消断点F2执行到光标所在行F4步过F8步进F7运行F9暂停F12回到应用层M-F9打开文件F3重新调试C-F2打开应用程序输入表C-n寻找表达式C-g打开断点窗口M-b切换断点状态空格添加备注…
阅读更多...
【IDEA】在IntelliJ IDEA中导入Eclipse项目：详细指南

【IDEA】在IntelliJ IDEA中导入Eclipse项目：详细指南

IntelliJ IDEA和Eclipse是两款常用的集成开发环境&#xff08;IDE&#xff09;&#xff0c;在软件开发中经常会遇到需要在它们之间迁移项目的情况。本文将重点介绍如何在IntelliJ IDEA中导入Eclipse项目&#xff0c;以帮助开发者顺利地迁移他们的项目&#xff0c;并在IntelliJ …
阅读更多...
BBED 安装

BBED 安装

–11G-23C 安装使用相同 1、解压 [root11g-fs oraback]$ unzip linux_bbed.zip [root11g-fs oraback]# cd linux_bbed/ [root11g-fs linux_bbed]# ll total 32 -rw-rw-r--. 1 root root 8704 Apr 20 2010 bbedus.msb -rw-rw-r--. 1 root root 10270 Jul 26 2000 bbedus.ms…
阅读更多...
基于STM32的蓝牙小车(虚拟串口模拟）的Proteus仿真

基于STM32的蓝牙小车(虚拟串口模拟）的Proteus仿真

文章目录 一、前言二、仿真图1.要求2.思路3.画图3.1 电源部分3.2 超声波测距部分3.3 电机驱动部分3.4 按键部分3.5 蓝牙部分3.6 显示屏部分3.7 整体 4.仿真5.软件 三、总结 一、前言 proteus本身并不支持蓝牙仿真&#xff0c;这里我采用虚拟串口的方式来模拟蓝牙控制。 这里给…
阅读更多...
Nginx代理MinIO时出现“Access Denied“错误

Nginx代理MinIO时出现“Access Denied“错误

MinIO与Nginx集成时&#xff0c;如果出现"Access Denied"错误&#xff0c;通常意味着Nginx代理的请求没有被正确地转发到MinIO服务。 出现错误&#xff1a; <Error><Code>AccessDenied</Code><Message>Access Denied.</Message><…
阅读更多...
【第3节】“茴香豆“：搭建你的 RAG 智能助理

【第3节】“茴香豆“：搭建你的 RAG 智能助理

目录 1 基础知识1.1.RAG技术的概述1.2 RAG的基本结构有哪些呢&#xff1f;1.3 RAG 工作原理&#xff1a;1.4 向量数据库(Vector-DB )&#xff1a;1.5 RAG常见优化方法1.6RAG技术vs微调技术 2、茴香豆介绍2.1应用场景2.2 场景难点2.3 茴香豆的构建&#xff1a; 3 论文快读 1 基础…
阅读更多...
Java从坚持到精通-SpringAI

Java从坚持到精通-SpringAI

1.加入坐标 2.项目配置 如上图&#xff0c;SpringAI需要api-key和base-url&#xff0c;都是需要科学上网才可以。 3.编写方法 直接注入OpenAIChatClient对象即可&#xff0c;高版本springboot已经自动装配了。 然后调用该方法的call方法&#xff0c;表示发送请求。 4.生成图…
阅读更多...
最新文章

Copyright @ 2022~2023