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