前置准备
初始化项目
- 使用vuecli初始化项目时有人喜欢使用 vue ui 有人喜欢使用命令行,vue-ui更直观一些。
- 打开命令行工具输入
vue ui
- 最后点击创建
- 但是这里并没有结束 仍需要安装一个插件
babel-plugin-jsx
npm install @vue/babel-plugin-jsx -D
{
"plugins": ["@vue/babel-plugin-jsx"]
}
- 需要注意的是 创建的时候选择了 1. 代码检查 2. 代码提交检查 如不需要可以关闭。
配置 element-plus
- 这个其实没啥说的,直接跟着官网走就行 不过是个基础 还是略微说一点。
import { createApp } from 'vue'
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
const app = createApp(App)
app.use(ElementPlus,{ locale: zhCn })
app.mount('#app')
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
export default (app) => {
app.use(ElementPlus, { locale: zhCn })
}
import installElementPlus from './plugins/ElementPlus.js'
const app = createApp(App)
installElementPlus(app)
app.mount('#app')
jsx 知识 (与element-plus结合使用)
css
<div style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '18px' }}>{pageName.value}</div>
<div class='menuBox'></div>
指令
v-show
import { defineComponent, ref } from 'vue'
const cs = defineComponent({
setup () {
const isShow = ref(true)
const isShowClick = () => {
isShow.value = !isShow.value
}
return () => (
<div>
<el-button onClick={isShowClick}>显示隐藏</el-button>
<p v-show={isShow.value}>11111111111111111</p>
</div>
)
}
})
export default cs
v-for 和 v-if
- jsx 中的 v-for 与v-if 可以通过计算的形式来实现 如下图官网所说
- 在jsx中是这样 v-if 同理 在循环中通过判断过滤掉不需要的数据。
const datItemList = listOfDatesOfTheMonth.map(item => {
return <div class="dateItem">{item.date}</div>
})
<div class="dateItemBox">{datItemList}</div>
v-model or v-models
- 先来看一下
v-model
的官方示例 图好像有点糊🤦♂️
<input v-model={val} />
<input v-model={[val, ["modifier"]]} />
<A v-model={[val, "argument", ["modifier"]]} />
- 理解了
v-model
后 v-models
好像也差不多,不过是吧 v-model
的一维数组 改为二位数组,也算是符合直觉。
自定义指令
- 这个其实与sfc的书写方式基本一样,可以参照官网文档来实现
slot 插槽定义
- jsx 的
slot
定义与 sfc
的差异巨大,一个是函数调用,一个是定义属性
- jsx 定义
slot
import { defineComponent } from 'vue'
const st = defineComponent({
setup (props, { slots }) {
return () => (
<div>
{}
{ slots.default()/* 默认插槽 */ },
{ slots.title() /* title 具名插槽 */}
</div>
)
}
})
export default st
<template>
<div>
<slot></slot>
<slot name="title"></slot>
</div>
</template>
slot 插槽使用
- vue3.0 的jsx 中 插槽是由
v-slots
定义在引用组件上的。如element-plus 的menu组件
<el-submenu index='/cs/sys' v-slots={{
title: () => (
<div>
<i class='el-icon-setting'></i>
<span>系统管理</span>
</div>)
}}>
<el-menu-item index='/cs/sys/user'>用户管理</el-menu-item>
</el-submenu>
title
就是组件预留的插槽
- 再来看一下
sfc template
的定义
<el-menu-item index="/home">
<i class="iconfont icon-shouye"></i>
<span slot="title">首页</span>
</el-menu-item>
- 区别还是很明显的
sfc 的 slot
是需要在使用组件的内部定义一个承载元素来使用。而 jsx 则是直接在组件上使用v-slots
来定义。
- 关于默认插槽 jsx 是声明一个
default
函数,sfc
则是直接写在引用组件的内部如<div-slot>这里的内容会被渲染到默认插槽,前提是组件定义了默认插槽</div-slot>
emit事件
- vue jsx emit自定义事件触发前边加
on
如 element-plus
分页组件的 size-change pageSize 函数 改变时会触发
<el-pagination
background
onSizeChange={sizeChange}
layout="total, sizes, , jumper, prev, pager, next"
total={tableData.length}>
</el-pagination>
onSizeChange={sizeChange}
这样写会触发
onSize-change={sizeChange}
这样写也会触发
on-size-change={sizeChange}
这样写不行
onsizechange={sizeChange}
当然这样也不行
总结
- 多看文档,vue的相关文档一直都很友好。但是一定要耐心看。
- 仓库地址
- 如有错误 烦请指正 多多包含!