vue2中使⽤jsx简单总结
Vue 中使⽤ JSX
1.开始
在 Vue 中使⽤ JSX，需要使⽤ Babel 插件，它可以让我们回到更接近于模板的语法上
// 安装依赖：
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
// 配置 .babelrc ：
presets: [
'@vue/cli-plugin-babel/preset',
['@vue/babel-preset-jsx',
{
'injectH': false
}]
]
}
2.基础内容
这⾥展⽰在 Vue 中书写⼀些基础内容，包括纯⽂本、动态内容、标签使⽤、⾃定义组件的使⽤，这些跟我们平时使⽤单⽂件组件类似，如下所⽰：
render() {
return (
<div>
<h3>内容</h3>
{/* 纯⽂本 */}
<p>hello, I am Gopal</p>
{/* 动态内容 */}
<p>hello { this.msg }</p>
{/* 输⼊框 */}
<input />
{/* ⾃定义组件 */}
<myComponent></myComponent>
</div>
);
}
3.Attributes/Props
// 3.1 Attributes 的绑定跟普通的 HTML 结构⼀样
render() {
return <div><input placeholder="111" /></div>
}
// 3.2 注意，如果动态属性，之前是 v-bind:placeholder="this.placeholderText" 变成了placeholder={this.placeholderText}
render() {
return <input
type="email"
placeholder={this.placeholderText}
/>
}
// 3.3 我们也可以展开⼀个对象
render (createElement) {
input标签placeholder属性return (
<button {...this.largeProps}></button>
)
}
// 3.4 像 input 标签，就可以如下批量绑定属性
const inputAttrs = {
type: 'email',
placeholder: 'Enter your email'
};
render() {
return <input {...{ attrs: inputAttrs }} />
}
4.插槽
具名插槽：⽗组件的写法和单⽂件组件模板的类似，通过 slot="header" 这样⽅式指定要插⼊的位置。⼦组件通过 this.$slots.header ⽅式指定插槽的名称，其中 header 就是插槽的名称// ⽗组件：
render() {
{/* 具名插槽  */}
<myComponent>
<header slot="header">header</header>
<header slot="content">content</header>
<footer slot="footer">footer</footer>
</myComponent>
}
// ⼦组件：
render() {
{/* 纯⽂本 */}
<p>我是⾃定义组件</p>
{this.$slots.header}
{this.$t}
{this.$slots.footer}
</div>
)
;
}
作⽤域插槽：⼦组件中通过 {this.$st({ user: this.user })} 指定插槽的名称是 test，并将 user 传递给⽗组件。⽗组件在书写⼦组件标签的时候，通过 scopedSlots 值指定插⼊的位置是 test，并在回调函数获取到⼦组件传⼊的 user 值
// ⽗组件：
render() {
{/* 具名插槽作⽤域插槽 */}
<myComponent {
...{
scopedSlots: {
test: ({user}) => (
<div>{user.name}</div>
)
}
}
}>
</myComponent>
}
// ⼦组件：
render() {
return (
<div>
{this.$st({
user: this.user
})}
</div>
);
}
5.指令
// 常见的指令如下所⽰：
render() {
{/* 指令 */}
{/* v-model */}
<div><input vModel={wTodoText} /></div>
{/* v-model 以及修饰符 */}
<div><input vModel_trim={this.tirmData} /></div>
{/* v-on 监听事件 */}
<div><input vOn:input={this.inputText} /></div>
{/* v-on 监听事件以及修饰符 */}
<div><input vOn:click_stop_prevent={this.inputText} /></div>
{/* v-html */}
<p domPropsInnerHTML={html} />
}
6.函数式组件
/
/ 函数式组件是⼀个⽆状态、⽆实例的组件，详见官⽹说明，新建⼀个 FunctionalComponent.js ⽂件，内容如下：
export default ({ props }) => <p>hello {ssage}</p>
// ⽗组件中调⽤如下:
import funComponent from './FunctionalComponent'
...
render() {
return {/* 函数式组件 */}
<funComponent message="Gopal"></funComponent>
}
7.常⽤的vue jsx写法
// 7.1 v-for 可使⽤map⽅法进⾏循环操作：
<el-table>
{
this.fields.map(item => {
return(
<el-table-column prop={item.prop}></el-table-column>
)
})
}
</el-table>
// 7.2 v-if 使⽤三⽬运算符或者if else
render(h){
return (
this.show ? <div>111</div> : <span>222</span>
)
}
或
<div>
{
this.show && (<span>aaa</span>)      }
<span>bbb</span>
</div>
)
}
// 7.3 v-on @  常⽤的@click等事件
<div on-click={this.handleClick}></div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。