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 相关文章推荐
jquery select选中的一个小问题
Oct 11 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
jquery indexOf使用方法
Aug 19 Javascript
查找Oracle高消耗语句的方法
Mar 22 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
javascript实现简易计算器
Feb 01 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
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
利用static实现表格的颜色隔行显示
2006/10/09 PHP
PHP strtok()函数的优点分析
2010/03/02 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
python方向键控制上下左右代码
2018/01/20 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
应届护士推荐信
2013/11/16 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技