【vue】知识-------中

目录

Axios

$refs

$nextTick使用   

动态组件

组件缓存

组件插槽

插槽默认内容

具名插槽

作用域插槽

自定义指令

全局注册

局部注册

自定义指令---传值

---

Axios

Ajax:一种前端异步请求后端的技术

Ajax原理：浏览器window接口的XMLHttpRequest

Axios 基于ajax+promise技术封装通用于前后端的请求库

特点：

    支持客户端发送Ajax请求

    支持服务端Node.js发送请求

    支持Promise相关用法

    支持请求和响应的拦截器功能

    自动转换JSON数据

Axios底层还是原生js实现，内部通过promise封装的

axios函数调用原地结果是一个Promise对象

post请求方式，一般在请求体中传递数据给后台

Axios默认发给后台请求数据格式是json字符串

axios({
    method: '请求方式', //get post
    url: '请求地址',
    data: {
        xxx: xxx, //拼接到请求体的参数，post请求的参数
    },
    params: {
        xxx: xxx, //拼接到请求行的参数，get请求的参数
    },
}).then(res => {
    console.log(res.data) //后台返回的结果
}).catch(err => {
    console.log(err) //后台报错返回
})

全局配置

axios.defaults.baseURL="前缀地址"

修改全局url/以后的请求都不用带前缀地址

---

$refs

通过id或ref属性获取原生dom

在mounted生命周期-----两种方式获取原生DOM标签

1.目标标签---添加id/ref

<h1 ref="myH1" id="h">ref/id获取原生DOM</h1>

2.恰当时机，通过id/通过ref属性获取目标标签

mounted() {
    console.log(document.getElementById("h"));
    console.log(this.$refs.myH1);
}

通过ref属性获取组件对象

1.创建Demo组件，写一个方法

2.App.vue使用Demo组件，给ref属性-名字随意

<Demo ref="de"></Demo>   //写在父组件上

3.恰当时机，通过ref属性获取组件对象，可调用组件对象里方法等（相当于父传子）

mounted(){              //写在父组件上
    this.$refs.de.fn()   //fn()是Demo里面的方法
}

---

 $nextTick使用   

返回的是一个promise对象

等DOM更新后，触发此方法里的函数体执行

this.$nextTick(函数体)  DOM更新完后会挨个触发$nextTick里的函数

<template>
  <p ref="myp">{{count}}</p>
  <button @click="btn">点击count+1，马上提取p标签内容</button>
</template>

<script>
export default {
  data(){
    return{
      count:0
    }
  },
  methods:{
    btn(){ 
      this.count++;  //data改变更新DOM是异步的
      // console.log(this.$ref.myp.innerHTML);   //0   因为vue检测数据更新，开启一个DOM更新队列（异步任务）
    this.$nextTick(()=>{
      console.log("DOM更新后触发$nextTick函数");
      console.log(this.$ref.myp.innerHTML);
    })  //或者也可以在updated生命周期钩子函数访问更新后的DOM
    }
  }
}
</script>

组件name可用作注册组件的名字

例如：

ComName.Vue

<template>
  <div>
    <p>我是一个组件</p>
  </div>
</template>

<script>
export default {
  name: "ComNameHaHa",
};
</script>

App.vue

<template>
<div>
  <ComNameHaHa></ComNameHaHa>
  </div>
</template>

<script>
import ComName from './components/ComName';
export default {
  components :{
    [ComName.name]:ComName,
  },
}
</script>

---

动态组件

多个组件使用同一个挂载点，并动态切换

①准备切换的两个组件

②引入导入上面两个组件

③准备变量来承载要显示的组件名

④设置挂载点<component>,使用is属性来设置要显示哪个组件

⑤点击按钮，修改变量的组件名就可实现切换效果

组件缓存

Vue内置的keep-alive组件，包起来要频繁切换的组件

组件激活和非激活

扩展的两个生命周期函数

activated     激活时触发

deactivated   失去激活状态触发

组件插槽

为了让封装的组件显示不同的标签结构（灵活）

通过slot标签，让组件内可以接收不同的标签结构显示

①组件内用<slot></slot>占位

②使用组件时<Pannel><Pannel>夹着的地方，传入标签替换slot

插槽默认内容

如果后面不给传，给个默认内容

<slot>内放置内容，作为默认显示内容

具名插槽

一个组件内有2处以上需要外部传入标签的地方

①slot使用name属性区分名字

②template配合v-slot名字来分发对应标签

v-slot可以简化为#

作用域插槽

使用插槽时，想要使用子组件内变量  

defaultObj:{

defaultOne:”无名氏”，

defaultTwo:”小川同学”

}

①子组件，在slot上绑定属性和子组件内的值   例如<slot :row=”defaultObj”></slot>

②使用组件，传入自定义标签，用template和v-slot=”自定义变量名”  例如：<template v-slot=”scope”></template>

③在上一步的自定义变量名自动绑定slot上所有属性和值，此时scope变量：{row:defaultObj}  例如：{{scope.row.defaultTwo}}

---

自定义指令

全局注册

Vue.directive(“指令名”,{

inserted(el){

//可以对el标签扩展额外功能

}

})

局部注册

directives：{

指令名字:{

inserted(el){    //指令所在标签被插入到网页上，才会执行

          //对el进行操作

}

}

}

自定义指令---传值

使用一个例子说明

定义color指令---传入一个颜色，给标签设置文字颜色，并且当数据改变，页面样式也会改变

在main.js中

Vue.withDirectives("color",{
    inserted(el,binding){   //binding固定用法  当绑定的元素插入到父元素中时调用
        el.style.color=binding.value;
    },
    update(el,binding){  //值或模板更新时，触发此函数
        el.style.color=binding.value;
    }
})

在使用自定义指令的组件内

<p v-color="colorStr">修改文字颜色</p>

export default {
  data(){
    return{
      colorStr:'red',
    }
  }
}