菜单

皇家娱乐棋牌详解利用jsx写vue组件的章程言传身教

2019年6月13日 - 皇家前端

比如有人认为在vue组件里面要写data,props,computed和methods缺乏优雅,可以参照下那些插件vue-class-component,它能令你选拔ES6的class和ES7的装饰器编写vue组件。

连锁链接:

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>
 )
}

自定义指令能够利用“v-name={value}
”语法,如若要扶助指令参数和modifier可以用“v-name={{ value, modifier: true }}”语法:

1.在模板里面引进jsx的零件,能够透过components引用,此外props的编纂从驼峰式改为连接符:

然后再.babelrc里面增添:

那也意味三种样式的机件是能够互相引用的。

<script>
import Vue from 'vue';

Vue.directive('my-bold', {
 inserted: function (el) {
 el.style.fontWeight = 900;
 }
})

export default {
 props: ['onClick', 'isShow'],

 data() {
  return {
   test: 123
  };
 },

 methods: {
  afterLeave() {
   console.log('afterLeave')
  }
 },

 render() {
  const directives = [
   { name: 'my-bold', value: 666, modifiers: { abc: true } }
  ];

  return (
   <transition onAfterLeave={this.afterLeave} name="fade">
    <div class="test" onClick={this.onClick} v-show={ this.isShow } v-my-bold>
     {this.test}
     {this.isShow + ''}
    </div>
   </transition>
  );
 }
}
</script>
<style>
.fade-enter-active, .fade-leave-active {
 transition: opacity .5s
}
.fade-enter, .fade-leave-to {
 opacity: 0
}
</style>
{
 "presets": ["es2015"],
 "plugins": ["transform-vue-jsx"]
}

随后大家就足以娱心悦目地在vue里面编写jsx了。

babel-plugin-transform-vue-jsx

总结

作者们平时写vue的零部件时,一般都是用的是模版,这种艺术看起来非常短小,而且vue小编也援引应用那个点子,但是这种办法也许有局地它的弊端,比方模版调节和测试麻烦,也许在有的面貌下模版描述或然没那么粗略和福利。

前言

设置格局:

扩展

能够见见大家把jsx写在了render方法里面,render方法是vue2.0才支撑的,用来提供对虚拟DOM的帮助,约等于说唯有vue2.0才支撑jsx语法转变。

<script>
export default {
 props: ['onClick', 'isShow'],

 data() {
  return {
   test: 123
  };
 },

 render() {
  return (
   <div class="test" onClick={ this.onClick }>
    { this.test }
    { this.isShow + '' }
   </div>
  );
 }
}
</script>
const directives = [
 { name: 'my-dir', value: 123, modifiers: { abc: true } }
]

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

下边大家要讲的是如何在vue里面写jsx,知道react的人应该都了然jsx,jsx的三个特点正是极其灵活,纵然片段人觉着jsx极不好看,把逻辑都写到模版的感到,但萝卜青菜各有所爱,适合自己适合共青团和少先队的正是最棒的。

我们仍是可以够用原生vnode的数目格式使用自定义指令:

能够见到DOM属性要加domProps前缀,但此处lass和style却不要求,因为那四个是新鲜的模块,而且react的class用的是className,vue却用的class。事件监听是以“on”大概“nativeOn”为发端。

你或者感兴趣的稿子:

Test.vue

本文首要给大家介绍的是关于使用jsx写vue组件,下边话没有多少说,来贰头探访详细的牵线吧。

在动用jsx以前我们需求设置三个babel插件(babel-plugin-transform-vue-jsx

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

以上就是那篇小说的全体内容,希望本文的原委对大家的求学可能工作能带来一定的扶持,借使有疑难咱们可以留言沟通,多谢我们对台本之家的援救。

render (h) {
 return h('div', {
 // Component props
 props: {
  msg: 'hi'
 },
 // normal HTML attributes
 attrs: {
  id: 'foo'
 },
 // DOM props
 domProps: {
  innerHTML: 'bar'
 },
 // Event handlers are nested under "on", though
 // modifiers such as in v-on:keyup.enter are not
 // supported. You'll have to manually check the
 // keyCode in the handler instead.
 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'
 })
}

临时我们难免会在模板里引进jsx编写的vue组件也许在jsx编写的vue组件里引进模版组件,这里依然略微须求小心的事项:

以下是一段覆盖超越百分之五十语法的vue jsx代码:

上边的jsx最终会被编写翻译成上边那样:

<template>
 <div class="wrapper">
 <Test :on-click="clickHandler" :is-show="show"></Test>
 </div>
</template>

<script>
import Test from './Test.vue';

export default {
 name: 'hello',
 components: {
 Test
 },
 data() {
 return {
  msg: 'Welcome to Your Vue.js App',
  show: true
 };
 },
 methods: {
 clickHandler(){
  this.show = !this.show;
 }
 }
};
</script>

实际上vue2.0的沙盘最终都会被编写翻译为render方法,所以模版评释的零部件和jsx申明的零部件最终都以一律的。

2.在jsx里面引进vue模版组件,这里未有啥样要专注的,除了连接符式的习性要调换到驼峰式,还应该有三个内需留意的是命令,若是用了jsx,那么内置的命令都不会一蹴而就(除了v-show),幸亏停放指令大多数都得以用jsx描述。那么自定义指令要怎么用吗?

这里要注意的有些是vue里面编写jsx和在react里面的jsx语法如故有好几不一致等的。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图