# 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. **直接用`<script>`引入**
2. **NPM**
3. **命令行工具 (CLI)**
这里我们使用标签引入的方式来使用Vue
*首先，我们先创建一个文件夹，用vscode打开，接着我们在这个文件夹里再新建一个文件夹放入Vue官网给的两个js文件，不带min的为开发版本，带min的为生产版本,并新建一个文件夹新建自己的html文件*
*官方文档地址放这了，点击开发版本和生产版本即可下载两个js文件* https://cn.vuejs.org/v2/guide/installation.html
然后在script标签中引入其中一个即可，这里引入的是开发版本的
```html
<script type="text/javascript" src="../js/vue.js"></script>
```
## chrome的Vue插件安装
国外的同学可以在chrome网上应用店可以搜到
国内的同学要在网上找到下面这个文件把它拖到chrome的扩展程序页面里就可以安装成功
接着在chrome的右上角把Vue开发工具固定在地址栏右边
# Hello小案例
1. 先准备一个div容器，设置id值
2. 在script标签中创建Vue实例，并用el指定Vue实例为哪个容器服务
3. data中放入要使用的数据
4. div中用{{数据的key值}}取得数据并显示
```html
<!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>{{name}}</h1>
</div>
<script>
new Vue({
//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
el:'#root',
//data中用于存储数据，数据供el所指定的容器去使用
//data中的数据变化时，页面中有用到数据的地方也跟着变化
data:{
name:'ZhengBin'
}
})
</script>
</body>
</html>
```
在页面中显示为
## 注意事项
- 真实开发中只有一个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
<!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">
<!-- 此处也可以简写为:href,但只有v-bind指令可以这样做 -->
<a v-bind:href="url">跳转到百度</a>
</div>
<script>
new Vue({
//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
el:'#root',
//data中用于存储数据，数据供el所指定的容器去使用
data:{
url:'http://www.baidu.com'
}
})
</script>
</body>
</html>
```
说白了就是标签里的属性可以取到data里的值，不过要在属性前加`v-bind`或者`:`（可以简写为`:`的只有v-bind指令，其它的不行），另外指令语法也可以用在标签体内容、绑定事件
**额外补充一点**：
`取data中的属性时，可以有层级关系的取值`
例如，我们要取两个名字，一个是学生的名字，一个是学校的名字
```html
<div id="root">
<h1>{{name}}</h1>
<h1>{{name1}}</h1>
</div>
```
如果这样写的话，那么我们在data中是不是得写一个name属性,一个name1属性?
我们可以这样做，把它改成
```html
<div id="root">
<h1>{{stu.name}}</h1>
<h1>{{school.name}}</h1>
</div>
```
同时在data中这样写
```html
<script>
new Vue({
//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
el:'#root',
//data中用于存储数据，数据供el所指定的容器去使用
data:{
stu:{
name:'ZhengBin'
},
school:{
name:'xxx'
}
}
})
</script>
```
最终在页面中显示为
# 单向数据绑定与双向绑定
单向数据绑定用的是`v-bind`指令
双向数据绑定用的是`v-model`指令
我们用`v-model`举个例子来告诉大家什么是双向绑定
```html
<!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">
<!-- v-model:value此处可以简写为v-model -->
<input type="text" v-model:value="age"/>
</div>
<script>
new Vue({
el:'#root',
data:{
age:23
}
})
</script>
</body>
</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
<script>
const v=new Vue({
// el:'#root' 第一种写法
data:{
age:23
}
})
v.$mount('#root') //第二种写法
</script>
```
2. data的两种写法
(1)对象式
(2)函数式
如何选择？目前哪种写法都行，以后学习到组件时，data必须使用函数式，否则会报错
一个重要的原则：由Vue管理的函数，使用到this指的是Vue实例。并且Vue管理的函数，一定不要写成箭头函数，一旦写了，this指的就不是Vue实例了
```html
<script>
const v=new Vue({
el:'#root',
//对象式
// data:{
// age:23
// }
//函数式
data(){
return{
age:23
}
}
})
</script>
```
