这篇文章主要介绍Vue中jsx不完全应用的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
为榆树等地区用户提供了全套网页设计制作服务，及榆树网站建设行业解决方案。主营业务为网站建设、成都网站设计、榆树网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
在使用Vue开发项目时绝大多数情况下都是使用模板来写HTML，但是有些时候页面复杂又存在各种条件判断来显示/隐藏和拼凑页面内容，或者页面中很多部分存在部分DOM结构一样的时候就略显捉襟见肘，会写大量重复的代码，会出现单个.vue文件过长的情况，这个时候我们就需要更多的代码控制，这时候可以使用渲染函数。
渲染函数想必平时几乎没有人去写，因为写起来很痛苦（本人也没有写过）。更多的是在Vue中使用JSX语法。写法上和在React中差不多，但是功能上还是没有React中那么完善。
在写JSX的过程中不得考虑一个样式的问题，虽然可以直接在.vue文件中不写 在父组件中使用： 在上面的代码中我们实际上使用解构的方式来取得injectedProps，基于解构的特性还可以重命名属性名，在prop为undefined的时候指定初始值。 如果组件只有一个默认的插槽还可以使用缩写语法，将v-slot:default="slotProps"写成v-slot="slotProps"，命名插槽写成v-slot:user="slotProps"，如果想要动态插槽名还可以写成v-slot:[dynamicSlotName]，此外具名插槽同样也有缩写语法，例如 v-slot:header可以被重写为#header 上面介绍了很多插槽相关的知识点足已说明其在开发过程中的重要性。说了很多在模板中如何定义和使用作用域插槽，现在进入正题如何在jsx中同样使用呢？ 然后在父组件中以jsx使用： 指令 这里需要注意的是在jsx中所有Vue内置的指令除了v-show以外都不支持，需要使用一些等价方式来实现，比如v-if使用三目运算表达式、v-for使用array.map()等。 对于自定义的指令可以使用v-name={value}的语法来写，需要注意的是指令的参数、修饰符此种方式并不支持。以官方文档指令部分给出的示例v-focus使用为例，介绍二种解决办法： 1 直接使用对象传递所有指令属性 2 使用原始的vnode指令数据格式 过滤器 过滤器其实在开发过程中用得倒是不多，因为更多时候可以通过计算属性来对数据做一些转换和筛选。这里只是简单提及一下并没有什么可以深究的知识点。 在模板中的用法如下：{{ injectedProps.user.firstName }}
// current-user components
{
data() {
return {
user: {
firstName: 'snow',
lastName: 'wolf'
}
}
},
computed: {
slotProps() {
return {
user: this.user,
logFullName: this.logFullName
}
}
},
methods: {
logFullName() {
console.log(`${this.firstName} ${this.lastName}`)
}
},
render() {
return (
{this.$scopedSlots.subTitle({
injectedProps: this.slotProps
})}
)
}
}
)
}
}}>injectedProps.user
{
directives：{
focus: {
inserted: function(el) {
el.focus()
}
}
},
render() {
const directives = [
{ name: 'focus', value: true }
]
return (
)
}
}
{{ message | capitalize }}
在jsx中使用方法为：
{this.$options.filters('formatDate')('2019-07-01')}
注意：由于Vue全局的过滤器只用于模板中，如果需要用于组件的方法中，可以把过滤器方法单独抽离出一个公共Js文件，然后引入组件中，然后用于方法中。
一些简单经验分享
并不是说我们在开发Vue项目的时候一定要使用jsx的方式来写，但是多掌握一种方式来灵活变通，提高工作效率，扩展思路何尝不值得一试。而且，在有些场景下释放js的完全编程能力会让你更加能够得心应手。其实在使用模板方式的时候我们并没有完全采用组件的思维方式来做，或者说是做得不彻底，不纯粹，拆分的粒度不够。更多 的时候并没有考虑到组件怎么切分和抽象，多人协作的时候如何处理依赖并明确自己的功能点。
关于DOM属性、HTML属性和组件属性
在React中所有数据均挂载在props下，Vue则不然，仅属性就有三种：组件属性props，普通html属性attrs和DOM属性domProps。在Angular的文档中关于插值绑定部分是重点说明了DOM属性和HTML属性的区别，在大多数情况下两者都有对应的同名属性，也就是1:1映射关系，但是也有例外的情况，比如HTML中colspan，DOM中的textContent。HTML属性的值指定了初始值，并且不能改变，而DOM属性的值表示当前值，是可以改变的。
然后在Vue的模板语法中是不区分DOM属性和HTML属性的，例如：