# Vue.js - day01
## 插件安装推荐
vscode有二个常用插件：vetur，Vue 2 Snippets
1. vetur:让一些vue的关键字能高亮显示，还能进行一些语法的检测。
- 语法错误检查，包括 CSS/SCSS/LESS/Javascript/TypeScript等
- 语法高亮，包括 html/css/sass/scss/less/js/ts等
2. Vue 2 Snippets：能在平时写代码过程中提示功能更强大,对vue的语法有提示
官网地址(里面列出了相关提示快捷词)： [https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets](https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets)
安装方式有二种：在线安装（能上网，条件允许推荐在线安装）,离线安装
**在线安装**：在vscode中按（ctrl+shift+x）,搜索插件名称（例：vetur），
会出现相关插件，如果里面有install.就点击安装，如果安装完成就没install了
**离线安装**：拷贝相应的压缩包解压到相应目录下面（2个vscode插件.zip）
```
C:\Users\电脑用户名\.vscode\extensions
```
安装完成后，重启一下vscode就可使用插件了
## vue.js是什么
[官网地址](https://cn.vuejs.org/v2/guide/)
> 我们学习一个知识，首先是不是要了解它是什么？有什么特点？
**vue.js是什么：vue就是一个javascript框架，**
**特点：**无需再操作dom,只关心数据
vue做法与传统js对比
```html
<!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>Document</title>
</head>
<body>
<!-- js传统做法 -->
<input type="text" id="txt">
<p id="p">您输入了:</p>
<script>
let _txt = document.getElementById("txt")
let _p = document.getElementById("p")
_txt.oninput = function () {
_p.innerText = "您输入了:" + _txt.value
}
</script>
<!-- vue做法 -->
<div id="app">
<input type="text" v-model="msg">
<p>您输入了:{{msg}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: "hello"
}
})
</script>
</body>
</html>
```
**总结：对vue而言，我们无需再操作dom,只需要关心数据data,把相应的数据与标签用vue的语法关联上就OK了**
## vue的基本使用
>我们刚子解了vue是什么和它的特点，那我们如何去使用它呢？
[直通车](https://cn.vuejs.org/v2/guide/#起步)
**基本使用方法（分三步）：**
- 引包(导入vue.js到html)
- 引包这里官网说到二个词，开发环境，生产环境
- 开发环境：就是我们作为开发人员写代码过程中使用的环境,选择包相当于jquery时的jquery.min.js。
- 生产环境：项目正式上线后的环境,选择包相当于jquery时的jquery.js。
学习阶段我们还是用开发环境的包，因为代码会有相关警告提示等。
```html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```
- 布局。（写好页面标签，以前怎么写现在还怎么写）例：
```html
<div id="app">
{{msg}}
//这个div写了一个id,就是留这个id以便vue更方便vue实例化时方便获取
</div>
```
- vue实例化
```javascript
<script>
new Vue({
//这里el相当于确定实例化范围就是id为app的标签，后面写法相当于一个选择器，注：这里不能选择body与html,尽量写一个id标签供选择，独一无二，可读性强，规范。
el: "#app",
//这里的data就是vue需要使用到的数据，vue是以数据驱动页面，数据就来自于这里
data: {
msg: "hello"
}
})
</script>
```
```html
<!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>Document</title>
</head>
<body>
<!-- 基本使用分为三步：
1：导包；2：布局；3：实例化
-->
<!-- 2:布局 -->
<div id="app">
<!-- vue的一个插值语法，相当于挖个坑，用下面的就是值来填上 -->
{{ message }}message
<div>{{message}}</div>
</div>
<!-- 1:导包(开发环境的包) -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//3:实例化过程
var app = new Vue({
el: '#app',//el实际就是element，选择标签 实际就是确定vue的使用范围 ,注意这里不能选择 <html> or <body>
data: { //数据存放的地方
message: 'Hello Vue!',
txt: ""
}
})
</script>
</body>
</html>
```
## v-text指令（类似于innerText）
>如何改变一个标签里面的内容呢？
[直通车](https://cn.vuejs.org/v2/api/#v-text)
**用法：**v-text有二种用法，里面的值都可使用一句话的表达式，如 xxx, xxx+123 ,xxx?"1":"2" obj.xxx等一句话简短表达式
1. ```html
<span v-text="msg"></span>//用于整个span标签内的textContent内容替换
```
2. ```html
<span>消息：{{msg}}</span> //用于部分span标签内的textContent内容替换
//这也叫插值语法
```
```html
msg可以是一个变量，也可以是一个简短的一句话表达式
**功能：**
- v-text=“msg” ，它会替换当前所在标签里的所有内容，并将msg内容以文本形式显示在标签里，和innerText类似
- {{}}用法，{{}}里面将不再是字符串，可包含变量（一句话内的js表达式），获取数据，它是用于标签的textContent部分，常用于部分textContent值的更新。
下面有关于这二种用法的一个demo,大家可运行的感受一下。
```html
<!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>v-text</title>
</head>
<body>
<!-- 2:布局 -->
<div id="app">
<!-- 加法运算表达式 -->
<div v-text="msg+123+'xxx'">
今天是个寒冷的天！
<p>xxx</p>
</div>
<!-- 变量用法 -->
<div>今天天气怎么样?{{txt}}</div>
<!-- 对象用法 -->
<div>姓名?{{obj.name}}</div>
<!-- 三元表达式用法 -->
<div>性别?{{obj.name?"男":"女"}}</div>
</div>
<!--总结： v-text与插值语诘后面都可以用简单的一句话表达式-->
<!-- 1：导包 -->
<script src="./vue.js"></script>
<!-- 3:实例化 -->
<script>
new Vue({
el: "#app",
data: {
msg: "第一次使用v-text",
txt: "今天是个寒冷的天！",
obj: {
name: "董老师",
sex: "男"
}
}
})
</script>
</body>
</html>
```
## v-html指令（类似innerHTML）
>和v-text相似的一个指令，但可解析值成html
[直通车](https://cn.vuejs.org/v2/api/#v-html)
**用法：**
```html
<div v-html="msg"></div>
```
**功能：**v-html和v-text非常相似，会替换当前所在标签的内容，并以html形式展示出来。
**注：常用于富文本（带有标签元素的字符串如：`<p style="color:red">我是v-html</p>`。）**
**v-html的demo**
```html
<!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>Document</title>
</head>
<body>
<!-- html布局 -->
<div id="app">
<div v-text="txt">123</div>
<div v-html="txt">456</div>
</div>
<!-- 导包 -->
<script src="./vue.js"></script>
<!-- vue实例化 -->
<script>
new Vue({
el: "#app",
data: {
txt: "<h1>今天天气很好！</h1>" //这里就是一个富文本，带有标签的字符串
}
})
</script>
</body>
</html>
```
## v-model指令
>前面学习了如何改变标签里面内容，那如何改变input框等表单元素的值呢？
[直通车](https://cn.vuejs.org/v2/guide/forms.html)
**用法：**例: `<input type="text" v-model="msg">`
**功能：**v-model能够实现表单元素值的双向绑定（注：适用范围为：表单元素如：input,textarea,select等）
- 双向绑定通过下面demo有一个很详情的显示，
- 初始时，input框的值是通过v-model取到了msg的值 ，实现了值的获取
- 后面，当input框的值改变的过程中，也会影响到msg值的改变从而实现p标签里内容的改变
- 所谓双向绑定就是msg与input框的值不分彼此，不管哪一个变化 ，另一个都会跟着变。
```html
<!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>Document</title>
</head>
<body>
<div id="app">
<!-- 这里有二个过程来说明这个双向绑定
1：刚开始一打开页面，msg的值通过v-model传递给了input框，让input框显示了hello,这是一个取值过程
2：后面当input框值输入改变时，通过v-model,msg的值也会随之改变，这是一个对msg传值的过程
取值与传值 二个过程中，v-model实现了双向绑定
-->
<input type="text" placeholder="请输入内容" v-model="msg">
<p>请输入内容：{{msg}}</p>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: "hello"
}
})
</script>
</body>
</html>
```
## v-on指令
>如何监听事件呢？
[直通车](https://cn.vuejs.org/v2/guide/events.html)
**用法：( ` v-on:=> (简写)@`)**
```javascript
<div v-on:事件名="需要执行的简单代码或者是方法"> </div>
//简写
<div @事件名="需要执行的简单代码或者是方法"> </div>
```
**功能：**用于事件的绑定，例如：`click`,`dblclick`,`mouseover ` 等只要是事件，都可用它来绑定
```html
<!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>Document</title>
</head>
<body>
<div id="app">
<!-- v-on:事件名="一句话简短js" -->
<button v-on:click="clickEvent">点我啊</button>
<button v-on:dblclick="clickEvent">双击我啊</button>
<button v-on:mouseover="clickEvent">鼠标移入</button>
<p>你点了我{{total}}次!</p>
<!-- 简写@,推荐后面都用简写 -->
<button @click="clickEvent">点我啊</button>
<button @dblclick="clickEvent">双击我啊</button>
<button @mouseover="clickEvent">鼠标移入</button>
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
total: 0
},
// 这里的methods就是方法的集合，就是我们在vue里面用到的方法都可写到这里来
methods: {
//在methods里访问data是需要加this的，而html访问是不需要的
clickEvent() { // 这里相当于clickEvent:function(){}
if (this.total < 10) {
this.total++
}
}
}
})
</script>
</body>
</html>
```
## vue实例中的this
>如何在methods中访问data里面的属性呢？前面使用的this代表什么呢？
**用法：**
- methods里某个方法访问data => this.data属性
- methods里A方法访问methods里的B方法 => this.B()
**功能：**this就是指当前new Vue实例，vue实例时会将data里面属性与methods方法平铺过来到vue实例里面，所以this能直接访问到data与methods
**注：**html里面访问data与methods不需要加this,但methods里面的方法访问data里的属性是需要加this的
```html
<!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>Document</title>
</head>
<body>
<div id="app">
<button @click="clickEvent">点我啊</button>
<p>{{msg}}</p>
</div>
<script src="./vue.js"></script>
<script>
//dom里面使用vue里面的data属性与methods里面的方法时都无须加this,但是vue实例里面methods访问data与methods里其它方法都是要加this的
var app = new Vue({
el: "#app",
// vue中data里的值会在vue实例化时平铺到vue实例里面
data: {
msg: "123",
t1: 2,
t2: 3,
t3: 4
},
//vue中里methods里面的方法也是在vue实例化时平铺到vue
methods: {
clickEvent() {
//this就代表vue实例
console.log(app)
//打印看看this里面有什么
console.log(this)
console.log(this === app);
this.msg = "测试一下"
this.alertEvent()
},
alertEvent() {
alert(this.msg)
}
},
})
</script>
</body>
</html>
```
## 搜索英雄人物demo
>对前面学的知识点综合运用
分析：
1. 处理默认打开数据
1. input框 v-model
2. 姓名 ： {{}} heroList[heroIndex].name
3. 英雄故事： v-text heroList[heroIndex].story
2. 处理搜索
1. 按钮 @click ="搜索事件"
2. 搜索事件处理
1. 遍历数组 heroList
2. heroList[i].name.indexOf(inpout框的值)！=-1
3. 存储索引 heroIndex=i
4. data定义heroIndex=0
这个demo是对前面所有知识点的一个综合应用。
需求：通过input框搜索出模板内的相应英雄的详信息，模板内已给出四位英雄的数据。
模板在：08搜索英雄人物demo模板.html
分析：
1. 默认取到heroList[0]的信息
1. heroList[0].name
2. heroList[0].story
2. 给input框来一个v-model ="变量"
1. 变量默认=“赛拉斯”
3. 实现搜索功能
1. 给搜索按钮绑定事件 @click="事件"
2. 事件要实现搜索出相应的数据
1. 首先遍历数组
2. 比较数组里面每一项的name
1. name.indexOf(input框的值)！=-1
2. 返回出相应索引 就OK了
3. 定义一个索引变量，默认值为0
## v-on常用的几个修饰符
>如何控制事件只在某些特别条件下触发呢？
[直通车](https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6)
**用法：**
- @事件名.stop="事件执行代码" 阻止冒泡
- @事件名.prevent="事件执行代码" 阻止默认事件
- @keyup.enter="事件执行代码" 相当于只有按键盘回车我才触发
**功能：**.stop(阻止冒泡) .prevent(阻止默认事件) .enter(相当于只有按键盘回车我才触发)
```html
<!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>Document</title>
</head>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #f00;
}
.box2 {
width: 100px;
height: 100px;
background-color: #0f0;
}
</style>
<body>
<div id="app">
<div class="box1" @click="box1Click">
box1
<!-- vue写法阻止冒泡 .stop -->
<div class="box2" @click.stop="box2Click">box2</div>
{{msg}}
<!-- prevent阻止默认事件 -->
<a href="http://www.baidu.com" @click.stop.prevent="aClickEvent">我是a标签</a>
</div>
<!-- 键盘监听事件修饰符.enter 只有回车时才响应 -->
<input type="text" @keyup.enter="inputEvent">
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: ""
},
methods: {
box1Click() {
alert("这是box1")
},
box2Click(event) {
// event.stopPropagation()
alert("这是box2")
},
aClickEvent(event) {
// event.preventDefault()
this.msg = "我修改了msg"
},
inputEvent() {
alert(123)
}
}
})
</script>
</body>
</html>
```
## v-bind指令之基本用法
> 如何通过vue去改变标签上面的样式或者其它属性值呢？
常规用法官网介绍：[https://cn.vuejs.org/v2/api/#v-bind](https://cn.vuejs.org/v2/api/#v-bind)
**用法：**( ` v-bind:=> (简写):`)
```html
v-bind:属性名="属性值"
```
如: v-bind:src="图片路径(这里可写一句话以内简短js)"
**功能：**绑定相应属性值后，可以动态控制该属性值，通过控制该属性值让页面满足不同的需求效果。
```html
<!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>Document</title>
</head>
<style>
img {
width: 400px;
}
</style>
<body>
<div id="app">
<button @click="clickEvent">点击我啊</button>
<!-- 绑定基本属性：v-bind:属性名="变量" -->
<!-- <img v-bind:src="imageSrc" :title="msg"> -->
<!-- 简写: -->
<img :src="imageSrc" :title="msg">
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: "",
imageSrc: "http://ossweb-img.qq.com/images/lol/web201310/skin/big517000.jpg"
},
methods: {
clickEvent() {
this.msg = "图片换了"
this.imageSrc = "http://ossweb-img.qq.com/images/lol/web201310/skin/big518000.jpg"
}
}
})
</script>
</body>
</html>
```
## v-bind指令之对象用法
>如何通过vue去改变标签上面的样式或者其它属性值呢？
对象用法介绍网址： [https://cn.vuejs.org/v2/guide/class-and-style.html](https://cn.vuejs.org/v2/guide/class-and-style.html)
**用法：**( ` v-bind:=> (简写):`)
- 对象用法(适用于复合属性，有多个值的)
- 如class: v-bind:class="{class类名：一句话以内简短js,但结果会转换为true(使用该class)与false(不使用该class),}"
**功能：**绑定相应属性值后，可以动态控制该属性值，通过控制该属性值让页面满足不同的需求效果。
**v-bind应用于class**
```html
<!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>Document</title>
</head>
<style>
.active {
color: red
}
</style>
<body>
<div id="app">
<button @click="clickEvent">点我换颜色 </button>
<!-- bol为true,active有效，bol为false时，active无效 -->
<div v-bind:class="{active:bol}">使用class</div>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
bol: false
},
methods: {
clickEvent() {
this.bol = !this.bol
}
}
})</script>
</body>
</html>
```
## 图片轮播demo
>实际运用v-bind与v-on结合
通过已给出的图片数组完成图片轮播功能，样式已给出，只需写功能就OK
## 英雄人物详细Demo
>前面所学知识点的综合运用
1. 处理默认打开数据
1. 姓名：{{}} hero[0].name
2. 图片 :src hero[0].img
3. 故事 v-html hero[0].story
2. 搜索
1. input框 v-model 双向绑定 @keyup.enter="搜索事件
2. 按钮也要来一个搜索事件 @click="搜索事件
3. 搜索事件处理
1. 遍历数组
2. 找到name.indexOf(input框的值）！=-1 索引 项
3. 存储索引 heroIndex=0
## v-for指令
>如何对列表数据进行渲染？
[直通车](https://cn.vuejs.org/v2/guide/list.html)
**用法：**
- 用于数组 ： `v-for="(item(数组每一项),index(索引)) in array"` （这里index索引也可省略不写）
- 用于对象 ： ` v-for="(value(对象中的值)，key(对象中的键值)，index(对象中的序号，从0开始) in object)"`(这里key与index可省略,对象的for在实际项目中很少用到。)
**功能：**对数组与对象进遍历，得到每一项的值，从而进行列表之类的渲染处理。
```html
<!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>Document</title>
</head>
<body>
<div id="app">
<ul>
<!-- 数组有多长它就渲染多少个 第一个值item是代表数组当前项，第二个index值是数组索引-->
<li v-for="(item,index) in arr">索引：{{index}}------值：{{item}}</li>
<!-- 对对象而言，第一个值value是也是对象的值，第二个是对象的键值key，第三个index是序号 -->
<li v-for="(value,key,index) in obj">{{value}}------{{key}}-----{{index}}</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
arr: [1, 2, 3, 45, 6, 8, 15],
obj: {
name: "刘德华",
age: 15
}
}
})
</script>
</body>
</html>
```
## 单纯英雄列表Demo
>v-for的一个综合应用
>
已给出相应模板，模板里有相应数据，完成列表渲染，
需求：完成列表渲染，点击不同人物名称，可实现人物样式变化 ，如图
1. 列表渲染 v-for
1. name {{}}
2. 加入点击 事件heroIndex=index
3. 绑定class :class="{ active :bolean值}"
1. heroIndex==index
2. heroIndex存储当前点击索引值
## v-if,v-else-if,v-else指令
>有条件的渲染某些内容
[直通车](https://cn.vuejs.org/v2/guide/conditional.html)
**用法：**
- ` v-if="一句话表达式（最后转换成boolean值，如果为真，则进行该语句所在标签渲染，如果为假则不渲染，该标签将不存在）" `
- `v-else-if`和`v-if` 是一样用法，它是`v-if`不成立情况下才会走到`v-else-if`这里来
- `v-else`后面无须跟任何语句，当前面`v-if`和`v-if-else`都不成立时，它就会执行，当前面任何一个执行渲染，它就不执行
**功能：**根据不同条件选择性的渲染某些标签。
```html
<!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>Document</title>
</head>
<body>
<div id="app">
<input type="text" placeholder="请输入相应成绩！" v-model="score">
<div v-if="score>90">你真优秀</div>
<div v-else-if="score>70">一般般了</div>
<div v-else>得努力了</div>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
score: 100
}
})
</script>
</body>
</html>
```
## 补充：es6数组方法findIndex,数组与字符串判断 的includes
## Demo-完整英雄列表与查询
1. 完成英雄列表
1. v-for对数组进行列表渲染
2. 列表点击功能用v-on绑定事件
1. 点击后，用个值存储当前点击项，存储它的索引就ok了
3. v-bind绑定`class` active
1. 根据索引值就可以完成class绑定
2. 完成中间详情部分
1. 绑定英雄名称用：{{}}
2. 图片：v-bind
3. 英雄特征：v-for
4. 英雄故事: v-html
3. 搜索功能
1. input框的v-model @keyup.enter
2. 按钮的@click事件
1. 搜索出input框字符相匹配的第一个项
2. 把数组进行遍历，对里面每一项的name值进行indexOf判断 ！=-1就是匹配上的
3. 匹配后，改变当前选中项的索引值
4. 优化，找不到相应数据的处理
1. v-if 判断heroIndex的值是否为-1，来确定是否展示相应的数据。
这个demo是一个今天所学所有知识点的一个综合应用，
模板里面有相应英雄的所有数据。
一打开页面，就默认展示所有英雄列表，详情里面展示 第一个英雄的详情
通过搜索，搜索出带有名字带有相关字的英雄列表，同时，英雄详情展示 出列表里第一个英雄的详情。如：
## 今天一定需要掌握的知识点
1. vue.js是什么
1. 它就是一个js框架，它只关心数据，无须操作dom
2. vue.js基本使用
1. 导包
2. 布局
3. 实例化
1. ~~~
new Vue({
el:"#app", 确定vue使用范围
data:{//数据},
methods:{}
})
~~~
3. v-text
1. v-text="一句话表达式"
1. 变量 2：基本运算 3：三元表达式
2. {{}}插值语法
1. v-text用在标签上，全局替换
2. {{}}用在标签文本区域，部分内容替换
4. v-html
1. 用于富文本解析
5. v-model
1. 用法 v-model="变量"
2. 使用范围：表单元素（input textarea select）
6. v-on
1. 用法：@事件名=”一句话表达式或者function“
2. 作用：事件绑定监听
7. this
1. this就是vue实例对象，在methods使用时一定要加this访问data与methods
2. html一定不要加this
8. 修饰符
1. .stop 阻止冒泡
2. .prevent阻止默认事件
3. .enter 回车事件
9. v-bind
1. 用法: :属性名="一句话表达式"
2. 绑定属性控制 属性
10. v-bind对象用法
1. :class="{class类名:boolean值}" true :使用它所对应的class类，false:不使用它所对应的class类
11. v-for
1. 用法: v-for="(item,index) in 数组"
2. item代表数组每一项 index代表索引
12. v-if v-else-if v-else
1. v-if="boolean值" true :渲染所在标签 false不渲染它所在标签
2. v-if与v-else-if v-else一起使用时一定要是相连的兄弟标签
3. v-else无须条件
------------------day02------------------------
# Day02
## 反馈
1. 语速和节奏快：**语速变慢、放慢节奏，多给大家时间吸收，提高吸收率**
2. 知识点方面：
vue事件方法中的this指向不太清楚! Vue的函数中，this指向的是vue实例
v-bind 配合 @input 实现双向绑定不是很懂, 为什么要用name?
this[e.target.name]这块不明白
for循环中的key : key的值不要重复即可
v-show和v-if那个用的多一点？分应用场景：如果需要频繁的切换建议使用v-show，只有当条件真正满足的时候，才渲染
el 挂载点，#app
3. 其它建议：
代码中多些备注
确认一下后一天的范围
能多停顿，让我们来理解，可能会更好！
希望老师第二天上课时，花十几分钟把前一天讲的东西过一遍
老师 互动起来
关于.md笔记 希望您在记笔记的时候每个小的知识点都采用三级标题 这样我们在视图中很好定位
4. 关于基础阶段的预习视频：**因为知识点做了很大的调整和优化，跟之前班级讲的案例、知识点顺序都有很大不一样，所以暂时没有调整后的预习视频，但是项目因为变化不大，视频和资料都有，等基础阶段快结束的时候，再发给大家**
## 内容回顾
### MVVM
### 指令
作用：替代dom操作
分类：
- {{}}：显示内容，它是写在标签之间，其它`v-`开始的写在标签的属性上，还可以进行简单的运算
- v-text & v-html：显示内容，v-text达到的效果跟`{{}}`差不多，v-html相对于`v-text`，可以解析模型中带有html标签的内容
- v-on：事件处理，事件修饰符
- v-bind：单向数据绑定，内容不是写死
- v-model：双向绑定，获取表单元素的值
- v-if & v-show：面试题：什么时候使用v-if、什么时候使用v-show
- v-for：遍历渲染，key不要忘记设置了，然后key的值要唯一
-
**面试题：**如何使用`v-bind`+`@input`来实现`v-model`效果
1. 根据`MVVM`模型，先把架子搭起来
2. 先实现`从模型到视图`，v-bind:绑定input的value
3. 再实现`从视图到模型`，@input然后把文本框中输入的值，赋值给**对应**的模型
## 全局包安装失败的解决办法
1. 卸载`node`，然后去`https://nodejs.org/en/`网站上下载一个比较新的版本进行安装，再安装那两个全局包
2. 如果上一步也执行了，但是不好使，那么找到之前`npm`的缓存目录，目录一般位于`C:\Users\你的用户名\AppData\Roaming`这个文件夹下，找到`npm_cache`这个目录，把它干掉，然后再安装那两个全局包
3. 把npm的镜像设置为淘宝，在终端中执行`npm config set registry https://registry.npm.taobao.org`
4. 要保持一个好的网速，一般情况npm相关的包安装不成功，大部分情况下是网速不好的原因
5. 如果上面你都试了发现还是不行，明天到教室我再帮你看看，千万不要因为装不上而不开心，问题最终都会解决的
## 自定义指令(了解)
### 作用：
如果当你需要自定义一些指令，实现某些效果的时候，我们可以使用自定义指令
### 语法：
### 注意事项：
1. 自定义指令，分为全局和局部的，局部的自定义指令，只能在它自己本身组件中使用，如果是全局的自定义指令，那么所有组件中都可以使用，如果是全局的自定义指令是写在`new Vue`实例的外面，如果是局部的自定义指令，我们要写在`new Vue`的实例中，它也是跟`el`、`data`同级的
2. 我们在编写自定义指令的时候，我们不要加`v-`，但是在视图中使用的时候要加`v-`
3. 全局自定义指令在定义的时候，它的单词`directive`，局部的话叫做`directives`
4. 如果全局自定义指令和局部自定义指令，名字一样，那么优先调用局部
## Computed(计算属性)
### 作用:
主要是对已有的模型数据进行计算，得到一个新的结果
### 语法:
- 它是跟el、data同级，它是叫做`computed`
### 注意事项：
1. 计算属性函数中必须要有返回值
2. 我们在使用计算属性函数的时候，写在`{{}}`中，但是不要加`()`
3. 计算属性一上来解析的时候，就会执行一次，然后当`依赖的`模型值发生了改变之后，他就会再次执行
4. 它有缓存，如果一个功能可以使用计算属性属性也可以使用方法实现，建议使用`计算属性`
## Watch(侦听器)
### 作用：
监听模型数据，当模型数据发生了改变，然后可以执行一些操作
### 语法：
- 和`el`、`data`同级，它的名字`watch`，它的值也是一个对象
### 注意事项：
- watch中的函数名，必须是被监听的data中的属性名
- watch对应的函数中，可以拿到新值及旧值
- watch如果是监听普通的属性，那么watch的函数名就是属性名字，但是如果我们监听的是`对象`、`数组`那么写法上会略有不同，如果是监听对象或是数组的更改，首先要写成对象的形式，并且还要设置一个属性`deep: true`
## Filter(过滤器)
### 作用：
对数据进行过滤，然后把过滤之后的结果，显示在视图上，最典型的应用场景就是对服务器返回的时间进行过滤
### 语法：
- 局部过滤器，它跟`el`、`data`同级，它的名字叫`filters`
- 如果是全局过滤器，是写在`new Vue`外面的，它叫`Vue.filter`
### 注意事项：
- 过滤器也分为`全局`和`局部`，如果很多地方(页面、组件)中都要用到，我们把它定义成全局过滤器，如果只有一个地方用到，建议定义成`局部`过滤器
- 过滤器中根计算属性一样，处理完成之后，要`return`
- 如果全局的过滤器和局部的过滤器名字一样，优先调用局部
## 生命周期(钩子/函数)
### 作用：
就是在我们整个Vue实例生命过程中提供的一些函数，会在特定的时机，由Vue底层执行
### 分类：
- 初次(第一次渲染)渲染（一个生命周期之内，只会执行一次）
- beforeCreate、created、beforeMount、mounted
- 再次(后续)渲染、可能会执行多次，前提：模型数据发生了改变
- beforeUpdate、updated
- 销毁（一个生命周期之内，只会执行一次）
- beforeDestory、destoryed
### 应用场景：
1. created 、mounted：发送ajax
2. mounted、updated：拿到初次渲染或是再次渲染之后dom节点
3. beforeDestory：销毁定时器
### 注意事项：
1. 这些函数不是我们自己在`methods`定义的，它是Vue底层帮我们提供的，这些函数的执行也是在特 定时机，由Vue底层执行，我们只需要定义好这些函数，那么Vue就会执行了零元
## 综合案例：图书管理系统
### 要实现的效果：
图书的增删改查
###涉及到的知识点：
- 指令：v-for(图书列表渲染)、v-model(获取编号、名称的值)、v-on（提交--新增、修改）、插值表达式（图书总数）、v-if（列表数据删没有，提示一下）、v-bind（提交按钮是否可用）
- 计算属性：图书总数
- 过滤器：时间处理
- watch：监听图书重名
- 生命周期钩子：created/mounted 搞一个延时，等几秒之后给模型(图书列表)赋值
- 自定义指令：名称文本框获取焦点
### 实现步骤：
1. 渲染数组、图书总数
2. 新增
3. 修改
4. 删除
5. 其它
------------------day03 ------------------------------
# Day03
## 反馈
建议：
- 回顾时间不要过长
- 复习一下数组（find、findIndex）和字符串的一些操作方法吗
知识点方面：
- 侦听器(watch) 和 @input 都能监听输入的值 有什么区别 过滤器 和 计算属性 功能是一样的吗
过滤器 & 计算属性：都需要返回
计算属性：依赖某一个模型值，算出新的结果
过滤器：对原始数据过滤之后再显示
- 视图里指令对应视图模板里的单词不知道怎么对应，例如：视图里用v-model对应用methods:{}吗？
v-model：data
v-on/生命周期钩子：methods
- 监听器的应用不怎么会
- 如何实现对图书管理中两个表单元素同时监听,没思路,多个if,else之后全给禁用了
- 能不能把那个监听使用的find方法详细讲一下，对这个find函数返回值不是很清楚
其它：
- 案例敲起来真的没思路
- 能听懂 不会敲
- 知识点分散起来能够理解但是组合写一个案例一点也摸不到思路,不知道该干嘛
- 已经习惯了看视频预习第二天的内容 现在没有视频了 突然感觉不知道怎么预习了
## 综合案例（图书管理系统）
### 要实现的效果：
图书的增删改查
###涉及到的知识点：
- 指令：v-for(图书列表渲染)、v-model(获取编号、名称的值)、v-on（提交--新增、修改）、插值表达式（图书总数）、v-if（列表数据删没有，提示一下）、v-bind（提交按钮是否可用）
- 计算属性：图书总数
- 过滤器：时间处理
- watch：监听图书重名
- 生命周期钩子：created/mounted 搞一个延时，等几秒之后给模型(图书列表)赋值
- 自定义指令：名称文本框获取焦点
### 实现步骤：
1. 渲染数组、图书总数
在`mounted`钩子中，模拟后台请求给模型数据赋值，再使用`v-for`遍历渲染
使用`filter`对列表中的每一行时间，进行过滤
通过`computed`实现图书总数的渲染
使用`v-if`，当数组中的长度为0时，给它一个提示
2. 新增
通过`v-model`获取到id、name
给提交按钮添加点击事件
在`submit`方法中，把id、name、date组成一个对象，push到模型books中
当我们输入名称的时候，如果发现了名字跟已有数据相同，则禁用提交按钮（watch、v-bind）,这一步建议先把按钮的禁用或是启动先搞定，然后再监听name的输入，最后根据用户输入的值，来决定是否可用
3. 修改（难）
给修改a标签添加点击事件（考虑a标签的默认行为），拿到id、name
把拿到的id、name通过`v-model`显示到输入框中
多写一个模型值`isEdit`然后根据它的值决定编号文本框是否可用（v-bind）
点击提交之后，根据`isEdit`来进行判断，如果是`true`就是修改，如果是`false`就是新增
如果是修改的话，先根据id找到对应的对象，然后修改对象的name和date即可
4. 删除
给删除a标签添加点击事件（考虑a标签的默认行为），并且要拿到参数(index、id)
根据索引，删除数组中对应的元素即可
5. 其它
如果传递的是一个id，要删除数组中的元素，第一种根据id，找到对应的索引，然后删除
## 组件
### 传统写法（了解）
### 注意事项：
- 组件也分为全局与局部组件
- 组件中的内容，跟之前不一样的地方在于`data`必须是一个函数，并且里面要返回一个全新的`对象`
### 单文件组件(重点)
> 组成部分
- template：必须要有
- script：可选
- style：可选
### 注意事项：
- `.vue`结尾的额文件，既可以充当`页面`，也可以充当`组件`
- 页面跟组件的关系就是包含关系，比如一个页面可以包含多个组件
- 我们一般会把叫做`App.vue`的文件叫做根组件，他是第一个被看到的文件，有点首页的意思
- `.vue`结尾的文件，浏览器不识别，需要借助于`webpack`
- 运行当文件组件的时候，要把终端切换到文件所在目录，然后运行`vue serve App.vue --open`
### 脚手架 & 运行单文件组件
### 快速原型开发
这个是vue给我们提供的一个便利，这个可以让我们无需生成一个完整的项目情况下，也可以进行一些简单的尝试性
### 注意事项：
- 我们的组件，导入之后，必须注册之后才能使用
### 前提：
安装一个全局包：`npm install -g @vue/cli-service-global`
### 组件间传值
#### 父组件传值给子组件
#### 子组件传值给父组件
#### 兄弟组件传值
## 模块化
核心：模块化的核心就是导出与导入
node: require(导入)、module.exports(导出)
**以后无论是浏览器端还是服务端(node)，都推荐使用es6的模块化导入、导出**
**导出：export default**
**导入：import 名字 from '路径'**
-------------------- day04 ---------------------------------------------
# Day04
## 反馈
知识点：
- 沙箱（闭包）和vue组件（模块）的相同点和不同点
相同点：都有独立的作用域，都是解决全局变量名污染
不同点：语法上，闭包有点缺陷，模块没有
模块化的核心：导入和导出
导入：import xxx from '路径' / import '路径'
导出：export default(只导出一个成员) / export （导出多个成员）
- 父组件和子组件有点模糊
- 再讲下数组值传递和引用传递，数组引用类型那个没搞懂，可以讲讲原理吗？
其它：
- 一下吸收好多内容 脑容量撑不住了
## 内容回顾
页面 & 组件： 页面大，组件小
.vue组成的三部分：template(必须)、script、style
vue serve App.vue --open
## 组件传值(传数据)
### 父组件传值给子组件（props）
应用场景：以后使用element-ui的table组件，你得给它传值
传值方：父组件
写在template
接收方：子组件
写在script
### 子组件传值给父组件（通过触发自定义事件）
传值方：子组件
写在script里面
this.$emit(事件的名字, 参数)
接收方：父组件
### 兄弟组件传值（通过触发自定义事件）
注意：虽然我们兄弟组件传值，也是使用触发自定义事件，但是跟子组件传值给父组件不一样的地方在于不能使用`this`
它需要的是一个公共的Vue实例`new Vue()`
传值方：兄弟一组件
接收方：兄弟二组件
步骤：
1、整一个模块，创建一个公共的Vue实例(bus)，然后导出
2、在传值方，导入公共的bus，然后通过调用公共的bus，触发自定义事件
3、在接收方，在生命周期钩子`mounted`中，注册监听自定义事件，并且写好处理函数
## 插槽（slot）(传视图)
注意：**用于父子组件之间传值****（传视图）**
体会：**灵活**
`<slot></slot>`必须写在子组件中，它其实是起了一个占位的作用
应用场景：一般第三方UI组件中用得很多，比如ElementUI，如果我们自己要封装一个UI组件库，也离不开插槽
一般第三方UI组件库中的那些组件，其实里面就写好了`<slot></slot>`，等着我们使用他们的时候去替换他们，比如
`Dialog`
### 默认插槽
步骤：
1. 形成好父子组件关系
2. 在子组件中使用`<slot>默认内容</slot>`默认插槽占个位
3. 在父组件template中，在使用子组件的标签之间写上我们的**视图部分**
```vue
<template>
<my-dialog>
想要显示的内容，写在这里
</my-dialog>
</template>
```
### 具名插槽
应用场景：一个子组件中有多个地方要被替换，这个时候，我们就使用具名插槽
步骤：
1. 形成好父子组件关系
2. 在子组件中，使用多个`<slot></slot>`写好插槽，但是一个子组件中只能有一个默认插槽
3. 在父组件中，根据插槽的名字来进行替换，也需要在template中的**子组件标签**之间写
### 作用域插槽（难）
作用：把显示内容的控制权，控制在父组件中
涉及到的知识点：父组件传值给子组件、
步骤：
1. 形成父子关系
2. 在父组件中给MyTable子组件，传递一个数组
3. 子组件接收到值之后，把能渲染的，先渲染
4. 子组件中，最后一列无法自己搞定，那么它就使用`<slot v-bind:xxx="yyy"></slot>`把值传递给父组件，并且等着将来被替换
5. 父组通过作用域插槽` <template #test="slotProps"></template>`，拿到子组件中传递的值，然后渲染好好内容，最终把子组件中`<slot></slot>`占位的地方替换到
疑惑点：
1. 为什么现在自己写子组件，后面我们就不会再写子组件了，因为Element已经写好了，它内部就是通过`<slot v-bind:xxx="yyy"></slot>`传给父组件
2. 我们以后主要是在父组件中，通过作用域插槽` <template #test="slotProps"></template>`，拿嗯么到子组件传递过来的值，然后自己决定渲染成什么样子（**父组件掌握控制权**）
## 路由
### 概念
它是用来实现单页面应用(SPA Single Page Application)，与之对应的是多页应用（京东、淘宝）
单页面应用的典型例子：网易云音乐
多页面应用的典型例子：京东
### 使用脚手架生成项目
前提：安装全局包 `npm i @vue/cli -g`
生成步骤：
1. 把终端切换到桌面
2. 在终端中输入`vue create router_test`
3. 进行选择
4. 把**项目切换到生成项目的根目录下**，运行`npm run serve`
5. 如果希望运行`npm run serve`的时候，自动打开浏览器，在项目根目录下的package.json中的scripts/serve 的值后面
接一个--open
6. 当项目生成完之后，运行也没有问题了，那么就在终端中输入`npm i vue-router`【注意：在项目根目录】
### 基本使用
------------------------- day05 ----------------------------
# 反馈
建议：
- 老师能否把知识点放到单个文件里头讲?
- 注释写的再详细一点
- 录制视频音质，能不能调整下
- 讲快点,尽量多给点时间敲.比如坤哥,上午讲完下午敲!真香.
- 回顾的时候把重点回顾就可以了
- 希望可以回顾下语法 就只写语法的那种 这一步写完下一步去那里写 不要带入案例的说一下
知识点：
- 子传父$emit()只能写在事件中吗
- 组件可以改数据和视图，插槽只能改视图是吗？
- this.$emit的this是啥, 父组通过拿到子组件中传递的值，然后渲染好好内容，把子组件中<slot></slot>占位的地方替换到以后,这个会影响复用这个子组件吗还是只针对这一次
- 子组件传值给父组件，父组件接收子组件在子组件上监听事件@子组件触发事件名=“事件处理函数（这里需要写形参接收传过来的参数吗？）”，因为在methods里面有写形参，前后不一致啊好像
- 插槽传值 ：和v-bind的简写：怎么区分
- 兄弟间传值用生命周期钩子mounted，这个不太懂，老师能再讲讲吗
其它:
- 网太卡了 不好查资料
## 内容回顾
组件间传值：
- 父组件传值给子组件（props）
- 子组件传值给父组件（触发自定义事件）
- 兄弟组件传值（使用公共的bus，触发自定义事件）
插槽：只作用于父子组件之间
- 默认插槽
- 具名插槽
- 作用域插槽：把控制显示的权利掌握在父组件中
路由：实现单页面应用
生成项目：按照我截图去走
## 路由
### 基本使用
效果：点击两个链接的时候，分别显示对应的内容，并且浏览器不刷新，也不打开新的页面
实现步骤1：(按照之前的知识点想的步骤)
1. 创建两个组件(NewsList.vue、FoodList.vue)，并且写好内容
2. 在父组件(App.vue)中导入两个子组件(NewsList.vue、FoodList.vue)，并且注册，使用
3. 在父组件(App.vue)中设置两个a标签，给他们添加点击事件
4. 当点击新闻列表的时候，通过条件渲染显示新闻列表
5. 当点击食品列表的时候，通过条件渲染显示食品列表
实现步骤1：(使用vue-router实现)
1. 创建两个组件(NewsList.vue、FoodList.vue)，并且写好内容
2. 在`App.vue`中，使用`<router-link to="/newslist"></router-link>`
3. 安装路由包`npm i vue-router`
4. 在src目录下创建一个`router`文件夹，里面再创建一个`index.js`的文件，然后写好路由的代码
```js
/**
* 路由相关的代码就写在这里
*/
// 导包
import Vue from 'vue'
import VueRouter from 'vue-router'
// 在项目中使用路由
Vue.use(VueRouter)
// 创建路由对象，并且导出
const router = new VueRouter({
// 配置路由规则
routes: []
})
// 导出
export default router
```
5. 在`main.js`中导入创建好的路由对象，并且注入到根实例中，这样我们整个项目就有了路由功能
```js
// 导入路由
import router from './router'
new Vue({
render: h => h(App), //h其实是形参
router // 把路由注入到根实例中、让我们应用拥有路由的功能
}).$mount('#app')
```
6. 在`src/router/index.js`中在创建路由对象的时候，设置好里面的路由规则`routes`
```js
// 创建路由对象，并且导出
const router = new VueRouter({
// routes: 配置路由规则,这个`routes`很多人容易写错
routes: [
/**
* path：匹配的路径
* component: 匹配到的组件,这个单词不要写错
*/
{ path: '/newslist', component: NewsList },
{ path: '/foodlist', component: FoodList }
]
})
```
7. 我们得在`App.vue`中某个位置，写上路由出口`<router-view></router-view>`，然后路由匹配到的组件将渲染在这里
```vue
<template>
<div>
<p>
<!-- 1.0 设置点击链接 -->
<!-- router-link最终会渲染成a标签，to代表跳转到地址，必须设置，最终会渲染成href，否则报错 -->
<!-- 当我们配置完我们路由代码之后，这个组件就自动起作用了，原因是因为，我们写完路由代码之后
这个router-link组件会进行全局注册 -->
<router-link to="/newslist">新闻列表</router-link>
<router-link to="/foodlist">食品列表</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
```
### 路由模式
> hash模式
页面的url上面会有一个`#`，这个叫做hash，这个也是路由的默认模式，hash无需后台配置
> history模式
页面的url上面没有`#`，它底层实现是基于h5之后history的一个新API，`history.pushState`，但是如果我们使用history模式的话，我们的后台得配合我们
设置：在`src/router/index.js`中进行设置
```js
// 创建路由对象，并且导出
const router = new VueRouter({
mode: 'history', // 默认是hash，如果你要更改，那么就在mode属性中更改
// 5. routes: 配置路由规则,这个`routes`很多人容易写错
routes: [
/**
* path：匹配的路径
* component: 匹配到的组件,这个单词不要写错
*/
{ path: '/newslist', component: NewsList },
{ path: '/foodlist', component: FoodList }
]
})
```
### 命名路由、重定向、404
### 路由传参
> query
语法：比如：/playlist?id=5089855855
实现步骤：
1. 先创建一个`NewsDetail.vue`
2. 在`NewsList.vue`中使用`<router-link></router-link>`设置跳转链接
```vue
<template>
<div>
<ul>
<li>
<router-link to="/newsdetail?id=1001">上海名媛拼多多</router-link>
</li>
<li>
<router-link to="/newsdetail?id=1002">新冠疫苗上市了</router-link>
</li>
<li>
<router-link to="/newsdetail?id=1003">深圳成立40周年</router-link>
</li>
</ul>
</div>
</template>
```
3. 在`src/router/index.js`中设置路由规则
```js
// query传参，路由规则设置
{ path: '/newsdetail', component: NewsDetail }
```
4. 在跳转过来的组件中，拿到id
> params
语法：比如：/mv/10929636
步骤：
1. 新建一个`FoodDetail.vue`
2. 在`FoodList.vue`中通过`router-link`，设置可以点击的链接
```vue
<template>
<div>
<ul>
<li>
<router-link to="/fooddetail/2001">法国鹅肝</router-link>
</li>
<li>
<router-link to="/fooddetail/2002">澳洲鱼子酱</router-link>
</li>
<li>
<router-link to="/fooddetail/2003">澳洲波龙</router-link>
</li>
</ul>
</div>
</template>
```
3. 在`src/router/index.js`中配置路由规则**(不一样)**
4. 在新的组件中，获取参数
### 嵌套路由 & 编程式导航
嵌套路由：应用场景，后台管理
`$route`、`$router`
$route：获取参数(query,params)、监听路由变化
`$router`：编程式导航 `this.$router.push('/layout')`，就是通过js代码跳转
实现步骤：（主要写Layout中的代码实现）
1. 把左边、右边UI写好
2. 创建两个组件`Menu1.vue`、`Menu2.vue`【它只是展示在Layout.vue的右边】
3. 在Layout.vue左边，使用`<router-link to="xxx"></router-link>`设置好跳转链接
4. 在`src/router/index.js`我们要配置嵌套路由规则了，**这个和之前还略有不同**
5. 在`Layout.vue`的右边，设置下路由出口
## axios
### 作用：
用于发送ajax请求
文档地址：https://github.com/Duanzihuang/vuebase/blob/main/day05/2-%E5%85%B6%E5%AE%83%E8%B5%84%E6%96%99/server_api/API.md
方法名的含义：GET：获取、POST：新增、PUT：修改、DELETE：删除
### 注意：
注意：
- **`GET`和`DELETE`都是是通过url传参，建议写在第二个参数上，通过`params: {aaa:bbb,yyy:zzz}`传参**
- **`POST`和`PUT`都是通过请求体传参，也是写在第二个参数上，但是不需要设置`params`属性，直接写`{aaa:bbb,yyy:zzz}`即可，这个要和`GET`、`DELETE`区别一下**
- **如果需要设置请求头，一定要注意，如果是`GET`和`DELETE`请求，则是要写在第二个参数上，和`params`同级，例如`axios.get(url, {params:{aaa:bbb,yyy:zzz},headers: {token:'Dadsafd111'}})`如果是`POST`和`PUT`则写在第三个参数上，例如`axios.post(url, data,{headers: {token:'Dadsfsa222'}})`，强烈建议如果多个地方都需要设置请求头，则统一在请求拦截器中进行处理**
### 基本使用
1. 导入axios
2. axios.get、axios.post、axios.put、axios.delete
### 其它配置
基准路径：axios.defaults.baseURL = 'http://huangjiangjun.top:3006/api/'
### 拦截器
建议：不要手写，容易单词写错，copy过来之后再改
```js
// 设置请求拦截器
axios.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么
// console.log(config)
config.headers.token = 'asfasfasdaf'
return config
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error)
}
)
// 添加响应拦截器
axios.interceptors.response.use(
function (response) {
// 对响应数据做点什么
// console.log(response)
// 只把服务器返回的数据返回给 axios.get/post/put/delete的方法中的then
return response.data
},
function (error) {
// 对响应错误做点什么
return Promise.reject(error)
}
)
```
## async(异步函数)
### 回顾Promise
## 其它
Vue中哪些地方建议大写，哪些地方需要小写
大写：组件的命名，及导入它时候的名字
小写：组件的 template 中、路由规则中的 path 也是小写
### 作业
在桌面生成一个叫做`hymusic`的项目
生成项目之后再安装如下包：
npm i vue-router axios element-ui moment
**安装之后，把终端切换到项目根目录，然后运行**`npm run serve`
网友评论