JSX入门级教程

1、什么是JSX JSX 是一种 Javascript 的语法扩展，JSX = Javascript + XML，即在 Javascript 里面写 XML， 因为 JSX 的这个特性， 所以他即具备了 Javascript 的灵活性，同时又兼具 html 的语义化和直观性。

2、JSX的使用场景 动态渲染

3、JSX的优点 JSX 更易读，

的写法⼀看就是⽐ this.$createElement('div', {}, [...]) 简洁很多； Jsx也是JavaScript； Vue支持jsx； Jsx使自定义组件更容易导入和管理。

4、在 Vue 中使用 JSX 需要注意的地方
要监听 JSX 中的事件，我们需要“on”前缀。 例如，将onClick用于单击事件。 要修改事件，请使用 绑定变量，注意这里不是使用 : 用{} v-model={this.visible} 将HTML字符串设置为元素的内容，使用domPropsInnerHTML而不是使用v-html

5、安装 npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

6、配置 .babelrc(babel.config.js) ： module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ['@vue/babel-preset-jsx', { 'injectH': false }] ] }

7、vue中使用

//结合ui框架使用

import { Button } from "element-ui";
export default {
name: "aboutCom",
data() {
  return {
    visible: false,
  };
},
watch: {},
methods: {
  renderFooter() {
    return (
      <div>
        <el-button>确定</el-button>
        <el-button onClick={ () =>this.closeDialog() }>取消</el-button>
      </div>
    );
  },
  openDialog(){
      this.visible = true
  },
  closeDialog(){
      this.visible = false  
  }
},
render() {
  const buttons = this.renderFooter();
  return (
    <div>
      <Button onClick={ () =>this.openDialog() }>打开Dialog</Button>
      <el-dialog visible={this.visible}>
        <div>我是一个弹窗</div>
        <template slot="footer">{buttons}</template>
      </el-dialog>
    </div>
  );
},
};

//函数式组件

export default {
  functional: true,
  name: "item",
  render(h, context) {
    console.log(context.props)
    return <div style="color:red;font-size:18px;font-weight:bold">{context.props.message}</div>;
  },
};

// 手把手教程

import myComponent from './myComponent';
import soltCom from './soltCom';
import funCom from './funCom';
import { Button } from 'element-ui';
// 创建一个组件button
const ButtonCounter = {
  name: 'button-counter',
  props: ['count'],
  methods: {
    onClick() {
      this.$emit('change', this.count + 1);
    },
  },
  render() {
    return <button onClick={this.onClick}>数量 {this.count}+</button>;
  },
};

export default {
  name: 'HelloWorld',
  components: {
    myComponent,
    funCom,
    soltCom,
  },
  data() {
    return {
      text: 'hello How are you！',
      count: 0,
      value: '',
      isRed: true,
      visible: false,
      list: [
        {
          name: '张三',
        },
        {
          name: '李四',
        },
        {
          name: '王麻子',
        },
      ],
    };
  },
  props: {
    msg: String,
  },
  watch: {},
  mounted() {
    setTimeout(() => {
      this.visible = true;
    }, 2000);
  },

  methods: {
    onChange(val) {
      this.count = val;
      alert(this.count);
      this.value = '';
    },
    changeInput() {
      console.log(this.value);
    },
    clickOnce(val) {
      alert(val);
    },
  },
  render() {
    const colorRed = { color: 'red' };
    return (
      <div>
        <h3>我是JSX</h3>
        {/* 纯文本 */}
        <p>hello, I am jsx</p>
        {/* 动态内容 */}
        <p>{this.text}</p>
        <p>hello {this.msg}</p>
        {/* {组件} */}
        <myComponent />
        {/* 动态绑定class和style */}
        <p style={this.isRed ? colorRed : ''}>红色的文字</p>
        {/* 可以在APP.vue里用全局样式 也可以引入less或者scss文件 */}
        <p class="colorRed">12345678</p>
        <p class="greenColor">9012</p>
        {/* 输入框 */}
        <input v-model={this.value} placeholder="请输入" onInput={this.changeInput} />
        <ButtonCounter style={{ marginTop: '10px' }} count={this.count} type="button" onChange={this.onChange} />
        <br />
        <br />
        {/* 传参 */}
        <button type="button" on={{ '~click': () => this.clickOnce('我是参数') }}>
          点击
        </button>
        {/* 循环渲染 */}
        <div style={{ color: 'red', fontSize: '14px' }}>
          {this.list.map(item => {
            return <div>{item.name}</div>;
          })}
        </div>
        {/* 函数式组件 */}
        <fun-com message="展示下函数式组件"></fun-com>
        {/* 自定义具名插槽 */}
        <solt-com visible={true}>
          <template slot="footer">
            <Button>确定</Button>
            <Button>取消</Button>
          </template>
          <template slot="footer2">我是自定义具名插槽footer2</template>
        </solt-com>
      </div>
    );
  },
};

// 具名插槽引用

export default {
  name: "soltCom",
  data() {
    return {
      
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  render() {
    console.log(this.$slots);
    return (
      <div v-show={this.visible}>  
        {/**自定义具名插槽*/}
        <p class="footer">
          <div class="custom-dialog__foolter">{this.$slots.footer}</div>
        </p>
        <p class="footer2">
          <div class="custom-dialog__foolter">{this.$slots.footer2}</div>
        </p>
      </div>
    );
  },
};