Vue的学习（二）一个简单的案例，带你进入Vue.js

一写代码就开心

发布于 2020-11-24 11:41:23

5030

发布于 2020-11-24 11:41:23

文章被收录于专栏：java和python

我们从官网，或者网上随便下载一个vue.js

自己创建一个HTML页面，并且在页面里面引入这个js

并且写上vue的格式，我们看看运行这个代码，浏览器输出是什么

以上就是一个vue框架的简单的演示。现在开始解释上面HTML里面代码的意思

解释代码

script里面定义变量和常量

const  app = "来了"     这个就是定义了一个常量  ，以const定义常量
let  app="来了"     这个就是定义了一个变量，以 let 定义变量

引入js

<script src="../js/vue.min.js"></script>

以上就是在HTML 页面里面导入了vue的 js。这个js里面有一个类Vue.并且我们使用的时候要创建这个vue类的对象。这个vue类里面有很多的参数，我们创建对象的时候要传参。

为什么要创建vue的对象

因为使用的是人家vue的框架，所以引入人家的东西之后，要按照人家的规范进行使用，所以要创建对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">{{message}}</div>
		<script src="../js/vue.min.js"></script>
		
		<script>
			创建vue的对象,将对象赋值给常量,以const定义常量.创建对象里面要传入参数
			const app = new Vue({
				el: '#app',   用于挂载需要管理的元素,我们自己创建了一个div,现在就要用vue管理我们创建的div.用el这个属性 和div产生联系
				data: {  这个属性里面就是定义数据,里面是以键值对的形式  进行创建数据,之后我们就可以在div里面拿到这个里面的数据
					message: '你好啊'
				}	
			})
			
		</script>
	</body>
</html>