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 相关文章推荐
点图片上一页下一页翻页效果
Jul 09 Javascript
JS操作iframe里的dom(实例讲解)
Jan 29 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
详解Vue底部导航栏组件
May 02 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
vue实现标签云效果的示例
Nov 09 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
PHP5/ZendEngine2的改进
2006/10/09 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
js a标签点击事件
2017/03/30 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
python3中str(字符串)的使用教程
2017/03/23 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
数据管理员的自我评价分享
2013/11/15 职场文书
微博营销计划书
2014/01/10 职场文书
2014年高考决心书
2014/03/11 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
Python django中如何使用restful框架
2021/06/23 Python
python基础之模块的导入
2021/10/24 Python
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript