©2020-2024 ioDraw All rights reserved,
Privacy Policy
文章所有的代码是基于Vue CLI 3.x版本，不会涉及到一步步通过Webpack来配置JSX所需要的知识点。
注意: 如果是手动搭建的项目，需要通过安装插件才可使用JSX。
<>vue如何使用jsx编写
<>1.创建Test.jsx文件
export default { render() { return ( <div> <p>vue 使用 jsx</p> </div> ); }, };
如此就是最简易版的.jsx文件了
<>2.插值
在JSX中使用{}来绑定内容
export default { data() { return { val: "这里进行变量存储", }; }, render() { const {
val} = this; return ( <div> <p>vue 使用 jsx</p> {val} </div> ); }, };
建议的写法就是在render中解构出来data里的变量，正文里使用即可。
当然，也可直接调用，方法如下：
<p>{this.val}</p>
<>3.遍历渲染 、 条件渲染
export default { data() { return { val: "这里进行变量存储", list: [ { id: 1, name: "张三"
, }, { id: 2, name: "张四", }, { id: 3, name: "张五", }, { id: 4, name: "张六", }, ],
isShow: true, }; }, render() { const { val, list, isShow } = this; return ( <div
> <p>vue 使用 jsx</p> {/* 插值 */} {val} <ul> {/* 遍历渲染 */} {list.map((item, index)
=> { return <li key={item.id}>{item.name}</li>; })} </ul> {/* 条件渲染 */} {/* 1.
&& */} {isShow && <div>这里是条件渲染</div>} {/* 2. 三元运算 */} {isShow ? "条件为真显示内容" :
"条件为假显示内容"} </div> ); }, };
jsx中没有v-if和v-for。
条件渲染使用&&或者 三元运算
遍历渲染使用 .map
注意： map的返回值需要是一个标签，且为唯一根标签形式的。遍历出的标签，建议添加key
<>4. jsx样式添加
推荐使用scss
使用如下:
1.新建styld.scss文件
可根据需求自行编写
.container{ border: 1px dotted red; color: red; } ul{ li{ line-height: 44px;
border-bottom: 1px dotted gold; } }
2.在当前.jsx内引入使用
import './styled.scss' // 引入外部样式 export default { data() { return { val:
"这里进行变量存储", list: [ { id: 1, name: "张三", }, { id: 2, name: "张四", }, { id: 3,
name: "张五", }, { id: 4, name: "张六", }, ], isShow: true, }; }, render() { const {
val, list, isShow } = this; return ( // 添加class
此处与react不一样，不需使用className，因为在react中class为关键字 <div class='container'> <p>vue 使用
jsx</p> {/* 插值 */} {val} <ul> {/* 遍历渲染 */} {list.map((item, index) => { return <
li key={item.id}>{item.name}</li>; })} </ul> {/* 条件渲染 */} {/* 1. && */} {isShow
&& <div>这里是条件渲染</div>} {/* 2. 三元运算 */} {isShow ? "条件为真显示内容" : "条件为假显示内容"} </div>
); }, };
<>5. 使用自定义组件
当组件仅需要展示，而不需要进行其他操作时，不用维护状态，可使用 functional进行标识，性能会好很多
1.创建组件
Child1.jsx
// 仅进行展示
export default { functional: true, render(h, content) { console.log("content",
content); return <div>这里是子组件，展示的内容为：{content.props.val}</div>; }, };
注意： 函数式组件是没有this的。所有的内容都在render的第二个参数里
Child2.jsx
// 调用父组件方法，修改child1显示的内容
export default { functional: true, render(h, content) { return ( <div> <p>
这里是子组件2</p> {/* 绑定事件 需要加on */} {/* 调用父组件方法 也是在 content里进行调用，因为没有this*/} <button
onClick={() => content.listeners.parent()}> click me,调用父组件方法 </button> </div> );
}, };
2.父组件使用
import "./styled.scss"; import Child1 from "./Child1"; import Child2 from
"./Child2"; export default { components: ["Child1", "Child2"], data() { return {
val: "这里进行变量存储", list: [ { id: 1, name: "张三", }, { id: 2, name: "张四", }, { id:
3, name: "张五", }, { id: 4, name: "张六", }, ], isShow: true, childMsg:
"父组件传递给子组件的内容", }; }, methods: { // 定一个一个方法，修改数据 changeMsg() { this.childMsg =
"点击了child2，修改了child1的内容"; }, }, render() { const { val, list, isShow, childMsg }
= this; return ( // 添加class 此处与react不一样，不需使用className <div class="container"> <p
>vue 使用 jsx</p> {/* 插值 */} {val} <ul> {/* 遍历渲染 */} {list.map((item, index) => {
return <li key={item.id}>{item.name}</li>; })} </ul> {/* 条件渲染 */} {/* 1. && */}
{isShow && <div>这里是条件渲染</div>} {/* 2. 三元运算 */} {isShow ? "条件为真显示内容" : "条件为假显示内容"
} {/* 调用子组件 */} {/* child1 仅仅展示数据 */} <Child1 val={childMsg} /> {/* Child2
调用父组件方法 */} {/* 注意： 此处使用on绑定方法parent，子组件只需调用parent方法 */} <Child2 onparent={() =>
this.changeMsg()} /> </div> ); }, };
jsx组件内content的内容有很多，简单说一哈:
children # VNode数组，类似于React的children data # 绑定的属性 attrs # Attribute domProps #
DOM property on # 事件 injections # 注入的对象 listeners: # 绑定的事件类型 click # 点击事件 ...
parent # 父组件 props # 属性 scopedSlots # 对象，作用域插槽，使用中发现作用域插槽也挂在这个下面 slots # 函数，插槽
如此就可进行业务代码简单的编写了。。。