一、HTML代码部分
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<div id='app'>
<!-- 下面是Mustache的多种写法: -->
<h2>{{message}}</h2>
<h2>{{message}},张三</h2>
<!-- 在Mustache语法中,不仅仅可以直接写变量,也可以写简单表达式 -->
<h2>{{firstName + lastName}}</h2>
<!-- 也可以在中间加一些字符串(这里就是加了个空格) -->
<h2>{{firstName + ' ' + lastName}}</h2>
<!-- 这样写也是在中间加了个空格 -->
<h2>{{firstName}} {{lastName}}</h2>
<!-- 可以解析counter,然后乘以2变成2倍 -->
<h2>{{counter * 2}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
message:'hello',
firstName:'kobe',
lastName:'bryant',
counter:100
},
computed:
})
</script>
</body>
</html>
二、代码图示部分
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/32ba30f4f681b1bfb7122b2dc350d9af.png)
三、页面效果展示部分
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1e77d83ff39570f56a633da8ceb2d029.png)