VUE学习：vue基础01——创建vue实例_基础vue实例创建-优快云博客

本文链接：https://blog.youkuaiyun.com/GAlbinus/article/details/116949512

本文介绍Vue框架的基础知识，包括MVVM开发模式的概念及其与MVC的区别，并通过具体示例演示了如何创建Vue实例，实现数据双向绑定及事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：
本文为VUE栏目：VUE学习：vue基础01——创建vue实例

VUE学习：vue基础01——创建vue实例

前言
VUE

前言

本文第一次尝试学习vue框架。

提示：以下是本篇文章正文内容，下面案例可供参考

VUE

MVC和 MVVM开发模式

MVC开发模式

M：model模型层数据和编程语言之间建模

V：view视图层一般都是用模板引擎来表示（前台页面）

C：Controller控制层控制请求的转发（接收参数，转发处理结果，一般不做逻辑判断和数据库处理）

MVVM开发模式（前后端分离）

M：model模型层

VM层：viewModel层视图模型层，用来在前端处理控制和转发

V：view层

vue 实例

创建vue实例

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" id="username" name="username" v-model="msg" placeholder="请输入用户名">
        <p id="text" v-on:click="show" v-bind:title="info">{{msg}}</p>
    </div>
</body>
</html>

<script>
    let vm = new Vue({
        el: "#app",     /*指定Vue绑定容器*/
        data: {         /*设置Vue可操作的数据内容*/
            msg:"今天学习Vue,很开心",
            info:"别看我，看他"
        },
        methods:{
            show:function () {
                alert("vue绑定的单击事件");
                this.msg="vue控制data的值";

            }
        }
    });
</script>