十分钟上手vue.js helloworld-CSDN博客

本文链接：https://blog.csdn.net/mqbug/article/details/107069580

十分钟上手vue.js helloworld

我们今天这里讲的是直接在原来的项目中引入 vue.js文件，并创建一个vue的示例，简单讲讲vue在原有html页面中的应用

1、引入vue.js文件

（一）使用官网的 cdn引入
在这里插入图片描述
（二）使用hbuilder X
在使用hbuilder X新建项目时可以选 vue项目（普通模式）

在这里插入图片描述
项目路径和基础页面如图

2、新建一个 vue 实例

官方文档地址

步骤
1、在页面 body 创建一个 div 盒子绑定一个 id
2、创建一个vue 实例这里的 new Vue （V要大写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue 实例</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{msg}}
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					msg: "hello world！！！"
				}
			})
		</script>
	</body>
</html>

参数说明
el：
挂载需要vue实例的页面 DOM元素官方文档介绍
这里一般用id

data：
存放你所需要的数据官方文档介绍
这里有两种基本使用方法

data: {
	msg: "hello world！！！"
}

data() {
	return{
		msg: "hello world！！！"
	}
}

十分钟上手vue.js helloworld

十分钟上手vue.js helloworld

1、引入vue.js文件

2、 新建一个 vue 实例

2、新建一个 vue 实例