最初用到 JSX,就是做这个博客的时候。iview 表格组件,不支持像 element 那样直接写 html 代码渲染,只能通过 render 函数渲染,也就是 JSX 语法
这个说起来不陌生,JSX 是react 框架的老本行了,玩react 的同学肯定对这个也玩的很溜(最近在公司做的某些项目也是 react)
那我还是记录一下在 Vue JSX 的使用吧
JSX 定义
JSX 是一种 JavaScript 的语法扩展,多运用于 React 架构中。JSX = Javascript + XML,即在 Javascript 里面写 XML,即具备 Javascript 的灵活性,又有 html 的语义化和直观性
应用场景
有人说,Vue 的模板语法简单易上手,实现的功能也几乎足够。JSX 不好上手,写起来代码量也多,用来干啥呢
那你就忽略了 JavaScript 的灵活性了
一些复杂表单的实现
函数式组件
函数式组件
简单说一下函数式组件
函数式组件就是函数是组件。使用过 React 的同学,应该不会对函数式组件感到陌生
函数式组件,我们可以理解为没有内部状态,没有生命周期钩子函数,没有 this(不需要实例化的组件)
在日常开发中,经常会开发一些纯展示性的业务组件,比如一些详情页面,列表界面等,它们有一个共同的特点是只需要将外部传入的数据进行展现,不需要有内部状态,不需要在生命周期钩子函数里面做处理,这时候你就可以考虑使用函数式组件
export default { // 通过配置 functional 属性指定组件为函数式组件 functional: true, // 组件接收的外部属性 props: { avatar: { type: String } }, /** * 渲染函数 * @param {*} h * @param {*} context 函数式组件没有 this, props, slots 等,都在 context 上面挂着 */ render(h, context) { const { props } = context if (props.avatar) { return
} return
} }
使用函数式组件的原因:
最主要最