系列文章目录

Vue基础篇一：编写第一个Vue程序
Vue基础篇二：Vue组件的核心概念
Vue基础篇三：Vue的计算属性与侦听器
Vue基础篇四：Vue的生命周期（秒杀案例实战）
Vue基础篇五：Vue的指令
Vue基础篇六：Vue使用JSX进行动态渲染

文章目录

系列文章目录
一、背景
二、JSX
- 2.1 Vue使用JSX的实例
- 2.2 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><h4 v-else><slot></slot></h4></div>
</template>
<script>
export default {props: {number: {type: Number,default: 1}}
};
</script>

<template><div><Header :number="1">{{ message }}</Header><Header :number="2">{{ message }}</Header><Header :number="3">{{ message }}</Header><Header :number="4">{{ message }}</Header><Header :number="5">{{ message }}</Header></div>
</template>
<script>
import Header from "./components/Header.vue";
export default {name: "App",components: {Header,HeaderJSX},data() {return {message: "Hello Vue!!"};}
};
</script>

我们再看一下使用JSX动态渲染的组件创建方式：

export default {props: {number: {type: Number,default: 1}},render: function(h) {const Tag = `h${this.number}`;return <Tag>{this.$slots.default}</Tag>;}
};

<template><div><HeaderJSX :number="1">{{ message }}</HeaderJSX><HeaderJSX :number="2">{{ message }}</HeaderJSX><HeaderJSX :number="3">{{ message }}</HeaderJSX><HeaderJSX :number="4">{{ message }}</HeaderJSX><HeaderJSX :number="5">{{ message }}</HeaderJSX></div>
</template>
<script>
import HeaderJSX from "./components/Header.jsx";
export default {name: "App",components: {HeaderJSX},data() {return {message: "Hello Vue!!"};}
};
</script>

2.2 JSX渲染的本质

JSX 本质其实是一个函数（createElement)：createElement 有三个参数，第一个参数是 type 也就是标签或者组件名、第二个参数是 props 是标签属性（例如 id、class、样式或者向子组件传递的数据等）、第三个参数是 children 是标签或者组件内的内容。
以上JSX代码编译后实际代码如下：

export default {props: {number: {type: Number,default: 1}},render: function(createElement) {return createElement("h" + this.number, // 标签名称this.$slots.default // 子元素数组);}
};

Vue基础篇六：Vue使用JSX进行动态渲染相关推荐

vue基础篇实战总结一：购物车实战
上周看完了vue基础篇本想继续看进阶篇本着基础不牢地动山摇的原则特地总结重新再写一遍基础篇中实战开发过的一些小东西,以加深熟练度如果还没有开始vue学习的朋友可以看这本书,还不错链接:htt ...
官网学习Vue（一）Vue基础篇
文章目录 Vue 基础知识一 Vue介绍 1.1 什么是Vue? 1.2 安装方式 1.3 声明式渲染二 Vue实例 2.1 创建Vue 2.2 生命周期 2.2.1 图解 2.2.2 重点理解 ...
Nginx实战基础篇六通过源码包编译安装部署LNMP搭建Discuz论坛
Nginx实战基础篇六通过源码包编译安装部署LNMP搭建Discuz论坛版权声明: 本文遵循"署名非商业性使用相同方式共享 2.5 中国大陆"协议您可以自由复制.发行.展览. ...
Vue —— 基础（六）（生命周期）
Vue2.x 系列文章目录内容参考链接 Vue2.x - 基础(零) 模板语法.数据绑定.el/data写法.MVVM模型 Vue2.x - 基础(一) 数据代理.事件处理.键盘事件 Vue2.x ...
前端vue基础学习之vue项目文件结构
vue项目文件结构查看上一篇前端基础学习之vue的生命周期 build文件用于打包创建dist目录 webpack.base.conf.js alias配置别名 config index.js ho ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础：使用Vue.js 来画博客首页（一）...
缘起书说前两篇文章< 十五 ║ Vue前篇:JS对象&字面量&this>和 < 十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面 ...
Vue基础入门(2) Vue.js下载与安装
下载与安装Vue.js Vue.js的官网: https://cn.vuejs.org/ 如果在项目中使用Vue.js框架,有两种方式:一是在页面中使用Script的方式直接引入,可以在官网下载Vue ...
Vue基础Day_01学习+Vue项目创建报错(true` in `“vueCompilerOptions“` property)解决方案
Vue_Study01 1.Vue是什么? 1.1-Vue怎么学 Vue是在工程化的环境下进行学习的 1.2-Vue开发方式 1.3-Vue脚手架项目创建目录 1.x-创建工程文件报错解决方案注意 ...
[vue]基础篇stepbystep案例实践(废弃)
去看这个就好了总结: 1.子组件可以触发父组件的方法,this.$emit() //(通知父组件干活) 2.父组件可以调用子组件的方法() // ref 如果放在组件上获取的是组件的实例并不是组 ...

Vue基础篇六：Vue使用JSX进行动态渲染

系列文章目录

文章目录

一、背景

二、JSX

2.1 Vue使用JSX的实例

2.2 JSX渲染的本质

Vue基础篇六：Vue使用JSX进行动态渲染相关推荐

最新文章

热门文章