<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>模版语法</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
Vue模版语法有2大类
1.插值语法：
功能：用于解析标签体内容
写法：{{xxx}},xxx会作为表达式去解析，且可以自动读取到data中的属性
2.指令语法：
功能：用于解析标签(包括：标签属性、标签内容、绑定事件......)
举例：v-bind:href="xxxx" 或:href='xxx'
备注：Vue中有很多的指令都可以简写
-->
<div id="root">
<h2>插值语法</h2>
<h4>你好{{msg}}</h4>
<h4>你好{{msg.toUpperCase()}}</h4>
<hr />
<h2>指令语法</h2>
<!-- v-bind: 可以简写为 : -->
<a :href="url">点我去学习</a>
<a href="http://www.baidu.com" :x="msg">点我去学习</a>
</div>
<script>
new Vue({
el: "#root",
data: {
msg: "atguigu",
url: "https://www.baidu.com",
},
});
</script>
</body>
</html>