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

前端之家收集整理的这篇文章主要介绍了vue jsx 使用指南及vue.js 使用jsx语法的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

vue jsx 语法与 react jsx 还是有些不一样,在这里记录下。

); } else { component = (
); } var ul = (
    {component}
); // map 语句 var coms = limit.map(i => { return {
  • {ul}
  • }; }) // 属性
  • console.log()}> // 自定义指令 let directives = [{name: 'prod-img',value: params.row.skn,modifiers: {skn: true}} ]; return (
    // 属性展开
    ); // 自定义过滤器 不建议使用,直接当函数使用 foo(something) // methods this.foo() // model (params.row.factoryCode = val)} style={{width: '100%'}}> // 自定义事件 return ( // event 绑定 ); //三元运算

    {i == 1 ? 'True!' : 'False'}

    菜鸟教程

    {/*注释...*/}
  • // html
    {{_html: '

    Hello World!!

    '}}
    // h函数写法 return h('Input',{ props: { value: params.row.buyingNums },on: { input: val => { params.row.buyingNums = val; },'on-blur': () => { this.update(params); } } }); // 所有的事件监听必须以on开头,然后字母大写 // template // jsx this.click()}>

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

    1、创建一个测试的组件

    },render(h){
    return

    test

    },data () {
    return {

    }
    }
    }

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

    3、安装npm依赖

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

    4、修改 .babelrc

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

    总结

    以上所述是小编给大家介绍的vue jsx 使用指南及vue.js 使用jsx语法的方法,希望对大家有所帮助!

    猜你在找的Vue相关文章