前端速通—Vue_简介 第一个Vue程序 el:挂载点 data:数据对象 Vue指令
简介：
Vue是：
1.JavaScript框架
2.简化Dom操作
3.响应式数据驱动
第一个Vue程序
<!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>Vue基础</title>
</head><body><div id="app">{{ message }}<!-- 双大括号是Vue框架中的插值语法，可以实现Vue对象将自己内部的message填充进入内部数据 --></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {message: "你好 小黑！"}})</script>
</body></html>
el挂载点类似超链接，可以跳转到所控制的字段，#是id选择器，会识别此id
el挂载点：
作用范围：
只要是id标记的模块都可以，会给模块内部所有的与data内部同名的属性赋值。
选择器：
1.如果是id，就使用id选择器，符号为#。例如el:"#app"
2.如果是class，就使用类选择器，符号为.。例如el:".app"
3.如果是标签本身，就直接使用标签选择器，直接填入标签名。例如el:"div"
可设置的对象：
1.只支持双标签不支持单标签
2.不支持body和head标签
data：数据对象
Vue中的数据被封装在data对象中
data可以写复杂类型的数据，例如数组等
Vue指令：
1. v-text指令：
示例：
前两行的“深圳”两字不会被显示，而只有第三行的“深圳”会被显示
2.v-html指令：
输出单纯的文本，则与v-text没有什么区别，但如果内容里的是html文件里面的特定标签，则会按照那个标签的形式输出，例如：
则在网页上输出的结果是：
并且这个链接是可以点进去的
v-on指令：
控制按钮被点下后的行为，如果到时候需要绑定多个行为，则可以以@符号代替v-on:。@右边要写事件，例如点击，双次点击，滑动。然后等号右边对应的就是方法名，这个方法名放在Vue对象的method方法内部
Vue框架不使用Dom操作对象的一个关键原因就是this的出现，通过this可以直接获得本Vue对象中data的数据并进行修改，示例：
v-show：
可以理解为java里面的setVisible()方法，是用来决定是否显示图片的：
v-if：
也是用来控制元素是否显示的：
示例：
v-bind:
这个指令是给变量名设置属性的，例如src,title,class这样的。
v-bind不是很有写的价值啊，即使不写v-bind，Vue对象届时也会通过el挂载点找到里面对应的属性并赋值啊？
答：不是这样的，src这样的路径变量，如果不给他设置上v-bind，到时候会把等式右边的内容当作纯文本去识别。所以要想把右边内容当作变量去识别，就必须要带上v-bind。
将v-bind简写成":"
总结：
