<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--app元素是用于挂载的一个节点-->
<div id="app">
<!--Vue语法使用的是两个中括号{{}}-->
<h1>{{message}}</h1>
<h2>{{name}}</h2>
</div>
</body>
<script type="text/javascript">
//实例化的Vue
//①Vue的V是大写的
//②new的Vue是一个对象类型
//基于ES6语法，let（变量） const（常量）
//var没有变量作用域的概念
//传统的JS编程：命令式编程，由指令提供，一步到下一步
//Vue是一种声明式的编程范制
//Vue实现了数据和页面的完全分离
//响应式；当数据发生改变之后，页面会随着改变
let app = new Vue({
//绑定节点属性
el: ‘#app’,
//设置数据属性
data:{
//赋值给message，message是一个赋值变量
message:’hello Vue’,
name:’梁凯达’
}
})
//Vue实例中，代码做了什么事
//创建了Vue对象的时候，传入了一些Option:{}
//{}中包含了el属性：该属性决定了这个Vue对象挂载在哪个元素上
//{}中包含了data属性：该属性通常用于存储一些数据
//√这些数据是可以直接定义出来的，比如像上面这样
//也可能来自网络，从服务器加载的
</script>
</html>
