Vue MVVM 模型

news2024/10/6 10:37:04

一、什么事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