<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue基本格式</title>
<!-- 第一步：导入vue的包 -->
<script src="../lib/js/vue.js"></script>
</head>
<body>
<!-- 将来 new 的vue 实例，会控制这个元素中的所有内容 -->
<!-- Vue 实例所控制的这个元素区域，就是我们 MVVM 中的 V -->
<div id = 'app'>
<h1> {{ msg }}</h1>
</div>
<script>
// 第二步：创建一个vue实例
// new 出来的这个 vm 对象，就是MVVM中的 VM 调度者
const vm = new Vue({
el:'#app', //表示当前我们new的这个vue实例，要控制页面的那个区域
//这里的data就是MVVM中的 M (model)，专门用来保存每个页面的数据
data:{ // data 属性中，存放的是 el 中要用到的数据
msg:'欢迎学习Vue' //通过vue提供的指令，很方便就能把数据渲染到页面上
}
})
</script>
</body>
</html>