JSX 和 template 的区别
本质相同
- 语法上有很大区别
- 本质是相同的
- 具体示例:插值,自定义组件,属性和事件,条件和循环
JSX 和 template 语法的区别
- JSX 本质上就是 js 代码,可以使用 js 的任何能力
- template 只能嵌入简单的 js 表达式,其他需要指令,如 v-if
- JSX 已经成为 ES 规范,template 还是 Vue 自家规范
JSX 和 template 本质相同
- 都会被编译为 js 代码 (render 函数)
例子
插值使用
在 template 中用
html
<template>
<p>JSX Demo {{ name }}</p>
</template>
在 JSX 中用 {}
和 .value
js
const render = () => {
return <p>Jsx Demo {name.value}</p>;
};
自定义组件引入
在 template 中可以使用 驼峰命名
和 -连接符
html
<jsx-demo></jsx-demo>
<!-- 或 -->
<JsxDemo></JsxDemo>
<script>
import JsxDemo from '@/components/JsxDemo.jsx';
</script>
在 JSX 中引入 组件名称
和 使用名称
必须一样
js
import Child from './JsxChild.jsx';
export default defineComponent(() => {
const render = () => {
return (
<>
<Child></Child>
</>
);
};
return render;
});
传递属性和事件
在 template 中使用 :a
和 @change
方式
html
<template>
<jsx-child :a="name" @change="change"></jsx-child>
</template>
在 JSX 中都一样,使用 {}
配合原生 js 语法
js
return (
<>
<Child a={name.value + 100} onChange={change}></Child>
</>
);
条件和循环
在 template 中使用 v-if
和 v-for
html
<template>
<p v-if="name">Jsx demo</p>
<ul>
<li v-for="item in list" :key="item">{{ item }}</li>
</ul>
</template>
在 JSX 中可以使用 if
和 map
等 js 语法
js
const name = ref(101);
const state = reactive({
list: [1, 2, 3],
});
const render = () => {
if (name.value < 100) {
return <>{name.value}</>;
}
return (
<>
<p>Jsx Demo {name.value}</p>
{name.value > 100 && <Child a={name.value + 1}></Child>}
<ul>
{state.list.map((item) => (
<li>{item}</li>
))}
</ul>
</>
);
};