传统方式
在真实的项目中，数据是通过ajax获取，然后显示到页面上，这里 忽略ajax部分（后面讲解），这里只是将数据显示到页面上
<div id="msg"></div>
<script>
document.getElementById("msg").innerHTML="hello world";
</script>
vue方式
引入vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
安装方式参见：
https://cn.vuejs.org/v2/guide/installation.html
添加html标签
添加html标签，用于显示数据
<div id="app">{{msg}}</div>
{{msg}} 是 插值表达式
vue代码
通过vue代码，将数据显示到标签上
<script>
var app = new Vue({
el: '#app', //el是element缩写
data: { //数据
msg: 'Hello Vue!'
}
})
</script>
el解释：
- 表示 将当前
Vue对象与id是app的元素 关联 - 支持 CSS选择器写法，即：
.app表示class是app的元素
特点：不需要直接操作dom
注意
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app">{{msg}}</div>
</body>
<script>
var app = new Vue({
//css的id选择器，选中id是app的元素，可以处理id是app元素里面的内容
el: '#app',
data: { //数据
msg: 'Hello Vue!'
}
})
</script>
</html>