VUE L MVVM模型 ③

SYFStrive

已于 2023-06-24 11:30:47 修改

阅读量1.2k

点赞数

分类专栏： VUEJS 文章标签： vue.js javascript 前端前端框架

于 2023-06-20 22:14:25 首次发布

本文链接：https://blog.csdn.net/m0_61490399/article/details/129951670

版权

VUEJS 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

文章有误请指正，如果觉得对你有用，请点三连一波，蟹蟹支持✨

                    ⡖⠒⠒⠒⠤⢄⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸   ⠀⠀⠀⡼⠀⠀⠀⠀ ⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢶⣲⡴⣗⣲⡦⢤⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠋⠉⠉⠓⠛⠿⢷⣶⣦⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠇⠀⠀⠀⠀⠀⠀⠘⡇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡞⠀⠀⠀⠀⠀⠀⠀⢰⠇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡴⠊⠉⠳⡄⠀⢀⣀⣀⡀⠀⣸⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠰⠆⣿⡞⠉⠀⠀⠉⠲⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠈⢧⡀⣀⡴⠛⡇⠀⠈⠃⠀⠀⡗⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣱⠃⡴⠙⠢⠤⣀⠤⡾⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⣇⡼⠁⠀⠀⠀⠀⢰⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣸⢠⣉⣀⡴⠙⠀⠀⠀⣼⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡏⠀⠈⠁⠀⠀⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠀⠀⠀⠀⠀⠀⡼⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⣰⠃⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣀⠤⠚⣶⡀⢠⠄⡰⠃⣠⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢀⣠⠔⣋⣷⣠⡞⠀⠉⠙⠛⠋⢩⡀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀
⠀⡏⢴⠋⠁⠀⣸⠁⠀⠀⠀⠀⠀ ⠀⣹⢦⣶⡛⠳⣄⠀⠀⠀⠀⠀
⠀⠙⣌⠳⣄⠀⡇   不能   ⡏⠀⠀  ⠈⠳⡌⣦⠀⠀⠀⠀
⠀⠀⠈⢳⣈⣻⡇   白嫖 ⢰⣇⣀⡠⠴⢊⡡⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠳⢿⡇⠀⠀⠀⠀⠀⠀⢸⣻⣶⡶⠊⠁⠀⠀
⠀⠀⠀⠀⠀⢠⠟⠙⠓⠒⠒⠒⠒⢾⡛⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣠⠏⠀⣸⠏⠉⠉⠳⣄⠀⠙⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⡰⠃⠀⡴⠃⠀⠀⠀⠀⠈⢦⡀⠈⠳⡄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣸⠳⣤⠎⠀⠀⠀⠀⠀⠀⠀⠀⠙⢄⡤⢯⡀⠀⠀⠀⠀⠀⠀
⠀⠐⡇⠸⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡆⢳⠀⠀⠀⠀⠀⠀
⠀⠀⠹⡄⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠸⡆⠀⠀⠀⠀⠀
⠀⠀⠀⠹⡄⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⡀⣧⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢹⡤⠳⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣷⠚⣆⠀⠀⠀⠀
⠀⠀⠀⡠⠊⠉⠉⢹⡀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡎⠉⠀⠙⢦⡀⠀
⠀⠀⠾⠤⠤⠶⠒⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠒⠲⠤⠽

提示：以下是本篇文章正文内容

$V u e j s$

简介： Vue 是一套用于构建用户界面的 渐进式 框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官方

中文： https://cn.vuejs.org/
英文： https://vuejs.org/
Vue2API : https://v2.cn.vuejs.org/
Vue2 相关包： https://github.com/vuejs/awesome-vue
Vue2 入门安装官方：https://v2.cn.vuejs.org/v2/guide/installation.html
Vue 相关插件： https://awesomejs.dev/for/vue/

$M VV M$ 模型

理解：在vue中，mvvm模式分别是模型层（m）、视图层（v）和 ViewModel（vm）；MvvM支持双向绑定，当m层数据进行修改时，vm层会检测到变化，并且通知v层进行相应的修改，反之修改v层会通知m层进行修改，实现了视图与模型层的相互解耦。

M：模型(Model) ：对应data中的数据
V：视图(View) ：模板代码
VM：视图模型(ViewModel) ： Vue实例对象
MVVM ： https://zh.wikipedia.org/wiki/MVVM

在这里插入图片描述

代码演示 🎊

	<!-- 
		MVVM的理解：
				1. M：模型(Model) ：对应data中的数据
				2. V：视图(View) ：模板代码
				3. VM：视图模型(ViewModel) ： Vue实例对象
	-->

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>MVVM模型</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>Hello，{{msg}}</h2>
		<h2>地址是：{{address}}</h2>
	</div>

	<script type="text/javascript">

		//创建一个VUe实例对象
		const vm = new Vue({
			el: '#root',
			data: {
				msg: 'OpenAI',
				address: '美国加州旧金山'
			}
		})

		//观察发现：通过vm能看到data中的属性（注意不是看到data）
		setTimeout(() => {
			console.log(vm.msg) //通过vm可以读取data中的数据
			vm.msg = 'OpenAIs' //通过vm可以修改data中的数据，且修改后页面会自动更新
		}, 1000)

	</script>
</body>

</html>

Data与El的2种写法

代码演示 🎊

	<!-- 
		data与el的2种写法：
				1.el有2种写法：
						(1).new Vue时候直接传递el属性 ---- 常用
						(2).先new Vue 再通过vm.$mount('#root')指定el属性 ---- 不常用
				2.data有2种写法：
						(1).对象式: 非组件化编码时可以写对象，也可以写函数。
						(2).函数式：组件化编码必须使用函数式的data。
		Vue中的一个最最重要的原则：
				由Vue所调用的函数，都不要写成箭头函数，一旦写了箭头函数，this就不对了(或许是undefined，或许是Window)
	-->

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>data与el的2种写法</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>Hello，{{name}}</h2>
		<h2>地址是：{{address}}</h2>
	</div>

	<script type="text/javascript">
		//el的第一种写法(常用)————new Vue时直接指定el的值
		/* new Vue({
			el:'#root',
		}) */

		//el的第二种写法(不常用)————先new Vue，后期通过vm.$mount(el)指定el的值
		/* const vm = new Vue({
		})
		vm.$mount('#root') */


		//data的第一种写法，data是一个对象
		/* new Vue({
			data:{
			}
		})  */

		//data的第二种写法，data是一个函数，且要返回数据对象 （组件中必须用函数式data）
		new Vue({
			el: '#root',
			data() {
				return {
					name: "openai",
					address: '美国加州旧金山'
				}
			}
		})

	</script>
</body>

</html>