Vue MVVM 模型-编程知识

Vue MVVM 模型

一、什么事MVVM 模型

MVVM 是 Model-View-ViewModel 的缩写，它是一种软件架构风格

Model：模型，数据对象（data 函数），如下图

View：视图，模板页面（用于渲染数据）

ViewModel：视图模型，其实本质上就是 Vue 实例，例如app实例

图解如下图：

举个例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue模版语法</title>
</head>
<body><!--1.声明一个根节点：vue管理dom的入口2.引入vue.js库文件3.编写vue.js代码--><!--2.引入vue.js库文件--><div id="app">{{ msg }}<input v-model="msg"></div><!--1.声明一个根节点：vue管理dom的入口--><script src="./node_modules/vue/dist/vue.global.js"></script><!--3.编写vue.js代码，要在上面引用vue3库--><script type="text/javascript">// 在vue.global.js 导出了Vue 实例，他向外暴露了很多方法const { createApp } =Vue;//不要加单引号，首字母大写// 通过导入的createApp 创建一个应用实例const app=createApp({//传递一个对象{}//data选项，必须是函数，返回一个对象，在这个返回对象中的属性就是对应要vue中要使用data(){return{msg: 'hello,vue3'//声明一个变量}}}).mount('#app');console.log("app",app);</script>
</body>
</html>

运行效果：

Vue模版语法 - Google Chrome 2023-10-06 09-36-48