共计 9018 个字符,预计需要花费 23 分钟才能阅读完成。
学习这篇文章心愿您曾经具备以下常识:
- vue.js 的根本应用
- 对前端三件套 (html、css、js) 曾经能够纯熟应用了
文末有配套 demo 代码:点我中转
JSX 是什么
JSX 是一种 Javascript 的语法扩大,JSX = Javascript + XML,即在 Javascript 外面写 XML,因为 JSX 的这个个性,所以他即具备了 Javascript 的灵活性,同时又兼具 html 的语义化和直观性。(集体倡议灵便度强的局部组件能够用 JSX 来代替,整个我的项目 JSX 属实没必要)
XML 学习地址(学与不学可随便,理解就 ok):https://www.w3school.com.cn/xml/index.asp
用 template 的弊病:https://www.mk2048.com/blog/blog_h1c2c22ihihaa.html
为什么要在 Vue 中应用 JSX
有时候,咱们应用渲染函数(render function)来形象组件,渲染函数不是很分明的参见官网文档, 而渲染函数有时候写起来是十分苦楚的,所以只须要有个理解。
渲染函数:https://cn.vuejs.org/v2/guide/render-function.html#%E5%9F%BA%E7%A1%80
createElement(
'anchored-heading', {
props: {level: 1}
}, [createElement('span', 'Hello'),
'world!'
]
)
其对应的模板是上面:
<anchored-heading :level="1">
<span>Hello</span> world!
</anchored-heading>
你看这 写起来多吃力,这个时候就派上 JSX 上场了。在 Vue 中应用 JSX,须要应用 Babel 插件,它能够让咱们回到更靠近于模板的语法上,接下来就让咱们一起开始在 Vue 中写 JSX 吧。
创立我的项目并配置 Babel
vue create vue-jsx
# 抉择 vue2 的
装置依赖:
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
# or
yarn add @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
配置 .babelrc(babel.config.js):
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
['@vue/babel-preset-jsx',
{'injectH': false}]
]
}
配置后咱们启动我的项目:
yarn serve
demo 结构图:
配置了 babel.config.js 后,咱们把 App.vue 引入的HelloWorld.vue 改为 HelloWorld.js,并且删除 HelloWorld.js 中对于 template 和 style, 以及 script 标签。
export default {
name: 'HelloWorld',
props: {msg: String}
}
JSX 根底用法
这里展现在 Vue 中书写一些根底内容。
纯文本、动静内容、标签应用、自定义组件、款式和 class
import myComponent from './myComponent'
import './HelloWorld.css'
// 创立一个组件 button
const ButtonCounter = {
name: "button-counter",
props: ["count"],
methods: {onClick() {this.$emit("change", this.count + 1);
}
},
render() {
return (<button onClick={this.onClick}> 数量 {this.count}+</button>
);
}
};
export default {
name: 'HelloWorld',
components: {myComponent},
data () {
return {
text:'hello 纸没了飞机',
inputText:'我吃了',
count: 0
}
},
props: {msg: String},
watch: {},
methods: {onChange(val) {
this.count = val;
alert(this.count)
}
},
render() {// const {text,inputText,count} = this // 通过解构,下方 return 片段中就不须要 this
return (
<div>
<h3> 内容 </h3>
{/* 纯文本 */}
<p>hello, I am Gopal</p>
{/* 动静内容 */}
<p>{this.text}</p>
<p>hello {this.msg}</p>
{/* 输入框 */}
<input/>
{/* 自定义组件 */}
<myComponent/>
<ButtonCounter
style={{marginTop: "10px"}}
count={this.count}
type="button"
onChange={this.onChange}
/>
</div>
);
}
}
题外话:创立组件那里大家能够多学学 const 创立的 ButtonCounter 组件的那种形式。在 React 中也是常常会这么创立的。
这么看的话和在 template 里写没有多大区别,标签该是啥还是啥没有变动。那么这么一想的话,style 呢,class呢?接下来就是 style 和 class 款式的写法 (包含 动静款式)
咱们先给 h3 绑定一个 class 为 colorRed:
<h3 class="colorRed"> 内容 </h3>
审查元素发现间接写 class 绑定是能够的:
那么 class 的款式怎么写呢?毕竟 js 文件里写 <style></style> 貌似是不行的!
1、全局款式
App.vue
<style>
.colorRed{color: red;}
</style>
2、引入一个 css 文件或者配合 style-loader 引入一个 less、sass、stylus 文件
留神:都须要装置配置对应的 loader,既然都是 JSX 了,那咱们用 stylus 来解说下,置信 less、sass 大家都会了。stylus 是一个省略了{},靠缩紧来辨认的 css 编译器。(不想用 stylus 可跳过,款式这块可随便)
yarn add global stylus
yarn add --dev stylus stylus-loader
各种 style 装置见:https://www.cnblogs.com/jimc/…
装置实现后新建 HelloWorld.styl,而后引入。
stylus 的应用:https://www.jianshu.com/p/5fb…
stylus 官网:https://stylus.zcopy.site/
控制台 stylus 报错见:https://blog.csdn.net/csdn_zh…
vscode 编辑期报错:装置编辑器 stylus 语法插件,并重启
成果:
行内款式 style:
<p style="color:blue">hello, I am Gopal</p>
动静绑定 class 和 style
<p style={this.isGreen?'color:green':''}>{this.text}</p>
<p class={this.isYellow?'colorYellow':''}>hello {this.msg}</p>
<p style={this.isRed?colorRed:''}> 红色的文字 </p>
属性绑定和一般 HTML 一样的
毕竟 class 和 style 可都是 html 的属性,这点置信大家都晓得的。
<input placeholder="我是 placeholder" />
<input placeholder={placeholderText} />
{/* 解构 N 个属性,要啥放啥 */}
<div {...attrObj} />
成果:
罕用指令
template 罕用指令:v-html | v-text、v-if、v-for、v-modal 等。template 的指令在 JSX 是无奈应用的,故须要一些写法,请看上面。
我新建个 instructions.js 用来示范指令这块。在 App.vue 中引入。
v-html | v-text
在 JSX 外面,如果要设置 dom 元素的 innerHTML,就用到 domProps。
render() {const { htmlCode} = this
return (
<div>
<div domPropsInnerHTML={htmlCode}></div>
</div>
);
}
尽管 v -text 有 domPropsInnerText,但没有用的必要。
v-if
分简略的和简单的。
简略:
render() {
let bool = false
return (
<div>
{bool ? <button> 按钮 1 </button> : <button> 按钮 2 </button>}
</div>
);
}
简单:
render() {
let num = 3
if(num === 1){return( <button> 按钮 1 </button>) }
if(num === 2){return( <button> 按钮 2 </button>) }
if(num === 3){return( <button> 按钮 3 </button>) }
}
v-for
就应用 map 办法来实现,在 react 中也是如此。
render(h) {var list = [1,2,3]
return(
<div>
{list.map(item => <button> 按钮{item}</button>) }
</div>
)
}
v-modal
留神:新版 vue-cli4 中,曾经默认集成了 JSX 语法对 v-model 的反对,能够间接应用
<input v-model={this.value}>
如果你的我的项目比拟老,也能够装置插件 babel-plugin-jsx-v-model 来进行反对我可是 cli4,我来验证下:
验证后果:(通过)
当然以上两种形式你都不想搞,你也能够手动反对,这就波及到监听事件了,请向下看。
监听事件及事件修饰符
监听事件想到用 onChange, onClick 等。
须要留神的是,传参数不能应用 onClick={this.removePhone(params)},这样子会每次 render 的时候都会主动执行一次办法
应该应用 bind,或者箭头函数来传参
methods: {handleClick(val){alert(val)
}
},
<button type="button" onClick={this.handleClick.bind(this, 11)}> 点击 bind</button>
<button type="button" onClick={() => this.handleClick(11)}> 点击箭头函数 </button>
下面提到的用过监听事件来实现 v -modal
<input type="text" value={this.text} onInput={this.input}/>
methods: {input(e){this.text = e.target.value}
},
除此之外,还能够应用对象的形式去监听事件:
render() {
return (
<input
value={this.content}
on={{
focus: this.$_handleFocus,
input: this.$_handleInput
}}
nativeOn={{click: this.$_handleClick}}
></input>
)
}
其余事件的应用同理都是加 on。
事件修饰符
和指令一样,除了个别的之外,大部分的事件修饰符都无奈在 JSX 中应用,这时候你必定曾经习惯了,必定有代替计划的。
.stop:阻止事件冒泡,在 JSX 中应用 event.stopPropagation()来代替
.prevent:阻止默认行为,在 JSX 中应用 event.preventDefault() 来代替
.self:只当事件是从侦听器绑定的元素自身触发时才触发回调,应用上面的条件判断进行代替
if (event.target !== event.currentTarget){return}
.enter 与 keyCode: 在特定键触发时才触发回调
if(event.keyCode === 13) {// 执行逻辑}
除了下面这些修饰符之外,尤大大为了关照咱们这群 CV 仔,还是做了一点优化的, 对于.once,.capture,.passive,.capture.once,尤大大提供了前缀语法帮忙咱们简化代码
render() {
return (
<div
on={{
// 相当于 :click.capture
'!click': this.$_handleClick,
// 相当于 :input.once
'~input': this.$_handleInput,
// 相当于 :mousedown.passive
'&mousedown': this.$_handleMouseDown,
// 相当于 :mouseup.capture.once
'~!mouseup': this.$_handleMouseUp
}}
></div>
)
}
如果有参数传递给办法,不能间接(参数),会在页面中立刻触发,须要我在上面这种写法:
clickOnce(val) {alert(val);
},
<button
type="button"
on={{'~click': ()=>this.clickOnce('只能点一次'),
}}
>
事件修饰符点击一次
</button>
应用范畴(联合第三方 ui 组件)
不仅仅在 render 函数外面应用 JSX,而且还能够在 methods 外面返回 JSX,而后在 render 函数外面调用这个办法。并且也能够间接应用例如 elementui 等 ui 组件。
JSX 还能够间接赋值给变量、例如应用 elementui 的 el-dialog。(您在测试该案例时记得装置 elemnt)
methods: {$_renderFooter() {
return (
<div>
<el-button> 确定 </el-button>
<el-button onClick={() =>this.closeDialog()}> 勾销 </el-button>
</div>
);
},
openDialog(){this.visible = true},
closeDialog(){this.visible = false}
},
render() {const buttons = this.$_renderFooter();
return (
<div>
<Button onClick={() =>this.openDialog()}> 关上 Dialog</Button>
<el-dialog visible={this.visible}>
<div> 弹窗内容 </div>
<template slot="footer">{buttons}</template>
</el-dialog>
</div>
);
}
插槽
插槽就是子组件中提供给父组件应用的一个占位符,插槽分为默认插槽,具名插槽和作用域插槽,上面我顺次为您带来每种在 JSX 中的用法与如何去定义插槽。
默认插槽
应用默认插槽
应用 element-ui 的 Dialog 时,弹框内容就应用了默认插槽,在 JSX 中应用默认插槽的用法与一般插槽的用法根本是统一的,如下代码所示:
render() {
return (<ElDialog title="弹框题目" visible={true}>
{/* 这里就是默认插槽 */}
<div> 这里是弹框内容 </div>
</ElDialog>
)
}
自定义默认插槽
在 Vue 的实例 this 下面有一个属性 $slots, 这个下面就挂载了一个这个组件外部的所有插槽,应用 this.$slots.default 就能够将默认插槽退出到组件外部。
export default {
props: {
visible: {
type: Boolean,
default: false
}
},
render() {
return (<div class="custom-dialog" vShow={this.visible}>
{/** 通过 this.$slots.default 定义默认插槽 */}
{this.$slots.default}
</div>
)
}
}
应用:
<myComponent visible={true} slot> 我是自定义默认插槽 </myComponent>
另 vShow 相当于 v-show,不代表别的也能够这样!
具名插槽
应用具名插槽
有时候咱们一个组件须要多个插槽,这时候就须要为每一个插槽起一个名字,比方 element-ui 的弹框能够定义底部按钮区的内容,就是用了名字为 footer 的插槽。
render() {
return (<ElDialog title="弹框题目" visible={true}>
<div> 这里是弹框内容 </div>
{/** 具名插槽 */}
<template slot="footer">
<ElButton> 确定 </ElButton>
<ElButton> 勾销 </ElButton>
</template>
</ElDialog>
)
}
自定义具名插槽
在上节自定义默认插槽时提到了 $slots,对于默认插槽应用 this.$slots.default,而对于具名插槽,能够应用 this.$slots.footer 进行自定义。
render() {
return (<div class="custom-dialog" vShow={this.visible}>
{this.$slots.default}
{/** 自定义具名插槽 */}
<div class="custom-dialog__foolter">{this.$slots.footer}</div>
</div>
)
}
应用:
<myComponent visible={true}>
<template slot="footer">
<ElButton> 确定 </ElButton>
<ElButton> 勾销 </ElButton>
</template>
</myComponent>
作用域插槽
应用作用域插槽
有时让插槽内容可能拜访子组件中才有的数据是很有用的,这时候就须要用到作用域插槽, 在 JSX 中,因为没有 v -slot 指令,所以作用域插槽的应用形式就与模板代码外面的形式有所不同了。比方在 element-ui 中,咱们应用 el-table 的时候能够自定义表格单元格的内容,这时候就须要用到作用域插槽。
<myComponent1
visible={this.visible}
{...{
scopedSlots: {test: ({ user}) => {
// 这个 user 就是子组件传递来的数据,同理可这样拿到 el-table 的 row,不过 test 得是 default,不过案例还是我这样
<div style="color:blue;"> 快来啊,{user.name},看看这个作用域插槽 </div>
},
},
}}
></myComponent1>
自定义作用域插槽
子组件中通过 {this.$scopedSlots.test({ user: {name:’ 纸飞机 ’}})} 指定插槽的名称是 test,并将 user 传递给父组件。父组件在书写子组件标签的时候,通过 scopedSlots 值指定插入的地位是 test,并在回调函数获取到子组件传入的 user 值
留神:作用域插槽是写在子组件标签中的,相似属性。而不是像具名插槽放在标签外部
新建个作用域插槽.js
// 一个为 jsx 的子组件(玩玩插槽)
export default {
name: "myComponent",
data() {return {};
},
props: {
visible: {
type: Boolean,
default: false,
},
listData: {
type: Array,
default: function() {return [];
},
},
},
render() {
return (<div vShow={this.visible}>
{/** 自定义作用域插槽 */}
<div class="item">
{this.$scopedSlots.test({user: {name:'纸飞机'}
})}
</div>
</div>
);
},
};
成果:
函数式组件
函数式组件是一个 无状态、无实例 的组件,详见官网阐明,新建一个 FunctionalComponent.js 文件,内容如下:
// export default ({props}) => <p>hello {props.message}</p>;
// 或者举荐下方写法
export default {
functional: true,
name: "item",
render(h, context) {console.log(context.props)
return <div style="color:red;font-size:18px;font-weight:bold">{context.props.message}</div>;
},
};
HelloWorld.js 中应用:
<funComponent message="展现下函数式组件"></funComponent>
成果:
代码地址:
https://codechina.csdn.net/qq_32442973/vue2-jsx-demo.git
后记
无论你是要用 vue2 的 jsx 还是 vue3 的 jsx 都没有本质区别,毕竟 vue3 是向下兼容 vue2 的;假使你真的要学 vue3 的 JSX,我倡议你学完 vue2 的再去学;另我不举荐在 vue 中所有的组件和页面都用 JSX,两者须要权衡利弊;同时也不用放心 JSX 和 template 的互相嵌套,两者是能够相互嵌套的。
参考:
https://www.cnblogs.com/ainyi…
https://www.jb51.net/article/…
https://cn.vuejs.org/v2/guide…
https://www.cnblogs.com/htooo…
https://www.jianshu.com/p/84b…
https://cloud.tencent.com/dev…