1. 定义
- 在JavaScript中写HTML，是对JavaScript语法的一个扩展。
- ref不能自动解包，需要使用.value。
2. JSX语法
2.1 插值
JSX：单大括号{}包裹变量，无引号“”，内写有效的JavaScript表达式。
template：双大括号{{}}包裹变量，属性变量用冒号：开头。
// JSX
const render = () => {
return <>
<span name={name}>{ name }</span>
</>
}
// template
<template>
<span :name="name">{{ name }}</span>
</template>2.2 类名绑定class
JSX：静态指定使用class=""，动态指定使用模板字符串，单大括号包裹。
// JSX
<div className={ `${ row.status ? "status-click" : "" }` }>{row.status}</div>2.3 事件绑定
JSX：在事件名称前端加上on前缀，原生事件名称前端加上nativeOn，使用箭头函数包裹带参数的函数。
template：@前缀，双引号包裹。
// JSX
const render = (row: any) => {
return <>
<span onClick={() => handleClick(row)}>{ row.name }</span>
<span nativeOnClick={() => handleClick(row)}>{ row.name }</span>
</>
}
// template
<template>
<span @click="handleClick">{{ name }}</span>
</template>2.4 条件渲染v-if实现
JSX：if/else逻辑；三元表达式；&&；|| 运算。不支持v-if
template：v-if
// JSX
render: ({ row }) => {
if(row.name) {
return <span>{row.name}</span>
} else {
return <span>--</span>
}
}
render: ({ row }) => {
return row.name? row.name: "--";
}2.5 循环渲染v-for实现
JSX：使用Array.map()循环实现。不支持v-for
template：v-for
// JSX
render: ({ row }) => {
const arr = ref([ {label: "a"}, {label: "b"}, {label: "c"} ])
return (
<div>
{ arr.value.map(item => <span key={item.label}>{ item.label }</span>) }
</div>
)
}
// template
<tempalte>
<span v-for="item in arr" :key="item.label">{{ item.label }}</span>
</template>2.6 插槽v-slots
JSX：v-slots，简写#，函数式组件。使用this.$slots访问静态插槽内容。
template：v-slot
// JSX
render: ({ row }) => {
return (
<div class="page-header__title">
{this.$slots.title ? this.$slots.title : this.title}
</div>
)
}
// template
<div class="page-header__title">
<slot name="title">{{ title }}</slot>
</div>2.7 组件拆分
JSX：组件拆分时，外层必须有一个包裹元素。
// JSX
render: ({ row }) => {
return (
<div>
<p>one</p>
<p>two</p>
</div>
)
}2.8 自定义组件
JSX：组件名遵守驼峰命名法，组件名称和引入名称保持一致，引入动态参数不加冒号“”。
template：组件名可用段横杠-连接，引入动态参数加冒号“”。
import StatusIcon '@/components/StatusIcon.vue'
// JSX
const render = () => {
const iconRef = ref({ 0: "icon-active", 1: "icon-down" })
const statusRef = ref({ 0: "开机", 1: "关机" })
return <>
<StatusIcon
iconName={iconRef.value[row.status]}
statusName={statusRef.value[row.status]}
>
</StatusIcon>
</>
}
return render
})
// template
<template>
<div class="status">
<status-icon :iconName="iconRef"/>
</div>
</template>
