<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>hello {{name}}</h1>
<h2>指令语法</h2>
<a v-bind:href="url">点我去尚硅谷学习</a>
</div>
<!-- 初识vue
1.想让vue 工作，必须创建一个vue 实例，且要传入一个配置对象
2.root 容器里面的代码依然符合html规范，但是混入了一些特殊的vue语法
3.root 容器里面的代码被称为vue 模板
4.容器和vue实例是一对一的关系
5.真是的开发中只有一个vue 实例，并且配合着组件一起使用
6. {{xxx}} 中的xxx要js表达式，且xxx可以自动读取data中的所有属性
7. 一旦data中的数据发生变化，那么页面中用到该数据的地方也会发生变化更新
注意区分js表达式和js 代码语句
1）表达式 一个表达式会产生一个值，可以放在任何一个需要的地方
a
a+b
demo(1)
x==y?'a':'b'
2）js 代码语句
if(){}
for(){}
8.vue 模板有2大类
1）插值语法
功能：用于解析标签提的内容
写法：{{xxx}},xxx 是js 表达式，且可以直接读取data中的所有属性
2）指令语法
功能：用于解析标签（包括标签属性，标签体内容 绑定事件。。。）
举例：v-bind:href="xxx" 或者简写 :href="xxx" xxx 同样写js 表达式
备注：vue中有很多指令，且形式都是 v-???
9.
-->
<script type="text/javascript">
Vue.config.productionTip = false; //阻止vue 在启动的时候生成生产提示
new Vue({
el: "#root", //el用于指定当前vue实例为那个容器服务，但通常为css选择器字符串
data: {
//data 用于存储数据，数据供el 所指定的容器去使用，我们暂时写成一个对象
name: "zhengyuxing9999",
url: "http://www.atguigu.com",
},
});
</script>
</body>
</html>