我在开发中主要用的是vue2,但是有时候改别人的代码,别的是用JSX语法写的,所以现在把我碰到的JSX写法总结一下。用JSX真是很能锻炼JavaScript的能力,用惯了其实JSX也挺方便的。
先来简单说一下JSX是什么:
JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析。
1、vue中的<template>
vue中是用<template>来写html的,而用JSX写法,所有的dom元素都用render方法,像写函数一样加到页面中。
const index = {
name: 'index',
components: {
},
data() {
return {
};
},
props: {
msg: {
// type: String,
// default: 'World'
}
},
render(h) { // eslint-disable-line
return (
<div class="welcome">
和vue一样,所有的元素都必须包含在一个父元素里面。
</div>
);
},
mounted(){
},
methods: {
}
};
export default index;
2、 vue中的v-if
在JSX写法中,类似v-if的功能不止一种写法,闲杂列举我碰到的两种。
1、
第一种:
const index = {
data() {
return {
one:false,
two:1
}
},
render(h) {
const { one , two } = this; //为了在下面引用data时少些this,可以在render函数里把this赋值给这些数据
return (
<div>
{ one && <div>当one为true时才显示</div> }
{ two==2 && <div>当two为2时才显示</div>}
</div>
)
}
}
第二种:
const index = {
data() {
return {
key: 0
}
},
render(h) {
let show;
if(key == 1){
show = <div>当key=1时显示</div>
}
return (
<div>
{ show }
</div>
)
}
}
3、vue中的v-for
在JSX中,需要循环数据的时候就用JS原生的循环方式就可以,大多数我用的都是数组的map遍历方法
4、动态的设置class
<span class={'checkbox ' + (this.selected ? 'checked' : 'unchecked')}></span>
//当selected为true时,class为’checkbox checked‘,为false时,class为’checkbox unchecked‘