当前位置:首页 > 编程教程 > vue技术文章 > vue组件jsx语法的具体使用

vue组件jsx语法的实例用法

  • 发布时间:
  • 作者:码农之家
  • 点击:224

这篇文章主要知识点是关于vue、jsx语法、vue、使用jsx、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js项目实战
Vue.js项目实战影印完整版
  • 类型:Vue大小:141 MB格式:PDF作者:纪尧姆·周
立即下载

vue组件jsx语法的具体使用

如果使用render函数来写比较复杂的vue组件,对于可读性和可维护性都很不友好,而使用jsx就会让我们回到更接近于模板的语法。babel转译器会将jsx转译为render函数渲染。

配置

需要用到babel插件

安装

npm install\
 babel-plugin-syntax-jsx\
 babel-plugin-transform-vue-jsx\
 babel-helper-vue-jsx-merge-props\
 babel-preset-env\
 --save-dev

.babelrc配置

在plugins中添加transform-vue-jsx

{
 "presets": ["env"],
 "plugins": ["transform-vue-jsx"]
}

基础示例

转义前

<div id="foo">{this.text}</div>

转译后

h('div', {
 attrs: {
  id: 'foo'
 }
}, [this.text])

Note:h函数为vue实例的$createElement方法,必须存在于jsx的作用域中,在渲染函数中必须以第一个参数传入,如:

render (h) { // <-- h 函数必须在作用域内
 return <div id="foo">bar</div>
}

自动注入h函数

从3.4.0开始,在用ES2015语法声明的方法和getter访问器中(使用function关键字或箭头函数除外),babel会自动注入hconst h = this.$createElement)函数,所以可以省略(h)参数。

Vue.component('jsx-example', {
 render () { // h 会自动注入
  return <div id="foo">bar</div>
 },
 myMethod: function () { // h 不会注入
  return <div id="foo">bar</div>
 },
 someOtherMethod: () => { // h 不会注入
  return <div id="foo">bar</div>
 }
})

@Component
class App extends Vue {
 get computed () { // h 会自动注入
  return <div id="foo">bar</div>
 }
}

 Vue JSX 和 React JSX对比

首先, Vue2.0 的vnode 格式与react不同,createElement函数的第二个参数是一个数据对象,接受一个嵌套的对象,每一个嵌套对象都会有对应的模块处理。

Vue2.0 render语法

render (h) {
 return h('div', {
  // 组件props
  props: {
   msg: 'hi'
  },
  // 原生HTML属性
  attrs: {
   id: 'foo'
  },
  // DOM props
  domProps: {
   innerHTML: 'bar'
  },
  // 事件是嵌套在`on`下面的,所以将不支持修饰符,如:`v-on:keyup.enter`,只能在代码中手动判断keyCode
  on: {
   click: this.clickHandler
  },
  // For components only. Allows you to listen to
  // native events, rather than events emitted from
  // the component using vm.$emit.
  nativeOn: {
   click: this.nativeClickHandler
  },
  // class is a special module, same API as `v-bind:class`
  class: {
   foo: true,
   bar: false
  },
  // style is also same as `v-bind:style`
  style: {
   color: 'red',
   fontSize: '14px'
  },
  // other special top-level properties
  key: 'key',
  ref: 'ref',
  // assign the `ref` is used on elements/components with v-for
  refInFor: true,
  slot: 'slot'
 })
}

对应的Vue2.0 JSX语法

render (h) {
 return (
  <div
   // normal attributes or component props.
   id="foo"
   // DOM properties are prefixed with `domProps`
   domPropsInnerHTML="bar"
   // event listeners are prefixed with `on` or `nativeOn`
   onClick={this.clickHandler}
   nativeOnClick={this.nativeClickHandler}
   // other special top-level properties
   class={{ foo: true, bar: false }}
   style={{ color: 'red', fontSize: '14px' }}
   key="key"
   ref="ref"
   // assign the `ref` is used on elements/components with v-for
   refInFor
   slot="slot">
  </div>
 )
}

JSX展开运算符

支持JSX展开,插件会智能的合并数据属性,如:

const data = {
 class: ['b', 'c']
}
const vnode = <div class="a" {...data}/>

