Vue中从template到jsx语法教程示例

<span>Message: {{ msg }}</span>

<span>Message: { msg }</span>

// html 字符内容
rawHtml = '<span>hello!</span>'
// 最终变成纯文本
<p>Using text interpolation: {{ rawHtml }}</p>
// 最终渲染为 html 结构
<div>Using v-html directive: <p v-html="rawHtml"></p></div>

// 最终变成纯文本
cosnt rawHtml = '<span>hello!</span>'
<p>Using text interpolation: { rawHtml }</p>
// 最终渲染为 html 结构
cosnt rawHtml = <span>hello!</span>
<div>Using v-html directive: { rawHtml }</div>

<p v-show="isShow">hello world！</p>
<p v-show="!isShow">hello bros！</p>
<p v-if="isShow">hello world！</p>
<p v-else>hello bros！</p>

const content = (isShow) => {
    if(isShow){
      return <h1>hello world！</h1>
    }else{
      return <div>hello bros！</div>
    }
}

{ isShow && <div>hello world！</div> }
{ !isShow && <div>hello bros！</div> }

const content1 = <h1>hello world！</h1>
const content2 = <h1>hello world！</h1>
<div>{ content1 || content2 } </div>

const content1 = <h1>hello world！</h1>
const content2 = <h1>hello world！</h1>
<div>{ isShow ? content1 : content2 } </div>

<ul>
  <li v-for="item in list" :key="item.key">{{ item.text }}</li>
</ul>

<ul>
  {
    list.map((item) => (
      <li key={item.key}>{ item.text }</li>
    ))
  }
</ul>

<script setup lang="ts">
import { ref } from "vue";
import ChcekBox from "./components/CheckBox";
const checkResult = ref(false);
</script>
<template>
  <ChcekBox v-model="checkResult">选项</ChcekBox>
</template>
<style scope>
@import './index.less';
</style>

import { defineComponent, ref } from 'vue'
import './index.less'
export default defineComponent({})

import { defineComponent, ref } from 'vue'
import styleModule from './index.module.less'
export default defineComponent({
    setup() {
        return () => (
            <label class={styleModule.abs}>hello world!</label>
         )
})

<!-- 方法处理函数 --> 
<button v-on:click="doThis"></button>
<!-- 缩写 --> 
<button @click="doThis"></button>

<!-- 链式调用修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 传参 --> 
<button @click="doThis($event, params)"></button>

<!-- 传参 --> 
<button @click="count++"></button>

<!-- 驼峰 --> 
<button onClick={doThis}></button>
<!-- 非驼峰 --> 
<button onclick={doThis}></button>

<!-- withModifiers  -->
<button onClick={withModifiers(doThis, ['prevent'])}></button>

const bindEvent = doThis.bind(tarrget)
<!-- 传参 -->
<button onClick={bindEvent}></button>

<!-- 传参 -->
<button onClick={ (parms) => bindEvent(parms)}></button>

<!-- 方式一 -->
<button onClick={ () => count++ }></button>
<!-- 方式一 -->
const addCount = () => count++
<button onClick={ addCount }></button>

// 常见表单
<input v-model="searchText" />
// 自定义组件
<CustomInput v-model="searchText" />
// 自定义 v-model 名
<MyComponent v-model:title="bookTitle" />

<CustomInput v-model={searchText} />

<Custom v-model={[title, 'titleAlias']} />

<button class="fancy-btn">
  <slot></slot> <!-- 插槽出口 -->
</button>

<button class="fancy-btn">
  <slot name="content"></slot> <!-- 插槽出口 -->
</button>

<div> 
    <!-- 动态插槽 --> 
    <template v-slot:[dynamicSlotName]> ... </template> 

    <!-- 缩写为 --> 
    <template #[dynamicSlotName]> ... </template> </base-layout>
</div>

<!-- MyComponent 模板 --> 
<div>
    <slot :text="greetingMessage" :count="1"></slot> 
</div>
<!-- 父组件模板 --> 
<MyComponent v-slot="slotProps"> 
    {{ slotProps.text }} {{ slotProps.count }} 
</MyComponent>

defineComponent({
    setup(props, { slots }) {
        return <div>
            { slots.default && slots.default() }
            { slots.nameSlot && slots.nameSlot() }
        </div>
    }
})

import { defineComponent, renderSlots } from 'vue'
defineComponent({
    setup(props, context) {
        const slots = useSlots();
        return <div>
            { renderSlot(slots, 'default') }
        </div>
    }
})

import { defineComponent, renderSlot } from 'vue'
defineComponent({
    setup(props, { slots }) {
        return <div>
            { renderSlot(slots, 'default') }
        </div>
    }
})

<!-- MyComponent 模板 --> 
defineComponent({
    setup(props, { slots }) {
        const slotParams = { name: 'hello' };
        return <div>
            { slots.default && slots.default(slotParams) }
        </div>
    }
})
<!-- 父组件模板 -->
defineComponent({
    setup(props, { slots }) {
        return <div>
            <MyComponent v-slot="slotProps"> 
                {{ slotProps.name }}
            </MyComponent>
        </div>
    }
})