如果仅仅像我们以上书写的程序，我们完全没有必要使用Vue，直接在body里直接书写就可以了：
在Vue中还有一个data的配置项，它可以帮助我们动态的渲染页面，
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>模板语句的数据来源</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 指定挂载位置 -->
<div id="app"></div>
<!-- vue程序 -->
<script>
new Vue({
// template: `<h1>我叫张三，我今年18岁了</h1>`,
template: `<h1>我叫{{name}},我今年{{age}}岁了</h1>`,
//1.1 data函数写法
// data: function () {
// return {
// name: "章三",
// age: 28,
// };
// },
//1.2 data函数简写
// data() {
// return {
// name: "章三",
// age: 28,
// };
// },
// 2、data对象写法
data: {
name: "李四",
age: 18,
hobby: ["跑步", "游泳", "学习"],
salary: {
base: "5k",
bonus: {
month: "5k",
year: "10k",
},
},
},
}).$mount("#app");
</script>
</body>
</html>
代码解释
1、data是Vue实例的数据对象，是给整个Vue实例提供数据来源的
2、data配置项的value值，有两种写法 Object｜Function（对象或者函数），现阶段，这两种写法都可以，后期学到组件化的时候，data只能是函数的写法，建议大家直接用函数
3、如果data是对象的写法，对象必须是存粹的对象（含有0个或多个key：value）
4、data数据插入到模版语句中，可以用{{}},这是Vue框架自己搞的一个语法，叫插值语法（或叫胡子语法），可以从data根据key获取value，并且将value插入到对应的位置，注意{{}}语法是固定语法，不可以添加其他内容，例如空格{ { }}
5、data可以写多级，然后去一级一级获取
6、Vue编译器对template进行编译，遇到{{}}语法时，就去data里取数据，然后将获取到的数据插入到对应的位置，生成对应的html代码，最终将html渲染到挂载位置，呈现
7、当data发生改变时，template模版就会被重新编译，重新渲染
Vue的template配置项
具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>template配置项详解</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 指定挂载位置 -->
<!-- 注意：以下代码是Vue框架能看懂的代码了。
下面的代码就是一个模板语句。这个代码是需要Vue框架编译，然后渲染的。 -->
<div id="app">
<!-- <div>
<h1>{{msg}}</h1>
<h1>{{name}}</h1>
</div> -->
</div>
<!-- vue程序 -->
<script>
new Vue({
// 错误的
//template : '<h1>{{msg}}</h1><h1>张三</h1>',
template: `
<div>
<h1>{{msg}}</h1>
<h1>{{name}}</h1>
</div>
`,
data: {
msg: "Hello World!!!!!!!",
name: "张三",
},
}).$mount("#app");
</script>
</body>
</html>
代码解释
1、template只能有一个根元素，只要data数据发生变化，template就会重新编译
2、template编译后进行渲染时会将挂载位置的元素替换。
3、template后面的代码如果需要换行的话，建议将代码写到``符号当中，不建议使用 + 进行字符串的拼接。
4、template配置项可以省略，将其直接编写到HTMl代码中，此时指定挂载的位置就不会被替换
5、只要data中的数据发生了变化，模版语句就一定会重新编译