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


Posted in Javascript onNovember 11, 2017

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>
 <h1>{i == 1 ? 'True!' : 'False'}</h1>
</div
// 注释
<div>
  <h1>菜鸟教程</h1>
  {/*注释...*/}
</div>
// html
<div>{{_html: '<h1>Hello World!!</h1>'}}</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 jsx 使用指南及vue.js 使用jsx语法的方法,希望对大家有所帮助!

Javascript 相关文章推荐
图片格式的JavaScript和CSS速查手册
Aug 20 Javascript
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
jsonp原理及使用
Oct 28 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
vue父组件向子组件动态传值的两种方法
Nov 11 #Javascript
详解Vue如何支持JSX语法
Nov 10 #Javascript
微信小程序异步处理详解
Nov 10 #Javascript
微信小程序实现选项卡功能
Jun 19 #Javascript
微信小程序实现多宫格抽奖活动
Apr 15 #Javascript
十分钟带你快速了解React16新特性
Nov 10 #Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 #Javascript
You might like
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
浅析php原型模式
2014/11/25 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
Linux下编译安装MySQL-Python教程
2015/02/02 Python
对python的文件内注释 help注释方法
2018/05/23 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
python实现简单俄罗斯方块
2020/03/13 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
继承权公证书范本
2015/01/23 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
python神经网络Xception模型
2022/05/06 Python