皇牌天下投注网详解利用jsx写vue组件的方法示例

来源:http://www.prospettivedarte.com 作者:计算机教程 人气:56 发布时间:2019-08-09
摘要:前言 1.html模版 本文主要给大家介绍的是关于利用jsx写vue组件,下面话不多说,来一起看看详细的介绍吧。 引入react.js,react-dom.js,browser.min.js 我们平常写vue的组件时,一般都是用的是模版

前言

1.html模版

本文主要给大家介绍的是关于利用jsx写vue组件,下面话不多说,来一起看看详细的介绍吧。

引入react.js,react-dom.js,browser.min.js

我们平常写vue的组件时,一般都是用的是模版,这种方式看起来比较简洁,而且vue作者也推荐使用这个方式,但是这种方式也有一些它的弊端,例如模版调试麻烦,或者在一些场景下模版描述可能没那么简单和方便。

注意:script标签的type属性为text/babel(因为react独有的jsx语法,和js不兼容;使用jsx语法的地方都要加type=“text/babel”)。

下面我们要讲的是如何在vue里面写jsx,知道react的人应该都知道jsx,jsx的一个特性就是非常灵活,虽然有的人觉得jsx很丑陋,把逻辑都写到模版的感觉,但萝卜青菜各有所爱,适合自己适合团队的就是最好的。

react.js:react核心库

在使用jsx之前我们需要安装一个babel插件(babel-plugin-transform-vue-jsx )

react-dom.js :提供与dom相关的功能

安装方式:

browser.js :将jsx语法转为js语法,最好放在服务器。

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

$babel src --out-dir build

然后再.babelrc里面添加:

将src下的js进行语法转换,转码后放在build子目录中。

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

2.ReactDOM.render(),用于将模版转化为html,并插入到制定节点的DOM 中。

接着我们就可以愉快地在vue里面编写jsx了。

ReactDOM.render(<h1>hello</h1>);

Test.vue

document.getElementById('example');

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

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

 render() {
  return (
   <div class="test" onClick={ this.onClick }>
    { this.test }
    { this.isShow   '' }
   </div>
  );
 }
}
</script>

将h1标题插入example节点

可以看到我们把jsx写在了render方法里面,render方法是vue2.0才支持的,用来提供对虚拟DOM的支持,也就是说只有vue2.0才支持jsx语法转换。

3. JSX语法

皇牌天下投注网,这里要注意的一点是vue里面编写jsx和在react里面的jsx语法还是有一点不一样的。

html直接写在js中,不需要加任何符号----jsx语法。

以下是一段覆盖大部分语法的vue jsx代码:

var name = ['aa','bb','cc'];

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

ReactDOM.render(

可以看到DOM属性要加domProps前缀,但这里lass和style却不需要,因为这两个是特殊的模块,而且react的class用的是className,vue却用的class。事件监听是以“on”或者“nativeOn”为开始。

  <div>

实际上vue2.0的模版最后都会被编译为render方法,所以模版声明的组件和jsx声明的组件最后都是一样的。

    {

上面的jsx最后会被编译成下面这样:

      names.map(function(name){

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

        return <div>hello ,{name}</div>

这也意味着两种形式的组件是可以相互引用的。

      });

有时候我们难免会在模版里引入jsx编写的vue组件或者在jsx编写的vue组件里引入模版组件,这里还是有些需要注意的事项:

    }

1.在模版里面引入jsx的组件,可以通过components引用,另外props的编写从驼峰式改为连接符:

  </div>,

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

);

2.在jsx里面引入vue模版组件,这里没有什么要注意的,除了连接符式的属性要转换成驼峰式,还有一个需要注意的是指令,如果用了jsx,那么内置的指令都不会生效(除了v-show),好在内置指令大部分都可以用jsx描述。那么自定义指令要怎么用呢?

 遇见html以中<开头,代码块以{开头。

自定义指令可以使用“v-name={value} ”语法,如果要支持指令参数和modifier可以用“v-name={{ value, modifier: true }}”语法:

jsx允许在模版插入js变量。

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

4.组件

我们还可以用原生vnode的数据格式使用自定义指令:

react允许将代码封装成组件,然后在网页中插入组件。

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

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

生成组件类的方法:React.createClass.

扩展

var HelloMessage = React.createClass({

如果有人觉得在vue组件里面要写data,props,computed和methods不够优雅,可以参考下这个插件vue-class-component,它能让你使用ES6的class和ES7的装饰器编写vue组件。

  render:function(){

相关链接:

    return <h1>hello {this.props.name}</h1>;

babel-plugin-transform-vue-jsx

  }

本文由皇牌天下投注网发布于计算机教程,转载请注明出处:皇牌天下投注网详解利用jsx写vue组件的方法示例

关键词:

最火资讯