Project structures,

Create a VUE project

Use VUe-CLI to create a Manually select features template.

Then check the following to select install dependencies:

Choose Vue version (Vue version), Babel, TypeScript, Router, Vuex, CSS pre-processors.

Install the JSX plug-in

After installing some basic dependencies, you can install the official JSX plug-in @vue/babel-plugin-jsx

Installation:

npm install @vue/babel-plugin-jsx -D
Copy the code

Configure the Babel:

After the project is created, a babel.config.js will be added to this configuration

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

JSX instructions

Matters needing attention

  1. .vue files using JSX syntax will not fail, but when ts and JSX are used together, the script tag should add lang=” TSX “.

    <template> <div class="experiment"> <test-a name="11"></test-a> </div> </template> <script lang="tsx"> import { defineComponent } from 'vue'; type prop = { name: string; }; const TestA = (props: prop) => <div>{props.name} fdsafdsa</div>; export default defineComponent({ components: { TestA }, setup(props, ctx) { return {}; }}); </script>Copy the code

  2. If you do not need to use template, you can create a. JSX or. TSX file for development

    import { defineComponent, ref } from 'vue';

export default defineComponent({
    setup(props, ctx) {
        const about = ref('hello about');
        const count = ref(0);

        const addCount = () = > {
            count.value++;
        };

        return () = > (
            <>
                <div class="experiment">{about.value}</div>
                <button onClick={addCount}>{count.value}</button>
            </>); }});Copy the code

  3. When importing.tsx or.jsx files, the suffix of the file in the path does not need to be written. TSX will report module not found error if.tsx is in the path

    import App from './App'
Copy the code

About class and style styles

In React, if you want to write the class style, you need to change the class name to className. But in VUE, you can use class directly.

Normally the use of class/style in JSX is pretty much the same as in Template

<div style="display:flex;" class="box"></div>
Copy the code

Dynamic writing is a little different from template

{/* object */}
<div class= {{'test-red': true }} style={true ? { display: 'flex' } : {}}>hello</div>

{/* object */}
<div class= {[true ? 'test-red' : ' ']} style={[true ? 'display:flex' : ' ']} >class/style
</div>
Copy the code

Use refs, Reactive, etc in JSX

DefineComponent components:

import { defineComponent, ref } from 'vue';

export default defineComponent({
    setup(props, ctx) {
        const about = ref('hello about');
        const count = ref(0);
        type TPerson = {
            name:string.age:number
        }
        const person = reactive<TPerson>({
            name:'Ivan'.age:18
        })
        const addCount = () = > {
            count.value++;
        };

        return () = > (
            <>
                <div class="experiment">{about.value}</div>
                <button onClick={addCount}>{count.value}</button>
                <hr />Name: {person.name}, age: {person.age}</>); }});Copy the code

Function mode:

import { ref, SetupContext } from 'vue';
const hello = ref<string> ('hello home');
const count = ref<number> (0);
const addCount = () = > {
    count.value++;
};
const Home = (props, ctx: SetupContext) = > {
    return (
        <>
            <div>{hello.value}</div>
            <button onClick={addCount}>{count.value}</button>
        </>
    );
};
export default Home;
Copy the code

Note: If you create a component using a function, ref and reative cannot be placed inside the component, otherwise they will be reassigned and will not change in response

Use slots and named slots

const Text = (props, ctx: SetupContext) = > {
    return (
        <>
            <div>{ctx.slots.default && ctx.slots.default()}</div>
            <div>{ctx.slots.name && ctx.slots.name()}</div>
        </>
    );
};

const App = (props, ctx) = > {

	return (
        <>
        	<Text>The default slot<slot name="name">Named slot 1</slot>
                <span v-slots="name">Named slot 2</span>
            </Text>
        </>)}export default App;
Copy the code

Scope slot usage

The arguments:

const Text = (props, ctx: SetupContext) = > {
    return (
        <>
            <div>Ctx.slots.default && ctx.slot.default (' pass ')}</div>
        </>
    );
};
Copy the code

Use:

const App = (props, ctx) = > {

	return (
        <>
        	<Text
                v-slots={{
                    default: (n: string) = > <span>{n}</span>}} / ></>)}export default App;
Copy the code

V – if and v – for

Method 1:

const ifFor = () = > {
    const ces = true;
    const ifElse = () = > {
        if (ces) return <div>If part of the</div>;
        else return <div>The else part</div>;
    };

    const forArr = () = > {
        let i = 0;
        return new Array(10).fill(' ').map(() = > {
            i++;
            return <span>{i}</span>;
        });
    };

    return (
        <div>
            {ifElse()}
            {forArr()}
        </div>
    );
};
Copy the code

Method 2:

const ifFor = () = > {
    return (
        <div>
            { true ? <div>If part of the</div> : <div>The else part</div> }
            {
                new Array(10).fill('').map((item,index) => {
                    return <span>map{index} </span>; })}</div>
    );
};
Copy the code

V – the use of the model

import { ref, SetupContext } from 'vue';
const count = ref<number> (0);

const Home = (props, ctx: SetupContext) = > {
    return (
        <>	
        	{count.value}
           <input type="text" v-model={count.value} />
        </>
    );
};
export default Home;
Copy the code

The modifier

Instruction modifier changed from.trmi to _trim

<input type="text" v-model_trim={count.value} />
Copy the code