一、插值语法初识
在上篇文章中我们已经了解了 Vue 这个全局对象，可以通过调用 createApp 方法来创建一个元素对象，并且元素对象可以调用 mount 方法来挂载到 HTML 页面中某个已存在的元素上。
但是我们使用 createApp 方法所创建的元素的内容是写死的，但其实这部分内容可以保存到一个变量中来实现，Vue 中的变量可以通过 createApp 方法传入的对象参数的 data 属性来定义，并且要求 data 属性必须是一个函数，该函数返回一个对象，对象的属性名就是变量名，属性值就是变量的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="../lib/vue.js"></script>
<script>
const app = Vue.createApp({
// 使用 data 属性的属性值函数返回的对象
template: "<h2>{{message}}</h2>",
// 传入一个属性，一个函数, 函数返回一个对象
data: function(){
return {
title: 'Hi',
message: '你好 Vue3'
}
}
})
app.mount('#app')
</script>
</body>
</html>
当然我们也可以使用 data 属性值函数中定义的 title 变量，只需要把 {{message}} 变为 {{title}} 即可
data 属性值函数返回的是一个对象，可以在这个对象中定义多个变量（属性），而在 template 中 {{message}} 这种使用的语法称为 插值语法，使用插值语法在渲染数据的时候就不需要直接操作 DOM 了。
二、v-for 语法初识
与编程语言中的 for 循环类似，Vue 中内置了可以对列表数据进行遍历的 v-for 指令；在 Vue 中 v-for 指令可以循环遍历数组、数字或者对象数据，并生成相应的 DOM 元素。
创建新的 HTML 文件，引入本地的 vue.js 文件，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./lib/vue.js"></script>
<script>
</script>
</body>
</html>
使用 Vue 对象的 createApp 方法创建元素，该方法中需要传入一个 data 属性和一个 template 属性，data 属性的值是一个函数，用于返回数据，这里返回的就是我们需要渲染的列表数据，而 template 属性的值就是 HTML 文本，是挂载到 div#app 元素上的 HTML 结构：
const app = Vue.createApp({
template: `
<h2>Tesla Vehicles</h2>
`,
data: function(){
return {
vehicles: ['Model 3','Model Y','Model S', 'Model X', 'Roadster 2', 'Semi']
}
}
})
app.mount("#app")
使用 v-for 指令的方式非常简单，只需要在 item 元素上添加 v-for 属性，并且指定 v-for="[列表项] in [列表名称]"，就可以将列表中的每一项遍历出来，我们可以使用插值语法将遍历的每一项渲染出来，并生成一个 DOM 元素，具体代码如下：
const app = Vue.createApp({
template: `
<h2>Tesla Vehicles</h2>
<ul>
<li v-for="vehicle in vehicles"> {{vehicle}} <li>
`,
data: function(){
return {
vehicles: ['Model 3','Model Y','Model S', 'Model X', 'Roadster 2', 'Semi']
}
}
})
app.mount("#app")
使用 LiverServer 打开页面，效果如下：
遍历对象与遍历列表类似：
const app = Vue.createApp({
template: `
<h2>Tesla Vehicles</h2>
<ul>
<li v-for="(k,v) in vehicle">{{k}} - {{v}}</li>
</ul>
`,
data: function(){
return {
vehicle: {
"name": "Model 3",
"brand": "Tesla",
"factory": "Shanghai Giga Factory"
}
}
}
})
app.mount("#app")
Vue.js也提供了v-for的一些高级用法，例如使用of关键字指定循环的对象属性值，或者使用in关键字指定键名和键值。
