# Vue的学习路线规划
1. Vue基础
2. Vue-cli
3. Vue-router
4. Vuex
5. Element-ui
6. Vue3
本文是作者跟着尚硅谷的张天禹老师的视频学习时做的笔记
# Vue是什么
**官网给出的定义如下：**
> 一套用于`构建用户界面`的渐进式`JavaScript`框架
- **什么是`构建用户界面`？**
就是把数据展示在页面的合适位置
- **什么是`渐进式`？**
*Vue可以自底向上逐层的应用。*
也就是说，假如我们要做一个简单的应用，那么我们只需要一个轻量的核心库就可以；
如果我们要做一个复杂的应用，那么我们可以引入各式各样的Vue插件来增强功能。
# Vue的特点
1. 采用组件化模式，提高代码复用率，且让代码更好维护
2. 声明式编码，让编码人员无需直接操作DOM，提高开发效率
# 搭建Vue开发环境
## Vue的安装方式
1. **直接用`
```
## chrome的Vue插件安装
国外的同学可以在chrome网上应用店可以搜到
国内的同学要在网上找到下面这个文件把它拖到chrome的扩展程序页面里就可以安装成功
接着在chrome的右上角把Vue开发工具固定在地址栏右边
# Hello小案例
1. 先准备一个div容器，设置id值
2. 在script标签中创建Vue实例，并用el指定Vue实例为哪个容器服务
3. data中放入要使用的数据
4. div中用{{数据的key值}}取得数据并显示
```html
//准备好容器
{{name}}
```
在页面中显示为
## 注意事项
- 真实开发中只有一个Vue实例，并且会配合着组件一起使用
- {{js表达式}}中的js表达式可以自动读取到data中的所有数据
- 一旦data中的数据发生改变，那么页面中有用到该数据的地方也会自动改变
*区分：js表达式和js语句*
*1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方，例如`a`、`a+b`、`demo(1)`、`a === b ? x:y`
2.语句：例如if语句,for语句等*
# Vue模板语法
Vue模板语法分为两大类
1. 插值语法：
功能：用于解析标签体内容（标签体内容是在两个标签之间的内容）
写法：{{js表达式}}，可以直接读取到data中的所有属性
2. 指令语法
功能：用于解析标签(包括：标签属性、标签体内容、绑定事件......)
举例：v-bind:href="xxx" 或简写为 :href="xxx",xxx同样要写成js表达式，且可以读取到data中的所有属性
备注：Vue中有很多的指令，且形式都是v-???，此处我们只是拿v-bind举个例子
关于指令语法，我们举个例子
例如，我们要在页面上弄个超链接，链接地址数据放在Vue实例的data中
```html
```
说白了就是标签里的属性可以取到data里的值，不过要在属性前加`v-bind`或者`:`（可以简写为`:`的只有v-bind指令，其它的不行），另外指令语法也可以用在标签体内容、绑定事件
**额外补充一点**：
`取data中的属性时，可以有层级关系的取值`
例如，我们要取两个名字，一个是学生的名字，一个是学校的名字
```html
{{name}}
{{name1}}
```
如果这样写的话，那么我们在data中是不是得写一个name属性,一个name1属性?
我们可以这样做，把它改成
```html
{{stu.name}}
{{school.name}}
```
同时在data中这样写
```html
```
最终在页面中显示为
# 单向数据绑定与双向绑定
单向数据绑定用的是`v-bind`指令
双向数据绑定用的是`v-model`指令
我们用`v-model`举个例子来告诉大家什么是双向绑定
```html
```
**注意输入框和data里的数据是一样的，当我们把输入框里的文字改变时，data里的数据也跟着一起改变**
**而`v-bind`的单向数据绑定指的是只有data里的数据变化时，我们在页面中的数据跟着改变，当页面中的值改变时，data里的值不跟着改变**
**说白了单向绑定就是数据只能由data流向页面，而双向绑定是两边互流**
- 双向绑定一般都应有在表单类元素上（如input、select）
- `v-model：value`可以简写为`v-model`，因为`v-model`默认收集的是value值
# el与data的两种写法
1. el的两种写法
(1)new Vue()的时候配置el属性
(2)先创建Vue实例，随后通过vm.$mount('#root')指定el的值
```html
```
2. data的两种写法
(1)对象式
(2)函数式
如何选择？目前哪种写法都行，以后学习到组件时，data必须使用函数式，否则会报错
一个重要的原则：由Vue管理的函数，使用到this指的是Vue实例。并且Vue管理的函数，一定不要写成箭头函数，一旦写了，this指的就不是Vue实例了
```html
```