Vue가 JSX 구문을 지원하는 방법에 대한 자세한 설명

보통 우리는 Vue를 개발할 때 템플릿 구문을 사용합니다. 실제로 React와 동일한 구문이 있는데, 이는 jsx 구문도 지원하는 render 함수입니다. 이 글은 주로 Vue가 JSX 구문을 지원하는 방법에 대한 자세한 설명을 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

Vue의 템플릿은 실제로 렌더링 기능으로 컴파일됩니다.

1. 기존의 createElement 메소드

createElement(
 'anchored-heading', {
  props: {
   level: 1
  }
 }, [
  createElement('span', 'Hello'),
  ' world!'
 ]
)

는 다음과 같이 렌더링됩니다

<anchored-heading :level="1">
　　<span>Hello</span> world!
</anchored-heading>

2. Vue에서 사용하는 Babel 플러그인입니다. JSX 구문은 템플릿에 더 가까운 구문으로 돌아갈 수 있게 해준다는 것입니다.

1. 설치

npm install\
 babel-plugin-syntax-jsx\
 babel-plugin-transform-vue-jsx\
 babel-helper-vue-jsx-merge-props\
 babel-preset-es2015\
 --save-dev

2. .babelrc 파일을 편집합니다.

{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}

코드는 다음과 같이 편집됩니다.

Vue.component('jsx-example', {
 render (h) { // <-- h must be in scope
  return <p id="foo">bar</p>
 }
})

h를 createElement의 별칭으로 사용하는 것은 Vue에서 일반적인 규칙입니다. 실제로 JSX에서도 필요합니다. h가 범위에서 해당 역할을 잃으면 애플리케이션에서 오류가 발생합니다.

관련 권장 사항:

JSX와 HTML의 차이점

React 및 JSX_html/css_WEB-ITnose 사용 시작

JSX 구문 학습 JavaScript React 프레임워크 입문 튜토리얼_기본 지식

위 내용은 Vue가 JSX 구문을 지원하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!