Vue模板语法
插值语法
功能
用于解析标签体内容
格式
{{xxx}}
说明
“xxx”是js表达式，可以直接读取到data中的内容
举例
获取name属性的值：{{name}}
指令语法
功能
用于解析标签，包括标签属性、标签体内容、绑定事件等
格式
v-bind:绑定内容或者简写为:绑定内容
说明
Vue中有许多指令，且格式都是v-???
举例
给a标签绑定href属性：v-bind:href="baidu"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Template</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div>
<h3>插值语法：简单的key-value形式</h3>
<h4>hello {{name}}, welcome to {{address.toUpperCase()}}</h4>
</div>
<div>
<h3>指令语法：在HTML标签属性前加上“v-bind:”或者“:”，那么Vue就会将其属性值当作一个js表达式</h3>
<a v-bind:href="websites.baidu">点击跳转至百度</a><br>
<a :href="websites.bilibili.toUpperCase()">点击跳转至B站</a>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;//关闭生产提示
// 实例化Vue对象
new Vue({
el:"#root",
data: {
name: "张三",
address: "guangzhou",
//可以给数据分层级
websites:{
baidu: "https://www.baidu.com/",
bilibili: "https://www.bilibili.com",
},
}
});
</script>
</div>
</body>
</html>
