什么微信小程序_vue组件jsx语法的详细使用

2021-01-11 10:32 jianzhan
vue组件jsx语法的具体使用       本篇文章主要介绍了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-pro凡科抠图\
 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会自动注入h(const h = this.$createElement)函数,所以可以省略(h)参数。

ponent('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 {
 puted () { // h 会自动注入
 return div id="foo" bar /div 

 Vue JSX 和 React JSX对比

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

Vue2.0 render语法

render (h) {
 return h('div', {
 // 组件pro凡科抠图
 pro凡科抠图: {
 msg: 'hi'
 // 原生HTML属性
 attrs: {
 id: 'foo'
 // DOM pro凡科抠图
 domPro凡科抠图: {
 innerHTML: 'bar'
 // 事件是嵌套在`on`下面的,所以将不支持修饰符,如:`v-on:keyup.enter`,只能在代码中手动判断keyCode
 on: {
 click: this.clickHandler
 // ponents only. Allows you to listen to
 // native events, rather than events emitted from
 // ponent 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 ponents with v-for
 refInFor: true,
 slot: 'slot'
}

对应的Vue2.0 JSX语法

render (h) {
 return (
 // normal ponent pro凡科抠图.
 id="foo"
 // DOM properties are prefixed with `domPro凡科抠图`
 domPro凡科抠图InnerHTML="bar"
 // event listeners are prefixed with `on` or `nativeOn`
 this.clickHandler}
 native this.nativeClickHandler}
 // other special top-level properties
 'red', fontSize: '14px' }}
 key="key"
 ref="ref"
 // assign the `ref` is used ponents with v-for
 refInFor
 slot="slot" 
 /div 

JSX展开运算符

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

const data = {
 class: ['b', 'c']
const vnode = div {...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 }}/ 

原文地址()

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