$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
}})