温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue.js如何使用jsx语法

发布时间:2021-07-20 11:58:52 来源:亿速云 阅读:264 作者:小新 栏目:web开发

这篇文章将为大家详细讲解有关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)
// methods
this.foo()
// model
<i-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>
 <h2>{i == 1 ? 'True!' : 'False'}</h2>
</div
// 注释
<div>
  <h2>菜鸟教程</h2>
  {/*注释...*/}
</div>
// html
<div>{{_html: '<h2>Hello World!!</h2>'}}</div>
// h函数写法
return h('Input', {
  props: {
    value: params.row.buyingNums
  },
  on: {
    input: val => {
      params.row.buyingNums = val;
    },
    'on-blur': () => {
      this.update(params);
    }
  }
});
// 所有的事件监听必须以on开头,然后字母大写
// template
<input @on-change='click'>
// jsx
<input onOn-change={() => this.click()}></input>

好了,下面看下vue.js 使用jsx语法的方法

1、创建一个测试的组件

export default {
 name:'Test',
 components:{

 },
 render(h){
  return <div>
   test
  </div>

 },
 data () {
  return {

  }
 }
}

2、把编辑器js语言的版本设置成jsx,这样编辑器 可以正确识别jsx语法

3、安装npm依赖

 babel-plugin-syntax-jsx\
 babel-plugin-transform-vue-jsx\
 babel-helper-vue-jsx-merge-props\

4、修改 .babelrc

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

我是下载的vux的模板,修改之后顺利打包jsx格式的文件

关于“vue.js如何使用jsx语法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI