我们从官网,或者网上随便下载一个vue.js
自己创建一个HTML页面,并且在页面里面引入这个js
并且写上vue的格式,我们看看运行这个代码,浏览器输出是什么
以上就是一个vue框架的简单的演示。现在开始解释上面HTML里面代码的意思
const app = "来了" 这个就是定义了一个常量 ,以const定义常量
let app="来了" 这个就是定义了一个变量,以 let 定义变量
<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>