本文是Vue基础系列的第六篇，探讨在Vue中如何使用JSX进行动态渲染。介绍了Vue组件的两类分类——偏视图表现和偏逻辑，并比较了使用Template和JSX的优缺点。详细讲解了JSX的实例，阐述了JSX的本质是createElement函数，解释了其参数含义。
系列文章目录
Vue基础篇一：编写第一个Vue程序
Vue基础篇二：Vue组件的核心概念
Vue基础篇三：Vue的计算属性与侦听器
Vue基础篇四：Vue的生命周期（秒杀案例实战）
Vue基础篇五：Vue的指令
Vue基础篇六：Vue使用JSX进行动态渲染
一、背景
组件区分为两类：一类是偏视图表现的 (presentational)，一类则是偏逻辑的 (logical)。我们推荐在前者中使用模板，在后者中使用 JSX 或渲染函数。这两类组件的比例会根据应用类型的不同有所变化，但整体来说我们发现表现类的组件远远多于逻辑类组件。
- 我们使用Vue框架进行视图类组件编程时，一般都会使用Template：它的优点是学习成本低，可以用大量内置的指令简化开发，但缺少灵活性。
- Vue也借鉴了React中经典的JSX渲染做法(在 React 中，所有的组件的渲染功能都依靠 JSX)，它的优点是灵活性高。
二、JSX
- JSX 是使用 XML 语法编写 JavaScript 的一种语法糖，比如：
<html>Message: {this.msg}</html>
2.1 Vue使用JSX的实例
- 我们首先看一下使用Template模板创建组件的方式：需要通过传递参数的方式进行if-else判断后渲染，较为繁琐。
<template>
<div>
<h1 v-if="number == 1">
<slot></slot>
</h1>
<h2 v-else-if="number == 2">
<slot></slot>
</h2>
<h3 v-else-if="number == 3">
<slot></slot>
</h3>
最低0.47元/天 解锁文章
扫一扫
4536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