合并后的数据为:

{ class: ['a', 'b', 'c'] }

Vue 指令

JSX对大多数的Vue内建指令都不支持,唯一的例外是v-show,该指令可以使用v-show={value}的语法。大多数指令都可以用编程方式实现,比如v-if就是一个三元表达式,v-for就是一个array.map()等。

如果是自定义指令,可以使用v-name={value}语法,但是改语法不支持指令的参数arguments和修饰器modifier。有以下两个解决方法:

将所有内容以一个对象传入,如:v-name={{ value, modifier: true }}

使用原生的vnode指令数据格式,如:

const directives = [
 { name: 'my-dir', value: 123, modifiers: { abc: true } }
]

return <div {...{ directives }}/>

原文地址(https://github.com/vuejs/babel-plugin-transform-vue-jsx#usage)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

相关电子书
学习笔记
网友NO.522595

详解Vue如何支持JSX语法

通常开发vue我们使用的是模板语法,其实还有和react相同的语法,那就是render函数,同样支持jsx语法。 Vue 的模板实际是编译成了 render 函数。 1.传统的createElement方法 createElement( 'anchored-heading', { props: { level: 1 } }, [ createElement('span', 'Hello'), ' world!' ]) 渲染成下面这样 anchored-heading :level="1" spanHello/span world!/anchored-heading 2.使用jsx语法 这就是会用到一个Babel plugin 插件,用于在 Vue 中使用 JSX 语法的原因,它可以让我们回到于更接近模板的语法上。 1.安装 npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-preset-es2015\ --save-dev 2.编辑.babelrc文件 {"presets": ["es2015"],"plugins": ["transform-vue-jsx"]} 代码编辑如下 Vue.component('jsx-example', { render (h) { // -- h must be in scope return div id="foo"bar/div }}) 将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯……

网友NO.619968

详解如何使用webpack在vue项目中写jsx语法

本文介绍了如何使用webpack在vue项目中写jsx语法,分享给大家,具体如下: 我们知道Vue 2.0中对虚拟DOM的支持。我们可以通过JavaScript动态的创建元素,而不用在template中写HTML代码。虚拟DOM最终将被渲染为真正的DOM。 data: { msg: 'Hello world'},render (h) { return h( 'div', { attrs: { id: 'my-id' }, [ this.msg ] );} 渲染后的内容为: div id='my-id'Hello world/div Vue 2.0中的render为我们开启了一片新的天地,赋予了我们无限的想象力。比如,我们可以把React中用到的JSX语法应用到Vue中来。接下来,我们就聊聊怎么在Vue项目中使用JSX. JSX简介 JSX是基于Javascript的语言扩展, 它允许在Javascript代码中插入XML语法风格的代码。如下所示: data: { msg: 'Hello world'},render (h) { return ( div id='my-id', { this.msg } /div );} 但值得注意的是,浏览器默认是解析不了JSX的,它必须要先编译成标准的JavaScript代码才可以运……

网友NO.174324

vue jsx 使用指南及vue.js 使用jsx语法的方法

vue jsx 语法与 react jsx 还是有些不一样,在这里记录下。 let component = null// if 语句if (true) { component = ( div/div );} else { component = ( div/div );}var ul = ( ul {component} /ul);// map 语句var coms = limit.map(i = { return { li {ul} /li };})// 属性li onClick={() = console.log()}// 自定义指令let directives = [{name: 'prod-img', value: params.row.skn, modifiers: {skn: true}} ];return ( div img {...{directives}}/img // 属性展开 /div);// 自定义过滤器不建议使用,直接当函数使用foo(something)// methodsthis.foo()// modeli-input value={params.row.factoryCode} placeholder='请输入...' onInput={val = (params.row.factoryCode = val)} style={{width: '100%'}}/i-input// 自定义事件 return ( Operator category-id={this.categoryId} // prop绑定 product={params.row} // prop 绑定 onChange={this.onChangeStatus} // event 绑定 /Operator );//三元运算 div h1{i == 1 ? 'True!' : 'False'}/h1/div// 注释div h1菜鸟教程/h1 {/*注释...*……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com