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)