Vue起步创建一个实例

最新推荐文章于 2025-07-04 16:14:06 发布

原创最新推荐文章于 2025-07-04 16:14:06 发布 · 818 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue

日志专栏收录该内容

51 篇文章

订阅专栏

本文介绍Vue.js的安装方法，包括直接引入和使用NPM安装。并详细讲解如何创建首个Vue实例，通过实例深入理解MVVM模型，即数据模型（data）、视图（模板语法）及视图模型（Vue实例）。

1、script中直接引入

引入之后vue会被注册为一个全局变量
注：建议在开发时不要使用压缩版本，这样会没有错误的提示

2、使用NPM安装

$ npm install vue
//简写为
$ npm i vue

在这里插入图片描述
?更多安装方式

创建第一个实例

var vm = new Vue({
  // 配置选项
})

vue是遵循MVVM模型的

MVVM解释：

//MVVM中的M（数据模型），即data
let vm=new Vue({
	//el与页面关联
	el:"#app",
	data:{
		//视图中的数据
		msg:"hello Vue";
	}
});

//MVVM中的V（视图），即静态展示给用户的
<div id="app">
    <h1>{{msg}}</h1>
</div>

//MVVM中的VM（视图模型），即Vue实例vm
let vm=new Vue({
	el:"#app",
	data:{
		//视图中的数据
		msg:"hello Vue";
	}
});