Lead to

  • Vue3.0 document
  • Vue JSX document
  • element-plus
  • When the actual project is initialized, ts is actually also TSX, thanks to the good ts type derivation of vue3.0. Basic use with JS is not much different.

Initialize the project

  • When initiating a project with Vuecli some people like to use vue UI and some people like to use the command line, vue-UI is a little bit more intuitive.
  • Open the command line tool for inputvue ui

  • Open the project Manager

  • Select Create – Click the Create button below

  • Create a project – at a glance

  • Select the configuration

  • And then I’m gonna hit Create
  • But that’s not the end of the story. You still need to install a plug-inbabel-plugin-jsx
// Install the plug-in
npm install @vue/babel-plugin-jsx -D

/ / configuration Babel
{
  "plugins": ["@vue/babel-plugin-jsx"]}Copy the code

  • It is important to note that 1. Code review 2. Code commit check can be turned off if not needed.

The configuration element – plus

  • This actually has nothing to say, directly follow the official website to go but is a foundation or say a little bit.
/ / in the main. Js
import { createApp } from 'vue'
import App from './App.vue';

import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
// Introduce the Chinese language pack
import zhCn from 'element-plus/lib/locale/lang/zh-cn'

const app = createApp(App)
app.use(ElementPlus,{ locale: zhCn })
app.mount('#app')
Copy the code
  • Or this?
// Create the elementplus.js file
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 })
}

// Introduce elementplus.js using main.js
import installElementPlus from './plugins/ElementPlus.js'
const app = createApp(App)
/ / into the app
installElementPlus(app)
app.mount('#app')
Copy the code

JSX knowledge (used in conjunction with Element-Plus)

  • JSX – next document Pay attention to the documentation

css

  • You can choosecss in jsorCSS Modules
// Inline styles
<div style={{ fontSize: '18px'.fontWeight: 'bold'.marginBottom: '18px' }}>{pageName.value}</div>
 
// Class introduces the related CSS files
<div class='menuBox'></div>
Copy the code

instruction

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}>Show hidden</el-button>
        <p v-show={isShow.value}>11111111111111111</p>
      </div>)}})export default cs

Copy the code

V – for and v – the if

  • V-for and V-IF in JSX can be realized in the form of calculation as shown in the official website as shown in the figure below

  • This is the case in JSX where V-if filters out unwanted data by judgment in the loop.
const datItemList = listOfDatesOfTheMonth.map(item= > {
  return <div class="dateItem">{item.date}</div>
})

<div class="dateItemBox">{datItemList}</div>
Copy the code

v-model or v-models

  • Let’s take a lookv-modelThe official example diagram seems a bit hazy 🤦♂️

  • V-model – modifiers official documentation
// Copy the official example 😁
// v-model={val} props: {modelValue: Number
}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}
// <input v-model={val.value} />
<input v-model={val} />


// If you do not understand the modifier, refer to the official document
<input v-model={[val, ["modifier} / "]] >

// Argument change the default binding of v-model props. ModelValue to props
<A v-model={[val, "argument"["modifier} / "]] >
Copy the code
  • To understand thev-model 后 v-modelsIt seems like it, but yeahv-modelIt’s also intuitive to change from a one-dimensional array to a two-dimensional array.

Custom instruction

  • In fact, this is basically the same as the writing method of SFC, which can be achieved by referring to the official website documents

Slot Slot definition

  • The JSXslotDefine andsfcThere is a huge difference between function calls and defining properties
  • JSX definitionslot
import { defineComponent } from 'vue'

const st = defineComponent({
  // The setup function takes two parameters by default: 1.props 2. CTX context which includes slots, attrs, emit, etc
  // Deconstruct slots from CTX
  setup (props, { slots }) {
    return () = > (
      <div>{} {slots. The default default slot () / * * /}, {slots. The title title named slot () / * * /}</div>)}})export default st
Copy the code
  • sfcSlot definition for
<template>
  <div>
    <! -- default slot -->
    <slot></slot>
    <!-- 具名 title 插槽   -->
    <slot name="title"></slot>
  </div>
</template>
Copy the code

Slot Slot usage

  • Slots in the JSX of VUe3.0 are made byv-slotsDefined on a reference component. Such asThe Menu component of Element-Plus
<el-submenu index='/cs/sys' v-slots={{
      title: () = > (
        <div>
          <i class='el-icon-setting'></i>
          <span>System management</span>
        </div>)
    }}>
  <el-menu-item index='/cs/sys/user'>User management</el-menu-item>
</el-submenu>
Copy the code
  • titleIt is a slot reserved for a component
  • Let’s see againsfc templateThe definition of
<span slot="title"> </span> </span> </span>Copy the code
  • The difference is clearSFC slotYou need to define a host element inside the component to use it. JSX, on the other hand, is used directly on componentsv-slotsTo define.
  • JSX is declared one about the default slotdefaultThe function,sfcIs written directly inside the reference component such as<div-slot> The content here will be rendered to the default slot if the component defines the default slot </div-slot>

Emit events

  • Vue JSX Emit custom event trigger addedon 如 element-plusPagination componentTriggered when the size-change pageSize function changes
<el-pagination
    background
    onSizeChange={sizeChange}
    layout="total, sizes, , jumper, prev, pager, next"
    total={tableData.length}>
</el-pagination>
Copy the code
  • onSizeChange={sizeChange}Writing like this will trigger
  • onSize-change={sizeChange}Writing like this will also trigger
  • on-size-change={sizeChange}I can’t write it like that
  • onsizechange={sizeChange}Of course that doesn’t work either

conclusion

  • Read the documentation. Vue’s documentation has always been very friendly. But be patient.
  • The warehouse address
  • If there is any error, please correct it!