一个项目学习Vue3---快速认识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>;

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