# # jsx

`JSX`这部分内容是在参考文章:在 vue 中使用 jsx 语法
中提炼出来的,就是跟着敲代码跑了一遍.基本就明白了

## # 什么是 JSX?

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

## # 使用 template

    // 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

## # class,style,ref

    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>
      )
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

## # V-APP

    <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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

## # v-for

    <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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

## # v-if

    <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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

## # v-model

    <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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

## # 函数式组件

    <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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

### # click

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

1
2
3
4
5
6
7
8
9
10
11

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