day5 vue 笔记 axios 动态组件 插槽 自定义指令 ESLints
系列文章目录
day1学习vue2笔记 vue指令
day2 学习vue2 笔记 过滤器 侦听器 计算属性 axios
day3 vue2 学习笔记 vue组件
day4 vue 学习笔记 组件 生命周期 数据共享 数组常用方法
day5 vue 笔记 axios 动态组件 插槽 自定义指令 ESLints
day6 vue 学习笔记 vue-router路由
文章目录
前言
一、axios
1、安装 axios
2、导入 axios
3、get
4、Post
二、动态组件
1、什么是动态组件
2、如何实现动态组件渲染
3、使用 keep-alive 保持原状态
4、 keep-alive 对应的生命周期函数
5、. keep-alive 的 include 属性
三、插槽
1、说明是插槽
编辑
2、体验插槽的基础用法
2.1、没有预留插槽的内容会被丢弃
2.2、后备内容
3、具名插槽
3.1 为具名插槽提供内容
4、作用域
4.1 使用作用域插槽
4.2 解构插槽 prop
四、自定义指令
1. 什么是自定义指令
2. 自定义指令的分类
3. 私有自定义指令
4. 使用自定义指令
5. 为自定义指令动态绑定参数值
6. 通过 binding 获取指令的参数值
7. update 函数
8. 函数简写
9. 全局自定义指令
五、main.js
六、ESLint
1、ESLint 作用
2、在webstorm 中更改代码空格数量
3、Visual Studio Code 修改格式化空格数量
4、vue 项目创建 引入 ESLint
总结
1、axios的简单使用
1.1 安装：
1.2 导入
1.3 GET
1.4 POSt
2、动态组件
3、插槽
4、自定义指令
前言
vue 学习笔记
一、axios
1、安装 axios
1、如果调用某一个方法的返回值是 promise 实例，则前面可以添加 await
2、await 只能用在被 async “修饰” 的 方法中
axios
npm install axios2、导入 axios
// 导入 axios
import axios from 'axios';3、get
async initCartList(){
// 调用 axios 的 get 方法，请求列表
const {data:res} = await axios.get('https://www.escook.cn/api/cart')
console.log(res)
}, async fun01(){
await axios({
method:'GET',
url:"http://www.liulongbin.top:3006/api/getbooks",
// GET 参数: URL 中的查询参数
params:{
id:1
},
// POST 参数
data:{},
}).then(function(result){
console.log(result)
})
},
// ================== axios.get =============
async fun_03() {
const {data : res} = await axios.get('http://www.liulongbin.top:3006/api/getbooks')
console.log(res)
},
// 传参
async fun_04() {
const {data : res} = await axios.get('http://www.liulongbin.top:3006/api/getbooks',{
params:{
id:1
}
})
console.log(res)
},
4、Post
async fun01(){
axios({
method:'POST',
url:"http://www.liulongbin.top:3006/api/post",
// POST 参数
data:{
name:'zs',
age:'20'
},
}).then(function(result){
console.log(result)
})
},
async fun_05() {
const {data : res} = await axios.post('http://www.liulongbin.top:3006/api/post',
{
name:'zs',
gender:'女'
},
)
console.log(res)
},二、动态组件
1、什么是动态组件
动态组件指的是 动态切换组件的显示与隐藏。
2、如何实现动态组件渲染
vue 提供了一个内置的
注意：
- 当切换时 组件会被销毁，和重新创建。 如果要保存就用 keep-alive
- 如果在说明组件的时候，没有为组件指定 name 名称，则组件的名称就是注册时候的组件名称，当提供了组件的名称那么现实的就是 索取的名称
取名的地方在每一个Vue组件的script中进行：
export default {
name:'MyLeft',
}注册名称：注册名称的主要应用场景是：以标签的显示，把注册好的组件，渲染和使用到页面结构之中
组件名称：组件声明的时候的“name”名称主要应用场景：结合
3、使用 keep-alive 保持原状态
默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的
keep-alive 可以把内部的组件进行缓存，而不是销毁；
4、 keep-alive 对应的生命周期函数
当组件被缓存时，会自动触发组件的 deactivated 生命周期函数。
当组件被激活时，会自动触发组件的 activated 生命周期函数。
activated() {
console.log("组件被激活了")
},
deactivated() {
console.log("组件被缓存了")
}当组件第一次创建时，机会执行 created 生命手气，也会执行 activated 生命周期；
当组件被激活的时候，只会触发activated 生命周期，不在触发 created 。因为组件没有被重写创建；
5、. keep-alive 的 include 属性
include 属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用 英文的逗号分隔：
<keep-alive include="Left,Right">
<component :is="comName">component>
keep-alive>exclude 属性与 include 属性相反；（排除）
这两个属性不能同时使用只能用一个；
<keep-alive exclude="Left,Right">
<component :is="comName">component>
keep-alive>三、插槽
1、说明是插槽
插槽（Slot）是 vue 为 组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。
可以把插槽认为是组件封装期间，为用户预留的内容的占位符。
2、体验插槽的基础用法
在封装组件时，可以通过
vue 官方规定每一个 slot 插槽，都要有一个 name 名称。
如果省略了 slot 的 name 属性，则默认有一个名称叫 defauit;
默认情况下，在使用组件的时候，提供的内容会被填充到名称为 default 的插槽之中。
2.1、没有预留插槽的内容会被丢弃
如果在封装组件时没有预留任何
2.2、后备内容
封装组件时，可以为预留的
3、具名插槽
如果在封装组件时需要预留多个插槽节点，则需要为每个
3.1 为具名插槽提供内容
在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。示例代码如下
<Left>
<span>在Left 组将中声明的 span 标签 放到 slot 默认的标签中span>
<template v-slot:slot_deom1>
<span>将内容发哦到 slot_deom1 插槽中span>
template>
Left>
<template>
<div class="left-container">
<h3>Left 组件h3>
<hr>
<slot>
slot>
<hr>
<h3>指定放到对应的插槽中h3>
<slot name="slot_deom1">slot>
div>
template>
<script>
export default {
}
script>
<style lang="less">
style>
4、作用域
在封装组件的过程中，可以为预留的
给插槽中进行传值的插槽叫作用域插槽：
4.1 使用作用域插槽
可以使用 v-slot：的形式，接受作用域插槽对外提供的数据。
4.2 解构插槽 prop
作用域插槽对外提供的数据对象，可以使用解构赋值简化数据的接收过程。示例代码如下：
注意：
- 如果吧内容填充到指定的名称插槽中，需要使用 v-slot 这个指令
- v-lsot ：后面要跟上插槽的名称；
- v-slot ： 指令不能直接用在元素身上，必须用在 template 标签；
- template 这个标签，它是一个虚拟的标签，只起到包裹性质的作用，但是，不会被渲染为任何实质性的 html 元素；
- v-slot :指令的简写形式是 #
- 在封装组件时，为预留的
提供属性对应的值，这种用法叫“作用域插槽”，无其他属性叫具名插槽
四、自定义指令
1. 什么是自定义指令
vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。
2. 自定义指令的分类
vue 中的自定义指令分为两类，分别是：
⚫ 私有自定义指令
⚫ 全局自定义指令
3. 私有自定义指令
在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令。示例代码如下：
自定义指令使用
directives:{
//定义 color的指令
color:{
// 当指令第一次被绑定到元素上的时候，会立即触发 bind 函数
// 形参中的 el 表示当前指令所绑定的那个 DOM 对象
bind(el){
console.log("触发了 color bind 方法",el)
el.style.color='red';
},
},
},步骤：
1、定义到 directives 节点中；
2、在定义 指令的时候 不用加 v-前缀，只是在使用的时候加 v- 前缀；
3、bind 是在指令第一次绑定的时候会立即触发 bind 函数；
4. 使用自定义指令
在使用自定义指令时，需要加上 v- 前缀。示例代码如下
5. 为自定义指令动态绑定参数值
在 template 结构中使用自定义指令时，可以通过等号（=）的方式，为当前指令动态绑定参数值：
6. 通过 binding 获取指令的参数值
在声明自定义指令时，可以通过形参中的第二个参数，来接收指令的参数值：
<template>
<div class="right-container">
<h3>Right 组件h3>
<hr>
<h5 v-color="color">自定义指令使用h5>
div>
template>
<script>
export default {
data(){
return{
color:"blue",
}
},
directives:{
//定义 color的指令
color:{
// 当指令第一次被绑定到元素上的时候，会立即触发 bind 函数
// 形参中的 el 表示当前指令所绑定的那个 DOM 对象
bind(el,binding){
console.log("触发了 color bind 方法",el,binding)
el.style.color=binding.value;
},
},
},
}
script>
style>
7. update 函数
bind 函数只调用 1 次：当指令第一次绑定到元素时调用，当 DOM 更新时 bind 函数不会被触发。 update 函数会在每次 DOM 更新时被调用。示例代码如下：
8. 函数简写
如果 bind 和update 函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式：
9. 全局自定义指令
全局共享的自定义指令需要通过“Vue.directive()”进行声明，示例代码如下：
注意：
1、bind 是在指令第一次绑定的时候会立即触发 bind 函数；
2、update 是当数据改变时才触发，当页面第一次渲染时不会被触发；
3、v- 前缀只有在使用的时候才用，定义的时候不用；
五、main.js
如果改为 true
Vue.config.productionTip = false 默认为 true
六、ESLint
ESLint官网
ESLint - 插件化的 JavaScript 代码检测工具 - ESLint中文文档
1、ESLint 作用
提供一个插件化的javascript代码检测工具。约束代码风格；
2、在webstorm 中更改代码空格数量
3、Visual Studio Code 修改格式化空格数量
文件--》首选项 ---》设置 搜索 tab size
4、vue 项目创建 引入 ESLint
ESLint + Standard config 标准库
1、在代码保存的时候进行代码规范检查；
2、提交代码的时候进行代码规范审查和修正；
1、配置文件放到独立的配置文件中；
2、将配置文件放到 package.json 中
在项目中 ESlint 的配置文件
自定义规则： 到官网上查找配置
在 JavaScript，虽然console 被设计为在浏览器中执行的，但避免使用 console 的方法被认为是一种最佳实践。这样的消息被认为是用于调试的，因此不适合输出到客户端。通常，在发布到产品之前应该剔除 console 的调用。
出现这种报错就是因为 ESLint 中的格式不正确
常见的一些规则：
ggkList of available rules - ESLint中文文档
总结
① 能够掌握 keep-alive 元素的基本使用
⚫
② 能够掌握插槽的基本用
⚫
③ 能够知道如何自定义指令
⚫ 私有自定义指令 directives: { }
⚫ 全局自定义指令 Vue.directive()
1、axios的简单使用
1.1 安装：
npm install axios1.2 导入
// 导入 axiosimport axios from 'axios'
1.3 GET
async fun01(){
await axios({
method:'GET',
url:"http://www.liulongbin.top:3006/api/getbooks",
// GET 参数: URL 中的查询参数
params:{
id:1
},
// POST 参数
data:{},
}).then(function(result){
console.log(result)
})
},
// ================== axios.get =============
async fun_03() {
const {data : res} = await axios.get('http://www.liulongbin.top:3006/api/getbooks')
console.log(res)
},
// 传参
async fun_04() {
const {data : res} = await axios.get('http://www.liulongbin.top:3006/api/getbooks',{
params:{
id:1
}
})
console.log(res)
},
1.4 POSt
axios({
method:'POST',
url:"http://www.liulongbin.top:3006/api/post",
// POST 参数
data:{
name:'zs',
age:'20'
},
}).then(function(result){
console.log(result)
})
},
async fun_05() {
const {data : res} = await axios.post('http://www.liulongbin.top:3006/api/post',
{
name:'zs',
gender:'女'
},
)
console.log(res)
},
2、动态组件
默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的
当组件被缓存时，会自动触发组件的 deactivated 生命周期函数。
当组件被激活时，会自动触发组件的 activated 生命周期函数。
include 属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用 英文的逗号分隔：
- 当切换时 组件会被销毁，和重新创建。 如果要保存就用 keep-alive
- 如果在说明组件的时候，没有为组件指定 name 名称，则组件的名称就是注册时候的组件名称，当提供了组件的名称那么现实的就是 索取的名称
3、插槽
- 如果吧内容填充到指定的名称插槽中，需要使用 v-slot 这个指令
- v-lsot ：后面要跟上插槽的名称；
- v-slot ： 指令不能直接用在元素身上，必须用在 template 标签；
- template 这个标签，它是一个虚拟的标签，只起到包裹性质的作用，但是，不会被渲染为任何实质性的 html 元素；
- v-slot :指令的简写形式是 #
- 在封装组件时，为预留的
提供属性对应的值，这种用法叫“作用域插槽”，无其他属性叫具名插槽
4、自定义指令
1、私有自定义指令
自定义指令使用
directives:{
//定义 color的指令
color:{
// 当指令第一次被绑定到元素上的时候，会立即触发 bind 函数
// 形参中的 el 表示当前指令所绑定的那个 DOM 对象
bind(el){
console.log("触发了 color bind 方法",el)
el.style.color='red';
},
},
},
//简写 其中有了 bind 和 update 方法
directives:{
color(el,binding){
el.style.color=binding.value
}
},2、全局自定义指令
//定义全局 指令
Vue.directive('color',function (el,binding) {
el.style.color=binding.value
})- bind 是在指令第一次绑定的时候会立即触发 bind 函数；
- update 是当数据改变时才触发，当页面第一次渲染时不会被触发；
- v- 前缀只有在使用的时候才用，定义的时候不用；