vue新 学习 01

01.vue的安装于配置
首先这次从尚硅谷中学习的vue，要安装的ida是vscode，这里需要注意的是安装的版本是system版本的，否则有些功能就不能够实现。
安装vue的官方插件vue.devtools，这个会让vue的在浏览器上的测试变得很流畅很方便，这个是应该防火墙的原因不能够在谷歌的官方软件库中去下载，需要在百度中去搜索相关的插件信息，下载，6.0版本的插件是对应vue3.0的，本次项目用的是vue2.0，建议插件的版本在5.0左右比较好。
第三个，是导入js文件，这里是由于新学习的vue，没有去用npm来安装，这里导入的vue.js和vue.min.js文件。注意，在html文件中去导入的js文件，是vue.js文件，不是vue.min.js文件，vue.devtools插件只识别vue.js文件。
02.vue对象的创建
原理：
vue对象就是view model，model中存放来自后台和前端的各种数据，这里可以认为是数据存放的地方，而html上的各种标签是可以让用户看见的，可以认为是view。model中的数据，先存放在vue对象的data等相关属性中，然后html中各种命令来去获取vue中的相关属性，实现数据的传输。

03.vue的配置对象
也就是Vue（{}）中的那个大括号，在es6中大括号表示的是一个对象。现有阶段是有两个属性：el和data，el表示当前vue实例为哪个容器服务。（关系是一一对应的），data的格式类似于es6中的对象，其中的属性和数据是通过key，value这种键值对来实现的。

vue实例中的属性相关说明：

01 el属性的测试：（容器和vue实例是一一对应的关系）
多个同class的容器和一个对应的vue实例。

在排版中，排在前面的容器会先绑定，之后的同class容器就不会再去绑定相关的vue实例了。

---

一个容器对应多个vue实例

结果：

vue实例中排在前面的先绑定容器，绑定之后不会发生容器改变再去绑定其他的vue实例。

02 data
key的值如果出现了两个相同的，会怎么办？
会最后一个key覆盖。

---

data中的key配合vue的模版语句应用，此时vue的模版语句在标签的内容模块中，不在标签内部的属性那边：

结果：

总结：

key与标签属性进行绑定，获取值
vue的命令是v-bind
01.先测试创建一个vue对象，其中有key=url，表示可以访问的地址。
view中href中去直接用vue中的url

结果：

用v-bind命令：

v-bind：href=url 的url会被当做表达式去执行。
结果：

换个方式：

结果：

总结：