<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>02_模板语法</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
Vue模板讲法有2大类
1.插值语法:
功能:用于解析标签体内容.
写法:{{xxx}} xxx是js表达式.且可以直接读取到data中的所有属性.
2.指令语法:
功能:用于解析标签(包括:标签属性,标签体内容,绑定事件...)
举例:v-bind:href="xxx", 或者简写 :href="xxx", xxx同样要写js表达式
且可以直接读取到data中的所有属性
-->
<div id="root">
<h1>插值语法</h1>
<h3>你好,{{name}}</h3>
<br />
<h1>指令语法</h1>
<a v-bind:href="url.toUpperCase()" v-bind:x="hello">baidu{{school.name}}</a>
<a :href="url" :x="hello">baidu2</a>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const x = new Vue({
el: "#root", //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串。
data: {
name: "尚硅谷",
url:"http://www.baidu.com",
hello:"helllllll",
school:{
name:"wj"
}
}
});
</script>
</body>
</html>