Vue+JSX使用例子

Props传递参数/src/Demo.vue 子组件<script>export default { props: [“msg”], render() { return ( <div> <p>子组件</p> <p>msg: {this.msg}</p> </div> ); }};</script>/src/App.vue 父组件<script>import Demo from “./Demo”;export default { data() { return { msg: “default” }; }, render() { return ( <div> <p>父组件</p> <hr /> <Demo msg={this.msg} /> </div> ); }};</script>使用JSX编写之后，你会发现以上对比以前的写法，好像缺少了components这个配置项。是的，JSX上你完全不用配置compoents，直接写上去就行，这是我比较喜欢的以上简单的参数传递（单向绑定）想必大家都能懂，但如何实现双向绑定呢？绑定事件src/App.vue 父组件<script>import Demo from “./Demo”;export default { data() { return { msg: “default” }; }, methods: { handleOnInput(e) { // 子组件 input的事件回调 // 实现改变msg值 this.msg = e.target.value; } }, render() { return ( <div> <p>父组件</p> <p>msg: {this.msg}</p> <hr /> <Demo msg={this.msg} handleChange={this.handleOnInput} /> </div> ); }};</script><Demo handleChange={ this.handleOnInput} />子组件的handleChange props值与父组件 handleOnInput绑定/src/Demo.vue 子组件<script>export default { props: [“msg”, “handleOnChange”], render() { return ( <div> <p>子组件</p> <p>msg: {this.msg}</p> <!–onInput被触发时，交由父组件事件处理–> <input value={this.msg} onInput={this.handleChange} /> </div> ); }};</script>props:[“handleOnChange”] 事件必须要配置<input onInput={this.handleChange} />当输入框触发onInput事件时，交由父组件的事件处理其实JSX双向绑定就是从原生事件中获取到值之后赋值到对应的变量中，从而达到v-model的效果传递组件/src/components/HelloWorld.vueexport default { render() { return ( <div>Hello</div> ); }}/src/Demo.vueexport default { props: [“component”], render(h) { return ( <div> <p>子组件</p> <!–父组件传入来的组件–> { h(this.component) } </div> ); }}/src/App.vueimport HelloWorld from ‘./components/HelloWorld’import Demo from ‘./Demo’export default { render(h) { return ( <div> <p>父组件</p> <!–向子组件传入组件–> <Demo component={HelloWorld} /> </div> ); }}通过props方式，把一个组件传入到子组件中渲染利用render(h)的h实现渲染v-for 循环在JSX中，循环得使用array.map()的方式来<script>export default { data() { return { data: [ { title: 1 }, { title: 2 } ] }; }, render() { return ( <div> <ul> { this.data.map(item => { return <li>{ item.title }</li> }) } </ul> </div> ); }};</script>v-if 判断三元运算方式一<script>export default { data() { return { isTrue: true, }; }, render() { const msg = this.isTrue ? ‘你中奖了’ : ‘很遗憾，没中’ return ( <div> 中奖情况：{ msg } </div> ); }};</script>三元运算方式二<script>export default { data() { return { isTrue: true, }; }, render() { return ( <div> 中奖情况：{ this.isTrue ? ‘好’ : ’no’ } </div> ); }};</script>样式绑定style方式主要在标签上使用{…{}}进行绑定<script>export default { data() { return { backgroundColor: ‘blue’, styleObject: { backgroundColor: ‘red’, fontSize: ‘20px’, color: ‘#fff’ } }; }, render() { return ( <div> <span {…{ style: { backgroundColor: this.backgroundColor } }}>我是蓝色背景</span> <span {…{ style: this.styleObject }}>我是红色背景</span> </div> ); }};</script>class 方式<script>export default { data() { return { isBlue: true, classOjbect: [‘red’] }; }, render() { return ( <div> <span {…{ class: { blue: this.isBlue, } }}>我是蓝色背景</span> <span {…{ class: this.classOjbect }}>我是红色背景</span> </div> ); }};</script><style>.blue { background: blue}.red { background: red}</style>