<!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>模板语法</title>
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div class="root">
<!-- 用于解析标签体内容，写法{{xxx}}直接读取data中所有属性 -->
<h1>
插值语法
</h1>
<h3>
你好{{name}}
</h3>
<br/>
<h1>指令语法</h1>
<!-- 用于解析标签 包括标签属性，标签内容，绑定事件......... -->
<!-- vue中有很多指令 此处只是用v-bind举例子，指令的写法都是v-xxxx -->
<!-- v-bind可以给任何一个标签属性动态的绑定值，可以简写成: -->
<a v-bind:href="school.url">点我去搜错{{school.name}}</a><br>
<a :href="school.url">点我去搜错{{school.name}}</a>
</div>
<script type="text/javascript">
Vue.config.devtools = true;
// //创建vue实例
// new Vue({
// el: '.root', //el用于指定当前vue为哪个容器服务，值通常为css选择器
// data: { //data中存储的数据供el使用
// name: "xiao bai",
// url: "https://www.baidu.com/"
// }
// });
new Vue({
el: '.root', //el用于指定当前vue为哪个容器服务，值通常为css选择器
data: { //data中存储的数据供el使用
name: "xiao bai",
school: {
name: "百度一下",
url: "https://www.baidu.com/"
}
}
});
</script>
</body>
</html>
