我们从官网,或者网上随便下载一个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>