不是专业学前端的、所以我的想法是浅尝一下Vue2，我也不知道这样合不合理，所以大家对这篇内容批判地看，辩证地看QAQ
目录
[属性插值：v-bind 或 :](#属性插值：v-bind 或 :)
Vue2简介：
一套用于构建用户界面的渐进式JavaScript框架，有以下特点
- 组件化模式，提高复用率
- 声明式代码，无需操作DOM
Vue2的底层其实还是HTML,CSS,JS这仨玩意儿，里面接入了一些Vue2的语法，为了方便我们使用VSCode进行学习。
OK简介就到这里，^__^，因为社区里的大佬介绍的很详细了，我就不露怯了（就是懒）
学习内容：
1、配置环境
Vue2相对还是比较简单，首先来到官网（安装 --- Vue.js），这两个版本都可以使用，但有所区别
| 特性 | 开发版本 (Development) | 生产版本 (Production) |
|---|---|---|
| 文件大小 | 较大 (包含完整警告和调试信息) | 较小 (移除警告和调试代码) |
| 性能 | 较慢 (有额外检查) | 较快 (优化过的) |
| 错误提示 | 详细警告和错误信息 | 无警告信息 |
| 适用场景 | 开发阶段 | 发布、投入使用阶段 |
所以！初学还是选择开发版本，会下载一个vue.js文件
现在！打开VSCode，新建一个HTML文件，将刚刚下载好的vue.js拖入同一个项目中
在HTML文件中建立好框架并引入vue.js
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>浅尝Vue2</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
</script>
</html>2、HelloWorld
先抛开Vue2，一个光HTML文件，也是能运行的
如果输入的都是静态的东西（如：字符串），那么Vue2是体现不出它的作用的
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>浅尝Vue2</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="hello">
<h1>HelloWorld</h1>
<h1>哟嘿</h1>
</div>
</body>
<script type="text/javascript">
</script>
</html>
那么我们怎么简单地先使用一下Vue2呢？
先给出一段简单的代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>浅尝Vue2</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="hello">
<h1>HelloWorld，我是{{name}}</h1>
<h1>哟嘿，我来自{{nation}}</h1>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#hello",
data:{
name:"吉吉国王骑士",
nation:"吉吉国"
}
})
</script>
</html>可以发现这段代码加了点新东西：
我们给<div>中的内容加入了"变量"，并用"{{}}"包裹起来，"{{}}"是Vue2的插值语法。
下方还创建了一个新的Vue实例，包括el和data。
- el：用于指定当前vue实例为哪个容器服务，它的值是操作的分区的id或class，id用"# + id"；class用". + class"。
- data：用来存入数据、变量的值，供el所指的容器使用。
通过这个例子，我们知道了怎么从光秃秃的HTML到使用Vue2，简单总结一下
- 想让Vue工作，需要创建Vue实例，并用于一个容器
- 容器中的代码语法依然是html语法，只是添加了Vue2语法
- 容器中的代码被称作"Vue模板(第四部分讨论)"
3、多种实例情况讨论
（1）多Vue实例对一容器
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>浅尝Vue2</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="hello">
<h1>HelloWorld，我是{{name}}</h1>
<h1>哟嘿，我来自{{nation}}</h1>
<h1>这里是第二个实例的值:{{value}}</h1>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#hello",
data:{
name:"吉吉国王骑士",
nation:"吉吉国"
}
})
new Vue({
el:"#hello",
data:{
name:"无敌暴龙展示",
nation:"宇宙",
value:"2222"
}
})
</script>
</html>
如果第二个实例起作用，那么这里是第二个实例的值：后面应该是2222，但是第二个实例既没有覆盖第一个，也没有赋予value值
所以我们可以说，Vue实例只作用于一个容器
（2）一Vue实例对单容器
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>浅尝Vue2</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div class="hello">
<h1>HelloWorld，1111我是{{name}}</h1>
<h1>哟嘿，我来自{{nation}}</h1>
</div>
<div class="hello">
<h1>HelloWorld，222我是{{name}}</h1>
<h1>哟嘿，我来自{{nation}}</h1>
</div>
</body>
<script type="text/javascript">
new Vue({
el:".hello",
data:{
name:"吉吉国王骑士",
nation:"吉吉国"
}
})
</script>
</html>
可以看到Vue实例还是只作用了第一个容器，尽管两个容器属于同一个class
依然满足Vue实例只作用于一个容器
（3）多级数据
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>浅尝Vue2</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="duoji">
<h1>我是{{name}}，年龄是{{age}}岁</h1>
<h1>我的学校是{{school.name}}，校龄是{{school.age}}年</h1>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#duoji",
data:{
name:"吉吉国王骑士",
age:"18",
school:{
name:"Hogwarts",
age:"1035"
}
}
})
</script>
</html>
前面说过，一个实例运用于一个容器，当容器里的变量（值）太多的时候，管理起来十分繁杂，所以我们在data中内嵌了一个school，school中的属性可以在容器中利用school.XXX来使用。
4、模板语法
Vue 使用一种基于 HTML 的模板语法，允许开发者声明式地将数据绑定到 DOM。模板语法是 Vue 的核心特性之一，它让数据与 DOM 建立了响应式连接。
说白了，模板语法就是告诉 Vue："这里要动态显示数据，那里要根据条件变化......"
模板语法包括两部分：插值语法和指令语法
（1）插值语法
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
文本插值：{{}}
第二部分举了例子，这里不再赘述。
（2）指令语法
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件......）
举例：v-bind:href="xxx"或简写为:href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
属性插值：v-bind 或 :
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>浅尝Vue2</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="muban">
<a v-bind:href="url">点击进入百度</a>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#muban",
data:{
url:"https://www.baidu.com"
}
})
</script>
</html>总结
浅浅入了个门，正如标题所说蜻蜓点水一下。编码之路，始于足下。这次浅尝虽短，却已推开Vue世界的大门。