vue template
语法简单明了,数据操作与视图分离,开发体验友好。但是在某些特定场合中,会限制一些功能的扩展,如动态使用过滤器、解析字符串类型的模板文件、动态渲染机器人交互
等。以上功能的实现可以借助vue的render语法
,render语法比template
更偏底层,允许在HTML中使用js语法,可以极大的扩展HTML的能力。
注意:
vue+jsx
的写法,需要摒弃
vue的部分特性
Props传参
/views/about.vue
子组件
<script>
export default {
name: 'Home',
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>
)
}
}
</script>
<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>
运行项目后,如下图:
试着修改输入框的值:
事件
举例:点击事件
注:vue中绑定点击事件直接是
@click='fn'
,在JSX
中需要改为onClick={fn}
/views/Fn.vue
<script>
export default {
name: 'Home',
data(){
return{
}
},
methods:{
alert(){
alert("你点了我,这是JSX写法的弹出事件")
}
},
render(){
return(
<div id='wrap'>
<p onClick={this.alert}>点击我出现弹框</p>
</div>
)
}
}
</script>
运行后如下图:
其他事件类似,具体自研。。。。
判断语句
举例 v-if
&& v-else
注:在
JSX
中判断语句需要更换为三目表达式
/views/if.vue
<script>
export default {
name: "Home",
data() {
return {
flag: 0
};
},
methods: {
flag1() {
this.flag = 1;
},
flag0() {
this.flag = 0;
}
},
render() {
return (
<div id="wrap">
{this.flag === 1 ? <span>flag=1显示</span> : <span>flag=0显示</span>}
<p>
<button value="1" onClick={this.flag1}>1</button>
<button value="0" onClick={this.flag0}>0</button>
</p>
</div>
);
}
};
</script>
持续更新。。。