# jsx

`JSX`这部分内容是在参考文章:[在 vue 中使用 jsx 语法](https://juejin.im/post/5affa64df265da0b93488fdd#heading-0)中提炼出来的,就是跟着敲代码跑了一遍.基本就明白了

## 什么是 JSX?

---

JSX 就是 Javascript 和 XML 结合的一种格式。React 发明了 JSX，利用 HTML 语法来创建虚拟 DOM。当遇到<，JSX 就当 HTML 解析，遇到{就当 JavaScript 解析.

## 使用 template

```html
// item.vue
<template>
<template>
 <div>
   <h1 v-if="id===1">
     <slot></slot>
   </h1>
   <h2 v-if="id===2">
     <slot></slot>
   </h2>
   <h3 v-if="id===3">
     <slot></slot>
   </h3>
   <h4 v-if="id===4">
     <slot></slot>
   </h4>
 </div>
</template>

<script>
   export default {
       name: "item",
       props:{
         id:{
           type:Number,
           default:1
         }
       }
   }
</script>
```

## class,style,ref

```js
render (h) {
  return (
    <div
      // normal attributes or component props.
      id="foo"
      // DOM properties are prefixed with `domProps`
      domPropsInnerHTML="bar"
      // event listeners are prefixed with `on` or `nativeOn`
      onClick={this.clickHandler}
      nativeOnClick={this.nativeClickHandler}
      // other special top-level properties
      class={{ foo: true, bar: false }}
      style={{ color: 'red', fontSize: '14px' }}
      key="key"
      ref="ref"
      // assign the `ref` is used on elements/components with v-for
      refInFor
      slot="slot">
    </div>
  )
}
```

## V-APP

```html
<template>
  <div id="app">
     <h-title :id="id">Hello World</h-title>
    <button @click="next">下一个</button>
    <h-title2 :id="id">Hello World</h-title2>
    <vif :id="id">Hello World</vif>
    <vfor></vfor>
    <vmodel></vmodel>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
import Title from './components/item';
import Title2 from './components/item2';
import vif from './components/vif';
import vfor from './components/vfor';
import vmodel from './components/vmodel';

export default {
  name: 'app',
  data() {
    return {
      id: 1,
    };
  },
  components: {
    HelloWorld,
    'h-title': Title,
    'h-title2': Title2,
    vif: vif,
    vfor: vfor,
    vmodel: vmodel,
  },
  methods: {
    next() {
      if (this.id === 6) {
        this.id = 1;
      }
      ++this.id;
    },
  },
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
```

## v-for

```html
<script>
export default {
  name: 'vif',
  data() {
    return {
      show: false,
      list: [1, 2, 3, 4],
    };
  },
  render() {
    return (
      <div>
        {this.list.map((v) => {
          return <p>{v}</p>;
        })}
      </div>
    );
  },
};
</script>
```

## v-if

```html
<script>
export default {
  name: 'vif',
  props: {
    id: {
      type: Number,
      default: 1,
    },
  },
  render() {
    const hText = `<h${this.id}>${this.$slots.default[0].text}</h${this.id}>`;
    let ifText;
    if (this.id > 3) {
      ifText = <p>你帅</p>;
    } else {
      ifText = <p>你丑</p>;
    }
    return (
      <div>
        <div domPropsInnerHTML={hText} />
        <hr />
        <div>{this.id > 3 ? '你帅' : '你丑'}</div>
        <hr />
        <div>{ifText}</div>
      </div>
    );
  },
};
</script>
```

## v-model

```html
<script>
export default {
  name: 'item',
  data() {
    return {
      show: false,
      list: [1, 2, 3, 4],
      text: '',
    };
  },
  methods: {
    inputss(e) {
      this.text = e.target.value;
    },
  },
  render() {
    return (
      <div>
        <input type="text" value={this.text} onInput={this.inputss} />
        <p>{this.text}</p>
      </div>
    );
  },
};
</script>
```

## 函数式组件

```html
<script>
//父组件
 //...省略无关代码
render(){
  return (
    <Item data={this.data} class="large"/>
  )
}
//Item.vue组件
export default {
  functional:true,
  name: "item",
  render(h,context){
    return (
      <div class="red" {...context.data}>
        {context.props.data}
      </div>
    )
  }
}
</script>
```

### click

```js
// 父组件
methods:{
  show(){
    alert('你好')
  }
},
render(){
  return (
    <Item data={this.data} onNativeClick={this.show} class="large"/>
  )
}
```

作者：fantasy525<br/>
链接：[https://juejin.im/post/5affa64df265da0b93488fdd](https://juejin.im/post/5affa64df265da0b93488fdd)<br/>
来源：掘金<br/>
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。<br/>