跟着小满老师学vue3，day2

1-tsx和vite插件

npm install @vitejs/plugin-vue-jsx -D

vite.config.js
import vueJSX from "@vitejs/plugin-vue-jsx"
plugins:[vueJSX()]

y.jsx
import {defineComponent} from "vue"
export defineComponent({
data(){return {name:"yyy"}}
render(){return (<div>{name}</div>)}
})
export defineComponent({
//返回一个渲染函数
setup(){return ()=>{(<div>{name}</div>)}}
})

2-v-model

支持input,select等表单元素，甚至自定义组件
v-model用在自定义组件上是一个语法糖=props+emit

<son v-model="isShow"/>
<div v-if="modelValue></div>
defineProps<
{
modelValue:boolean
}
>()

写一个弹窗组件

父组件
<popup v-model="isShow" v-model:textVal="text"></popup>
//
import popup from './components/popup.vue';
import { ref, Directive, DirectiveBinding } from 'vue';
const isShow = ref(true);
const text = ref<string>('yyy');
const changeIsShow = function () {
  isShow.value = !isShow.value;
};

子组件
<h3>{{ modelValue }}</h3>
<button @click="close">关闭</button>
<input @input="input" />
//
defineProps<{
  modelValue: boolean;
}>();
const emit = defineEmits(['update:modelValue', 'update:textVal']);
const close = function () {
  emit('update:modelValue', false);
};
const input = function (e: Event) {
  const textVal = e.target as HTMLInputElement;
  console.log(textVal);
  emit('update:textVal', textVal.value);
};

3-自定义指令directive

<A v-node:aaa.yyy="123"></A>
const vNode: Directive = {
  // created(...args:Array<any>){
  created(el: HTMLElement, dir: DirectiveBinding) {
    // console.log(args)//args是一个数组
    //args[0],el,当前绑定的元素
    //args[1].value={123},args[1].arg=“aaa",args[1].modifiers={"yyy"}
    //args[2]虚拟dom
    //args[3]
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeUnmount() {},
  unmounted() {},
};

公司一般会封装一个按钮级别的自定义指令，判断权限

<button v-has-show="'shop:create'">新建</button>
<button v-has-show="'shop:edit'">编辑</button>
<button v-has-show="'shop:delete'">删除</button>
<button v-has-show="'shop:luanru'">乱入</button>
//
const permissions = ['shop:create', 'shop:edit', 'shop:delete'];
//<HTMLElement,string>:限制传入参数的类型
const vHasShow: Directive<HTMLElement, string> = (el, binding) => {
  console.log(binding.value);
  if (!permissions.includes(binding.value)) {
    el.style.display = 'none';
  }
};

自定义拖拽指令

4-自定义hooks

复用代码逻辑的封装，mixins升级

5-定义全局函数和变量

app.config.globalProperties.$env="dev"

main.ts
app.config.globalProperties.$filters={format<T>(str:T){}}
type Filter{
Format<T>(str:T):string
}
declare module "vue"{
export interface ComponentCustomProperties{$filters:Filter}
}
模板里面
`<div>{{$filters.format("yyy")}}</div>`
js里面
import {getCurrentInstance}
const app=getCurrentInstance()
console.log(app?.proxy.$filters.format(""))

6-样式

①样式穿透deep

:deep(el-input)

7-事件循环eventloop和nextTick