vue与react模板语法对比

模板语法

文本

<!--
 * @Author: 寒云 <1355081829@qq.com>
 * @QQ: 大前端QQ交流群：976961880
 * @Date: 2022-01-04 21:44:46
 * @LastEditTime: 2022-01-04 21:46:33
 * @LastEditors: 寒云
 * @Description: 
 * @FilePath: \vue-ts\src\Cat.vue
 * 善始者实繁，克终者盖寡
-->
<template>
  <span>Message: {{ msg }}</span>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const msg = ref("msg");
    return {
      msg,
    };
  },
});
</script>

渲染结果

react

/*
 * @Author: 寒云 <1355081829@qq.com>
 * @QQ: 大前端QQ交流群：976961880
 * @Date: 2022-01-04 21:39:11
 * @LastEditTime: 2022-01-04 21:50:39
 * @LastEditors: 寒云
 * @Description:
 * @FilePath: \react-ts\src\App.tsx
 * 善始者实繁，克终者盖寡
 */
import React from "react";
import "./App.css";
import Cat from "./Cat";

function App() {
  return (
    <div className="App">
      <span>
        <Cat />
      </span>
    </div>
  );
}

export default App;

渲染结果

原始HTML

vue

<!--
 * @Author: 寒云 <1355081829@qq.com>
 * @QQ: 大前端QQ交流群：976961880
 * @Date: 2022-01-04 21:52:37
 * @LastEditTime: 2022-01-04 21:52:38
 * @LastEditors: 寒云
 * @Description: 
 * @FilePath: \vue-ts\src\MyHtml.vue
 * 善始者实繁，克终者盖寡
-->
<template>
  <div v-html="rawHtml"></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const rawHtml = '<span style="color: red">This should be red.</span>';
    return {
      rawHtml,
    };
  },
});
</script>

渲染结果

react

/*
 * @Author: 寒云 <1355081829@qq.com>
 * @QQ: 大前端QQ交流群：976961880
 * @Date: 2022-01-04 21:55:23
 * @LastEditTime: 2022-01-04 21:57:55
 * @LastEditors: 寒云
 * @Description:
 * @FilePath: \react-ts\src\MyHtml.tsx
 * 善始者实繁，克终者盖寡
 */
import React from "react";

function MyHtml() {
  const rawHtml = '<span style="color: red">This should be red.</span>';

  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: rawHtml }}></div>
    </div>
  );
}

export default MyHtml;

属性绑定

vue

<!--
 * @Author: 寒云 <1355081829@qq.com>
 * @QQ: 大前端QQ交流群：976961880
 * @Date: 2022-01-04 22:02:57
 * @LastEditTime: 2022-01-04 22:02:58
 * @LastEditors: 寒云
 * @Description: 
 * @FilePath: \vue-ts\src\MyAttribute.vue
 * 善始者实繁，克终者盖寡
-->
<template>
  <div :id="id">绑定id</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const id = "lee";
    return {
      id,
    };
  },
});
</script>

渲染效果

react

/*
 * @Author: 寒云 <1355081829@qq.com>
 * @QQ: 大前端QQ交流群：976961880
 * @Date: 2022-01-04 22:05:56
 * @LastEditTime: 2022-01-04 22:06:22
 * @LastEditors: 寒云
 * @Description:
 * @FilePath: \react-ts\src\MyAttribute.tsx
 * 善始者实繁，克终者盖寡
 */
import React from "react";

function MyAttribute() {
  const id = "lee";

  return (
    <div>
      <div id={id}>绑定id</div>
    </div>
  );
}

export default MyAttribute;

渲染效果

使用 JavaScript 表达式

<!--
 * @Author: 寒云 <1355081829@qq.com>
 * @QQ: 大前端QQ交流群：976961880
 * @Date: 2022-01-04 22:09:35
 * @LastEditTime: 2022-01-04 22:10:37
 * @LastEditors: 寒云
 * @Description: 
 * @FilePath: \vue-ts\src\JavascriptTest.vue
 * 善始者实繁，克终者盖寡
-->
<template>
  {{ num }}
  <br />
  {{ num + 1 }}
  <br />
  {{ num > 0 ? "大于零" : "小于等于0" }}
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const num: number = ref(0);
    return {
      num,
    };
  },
});
</script>

显示效果

react

/*
 * @Author: 寒云 <1355081829@qq.com>
 * @QQ: 大前端QQ交流群：976961880
 * @Date: 2022-01-04 22:12:40
 * @LastEditTime: 2022-01-04 22:12:40
 * @LastEditors: 寒云
 * @Description:
 * @FilePath: \react-ts\src\JavascriptTest.tsx
 * 善始者实繁，克终者盖寡
 */
import React from "react";

function JavascriptTest() {
  let num: number = 0;
  return (
    <div>
      {num}
      <br />
      {num + 1}
      <br />
      {num > 0 ? "大于零" : "小于等于0"}
      <br />
    </div>
  );
}

export default JavascriptTest;

显示效果

指令

vue

<!--
 * @Author: 寒云 <1355081829@qq.com>
 * @QQ: 大前端QQ交流群：976961880
 * @Date: 2022-01-04 22:15:51
 * @LastEditTime: 2022-01-04 22:17:03
 * @LastEditors: 寒云
 * @Description: 
 * @FilePath: \vue-ts\src\MyDirective.vue
 * 善始者实繁，克终者盖寡
-->
<template>
  <span v-if="isAuth">认证通过</span>
  <span v-else>认证失败</span>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const isAuth = ref<Boolean>(false);
    return {
      isAuth,
    };
  },
});
</script>

显示效果

react

/*
 * @Author: 寒云 <1355081829@qq.com>
 * @QQ: 大前端QQ交流群：976961880
 * @Date: 2022-01-04 22:18:35
 * @LastEditTime: 2022-01-04 22:18:35
 * @LastEditors: 寒云
 * @Description:
 * @FilePath: \react-ts\src\MyDirective.tsx
 * 善始者实繁，克终者盖寡
 */
import React from "react";

function MyDirective() {
  const isAuth: Boolean = false;
  return <div>{isAuth ? "认证通过" : "认证失败"}</div>;
}

export default MyDirective;

显示效果