一、使用template还是JSX？
1、template特点
- 模板语法（HTML的扩展）
- 数据绑定使用Mustache语法（双大括号）：
<span>{{title}}<span>
2、JSX特点
- JavaScript的语法扩展
- 数据绑定使用单引号：
<span>{title}<span>
Vue官方建议使用template模板，但是 ：
更抽象一点来看，我们可以把组件区分为两类：一类是偏视图表现的 (presentational)，一类则是偏逻辑的 (logical)。
我们推荐在前者中使用模板，在后者中使用 JSX 或渲染函数。这两类组件的比例会根据应用类型的不同有所变化，但整体来说我们发现表现类的组件远远多于逻辑类组件。
也就是说，在一些特定场景下可以建议使用JSX语法。比如以下面的一组状态判断按钮为例，我们很容易就下意识地在模板内写下这种代码：
<button v-if="status === 1" class="btn1" :class="status === 1" @click="">未开始</button>
<button v-if="status === 2" class="btn2" :class="status === 2" @click="">进行中</button>
<button v-if="status === 3" class="btn3" :class="status === 3" @click="">可领取</button>
<button v-if="status === 4" class="btn4" :class="status === 4" @click="">已领取</button>
是不是很多v-if-else 看的眼花缭乱，别着急，来看jsx大法。
如果我们利用渲染函数可以将上面的代码抽取成优雅的使用组件
<!DOCTYPE html>
<html lang="en">
<body>
<div id="app">
<child :status="status"></child>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('child', {
props: {
status: {
type: Number,
required: true
}
},
render(createElement) {
const innerHTML = ['未开始', '进行中', '可领取', '已领取'][this.status]
return createElement('button', {
class: {
active: this.status
},
attrs: {
id: 'btn'
},
domProps: {
innerHTML
},
on: {
click: () => console.log(this.status)
}
})
}
})
var app = new Vue({
el: '#app',
data: {
status: 0
}
})
</script>
</body>
</html>
我们将所有的逻辑封装进渲染函数内,外部只需要传递一个状态参数即可改变：<child :status="status"></child>
二、JSX语法如何在vue中使用
1、什么是JSX?
JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到 { 就当JavaScript解析。vue中大部分场景是不需要用render函数的，还是用模板更简洁直观。
vue template语法简单明了，数据操作与视图分离，开发体验友好。但是在某些特定场合中，会限制一些功能的扩展，如动态使用过滤器、解析字符串类型的模板文件、动态渲染机器人交互等。以上功能的实现可以借助vue的render语法，render语法比template更偏底层，允许在HTML中使用js语法，可以极大的扩展HTML的能力。注意：vue+jsx 的写法，需要 摒弃 vue的部分特性
2、props传参
// /views/about.vue子组件
export default {
props:['msg','changeInput'], //接收父组件传递的值、事件等
render(){
return(
<div id='wrap'>
<div class='children'>我是子组件</div>
<div class='title'>这是父组件传递过来的数据：{this.msg}</div>
<input placeholder='请输入姓名' value={this.msg} onInput={this.changeInput}/>
</div>
)
}
}
<style lang="less" scoped>
.children{
color: blue
}
</style>
props:子组件接收父组件传递的数据，使用onInput监听输入框变化实现数据双向绑定，把输入框事件操作交给父组件，子组件动态监听输入框数据
/views/home.vue父组件：组件引用后直接在函数中使用，无需使用components
<script>
import About from './About.vue'
export default {
name: 'Home',
data(){
return{
msg:'这是父组件，使用JSX渲染'
}
},
methods:{
changeInput(e){
this.msg = e.target.value
console.log(this.msg);
}
},
render(){
return(
<div id='wrap'>
<p class='title'>我是父组件</p>
//引用子组件，把父组件的数据、方法传给子组件
<About msg={this.msg} changeInput={this.changeInput}></About>
</div>
)
}
}
</script>
<style lang="less" scoped>
.title{
color: red
}
</style>
3、事件
比如点击事件：vue中绑定点击事件直接是@click='fn'，在JSX中需要改为onClick={fn}
render(){
return(
<div id='wrap'>
<p onClick={this.alert}>点击我出现弹框</p>
</div>
)
}