Vue_ElementUI之3_vue实例对象_vue3 中使用vue对象-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_47572402/article/details/113790224

本文面向前端初学者，深入解析Vue实例对象的概念和用法，通过实例展示数据双向绑定。主要内容包括Vue实例的创建、数据操作及实例选项如data、el、props和methods。示例代码展示了如何在HTML中使用Vue实例更新视图。

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

本文适用于Web入门级或偏中级前端爱好者等，内容是作者在51CTO的学习笔记，提交于github，有时候也没时间更新优快云，github对于部分同学可能也有一定的难度，本着开源的精神，较入门偏引导的小篇幅学习资料进行分享，希望对大家有帮助，也感谢大家的三联，我们走起！学到知识就好哦！知识版权申明，本知识体系是51CTO某位老师的课程，鉴于老师已在51CTO取得收益，故我不再进行版权申明和导流并作为知识技能分享，也希望老师看到能理解。

Vue实例对象概念

Vue程序核心是Vue实例对象，即ViewModel，Vue对象连接视图层（HTML页面）和模型层（数据），ViewModel进行数据双向绑定，View动作触发→DOM Listeners→Model，Model变化→Data Bindings→View更新。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue实例对象</title>
</head>
<body>

<!--DOM-->
<div id="app">
<span>span.name={{name}}</span>
<br>
<span>span.age={{age}}</span>
</div>

<!--引入vue-->
<script src="../js/vue.js"></script>

<!--javascript-->
<script>
<!--vue&javascript-->
	var data={
	name:'xu',
	age:20
};
	var vm=new Vue({
	el:'#app',
	data:data
});
	console.log(vm);
</script>
</body>
</html>