vue jsx 使用指南及vue.js 使用jsx语法的方法
2017-11-11 09:58
946 查看
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语法的方法,希望对大家有所帮助!
您可能感兴趣的文章:
相关文章推荐
- vuejs使用jsx语法
- vue.js中使用set方法
- JS创建对象最常用的方法就是使用JSON格式的语法
- 使用Vue.js加sass时遇到 Invalid CSS after ".xxx{": expected "}", was "{" 错误的解决方法
- vue.js指令v-model使用方法
- (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法
- Vue中fragment.js使用方法详解
- vuejs使用指南(一)
- Vue.js 中的 $watch使用方法
- 如何使用webpack在vue项目中写jsx语法
- Vue.js render方法使用详解
- vue.js使用之计算属性与方法返回的差别
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据
- vue.js中组件的创建和使用方法
- Vue.js的使用方法
- Vue.js路由组件vue-router的使用方法
- 关于Vue.js 使用v-cloak后仍显示变量的解决方法
- vue.js中mint-ui框架的使用方法
- Vue.js路由组件vue-router使用方法详解
- Vue.js路由vue-router使用方法详解