vue笔记（5）

原创已于 2022-03-26 11:27:51 修改 · 127 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

于 2022-03-20 17:44:03 首次发布

本文介绍了Vue.js中的$refs使用方法，用于聚焦文本框和组件动态显示隐藏。还讲解了数组过滤reduce方法，组件动态加载，v-slot及keep-alive的运用，以及自定义指令的创建。此外，还提到了axios的全局配置和在Vue 2与Vue 3中的使用方式。

$refs 如何使用

<input type="text" v-if="inputVisible" @blur="showButton" ref="iptRef" />  blue焦点离开
    <button v-else @click="showInput">展示输入框</button>  

howInput() {
      // 1. 切换布尔值，把文本框展示出来
      this.inputVisible = true
      // 2. 让展示出来的文本框，自动获取焦点
      this.$nextTick(() => {        数据更新后执行 this.$nextTick(()=>{})括号中是回调函数
        this.$refs.iptRef.focus()
      })
    },
showButton() {
      this.inputVisible = false   焦点离开隐藏
    },

编码规范先指令 v-xx 后属性 : xx 在事件 @xx

reduce

 return this.list
      .filter(item=>item.goods_state)
      .reduce((e,item)=>e+=item.goods_count,0)


list.reduce((x,item)=>运算式,默认值)  x为自定义变量  item==list

components标签可动态显示或隐藏组件

通过切换变量值来实现组件动态显示/隐藏

 <button @click='comName="Left"'>Left</button>
 <button @click='comName="Right"'>Right</button>
 <components :is='comName'></components>

v-solt 及name 只能用在template中

v-slot :' '==# <slot name="defau"></slot>

<template v-slot:defau/#defau></template>

keep-alive 将内部组件进行缓存而不是销毁

include保存Left组件exclude只销毁Right  两者只能同时存在一个
<keep-alive include="Left" include='Left'/exclude=Right>
          <components :is='comName' ></components>
</keep-alive>

插槽应用爷孙传递数据

  爷        <Counter   :num='item.goods_count' @num-change='getadd(item)'></Counter>
  父               <slot></slot>
  孙     接受数据即可使用  props：{"num"}

directives自定义指令

私有自定义指令的节点

私有自定义指令的节点
  directives: {
    // 定义名为 color 的指令，指向一个配置对象
    /* color: {
      // 当指令第一次被绑定到元素上的时候，会立即触发 bind 函数
      // 形参中的 el 表示当前指令所绑定到的那个 DOM 对象
      bind(el, binding) {
        console.log('触发了 v-color 的 bind 函数')
        el.style.color = binding.value
      },
      // 在 DOM 更新的时候，会触发 update 函数
      update(el, binding) {
        console.log('触发了 v-color 的 update 函数')
        el.style.color = binding.value
      }
    } */
    color(el, binding) {
      el.style.color = binding.value      包含bind  update功能
    }   
  }

公有自定义指令的节点 main.js中创建

// 全局自定义指令
 Vue.directive('color', {
  bind(el, binding) {
    el.style.color = binding.value
  },
  update(el, binding) {
    el.style.color = binding.value
  }
}) 

Vue.directive('color', function(el, binding) {
  el.style.color = binding.value
})

定义全局axios与配置全局axios的根路径不利于复用

vue2

import Vue from 'vue'
import axios from 'axios'
配置axios全局根路径
axios.defaults.baseURL='http://www.liulongbin.top:3006'
配置axios为全局变量
Vue.prototype.$http=axios   $http为自定义名称 

组件中使用 
    get   const {data:res}=await this.$http.get('api/get')
    post  const {data:res}=await this.$http.post('api/post')

vue3

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
const app=createApp(App)
配置axios全局根路径
axios.defaults.baseURL='http://www.liulongbin.top:3006'
配置axios为全局变量
app.config.globalProperties.$http=axios
app.mount('#app')

请求数据时 get使用 params(要查询的属性值） post使用data(要提交的数据）

   this.$http.get('http://www.liulongbin.top:3006/api/get',{
    params:{
            name: 'zs',
            age:18
}}),
   this.$http.post('http://www.liulongbin.top:3006/api/get',{
    data:{
            name: 'zs',
            age:18
}})