Vue3-04 快速认识JSX

JSX（JavaScript XML）是一种用于在React框架中编写UI组件的语法扩展。它允许开发者将HTML标记直接嵌入到JavaScript代码中，使得在React组件中编写界面变得更加直观和高效。在编译过程中，JSX会被转换成普通的JavaScript对象，这些对象被称为React元素，然后React使用这些元素来构建DOM（Document Object Model）以渲染用户界面。

JSX原是React框架的技术，Vue也可以拿来用，所以我们也需要了解一下

在 JSX 中嵌入表达式

const name = 'ZhangSan';
const element = <h1>Hello, {name}</h1>;

在 JSX 中嵌入函数

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}
​
const user = {
  firstName: 'Zhang',
  lastName: 'San'
};
​
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

在函数中使用JSX

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;  
    }
  return <h1>Hello, Stranger.</h1>;
 }

JSX 中指定属性

const element = <a href="https://www.legacy.reactjs.org"> link </a>;
const element = <img src={user.avatarUrl}></img>;

使用 JSX 指定子元素

const element = <img src={user.avatarUrl} />;
const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX 表示对象

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

JSX 防止注入攻击

const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = <h1>{title}</h1>;

 关注公众号：资小库，问题快速答疑解惑