Vue에서 JSX 사용 방법

JSX가 뭐예요?

JSX는 Javascript의 문법 확장이다. JSX=Javascript+XML, 즉 Javascript에 XML을 쓴다. JSX의 이 특성 때문에 그는 Javascript의 유연성을 갖추고 html의 의미화와 직관성을 겸비한다

Vue에서 JSX를 사용하는 이유

때때로, 우리는 렌더링 함수 (render function) 를 사용하여 추상적인 구성 요소를 사용합니다. 렌더링 함수는 공식 문서를 잘 참조하지 못하고, 렌더링 함수는 때때로 쓰기에 매우 고통스럽습니다.

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

해당 템플릿은 다음과 같습니다.

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

이것은 분명히 힘들어서 좋은 반응을 얻지 못할 것이다. 이때 JSX를 파견했다.Vue에서 JSX를 사용하려면 Babel 플러그인을 사용해야 합니다. 이 플러그인은 템플릿에 더 가까운 문법으로 돌아갈 수 있습니다. 다음은 Vue에서 JSX를 쓰기 시작합시다.

시작하다

빨리 읽어서 Vue 프로젝트를 만들고 vue-cli를 사용하여 프로젝트를 만듭니다.

#  
vue create vue-jsx

설치 종속성:

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

설정babelrc :

module.exports = {
 presets: [
 '@vue/cli-plugin-babel/preset',
 ['@vue/babel-preset-jsx',
  {
  'injectH': false
  }]
 ]
}

기본 내용

여기에는 일반 텍스트, 동적 내용, 레이블 사용, 사용자 정의 구성 요소 사용 등 Vue에서 작성된 기본 내용이 나와 있습니다. 이것은 우리가 평소에 사용하는 단일 파일 구성 요소와 유사합니다. 아래와 같습니다.

render() {
 return (
 <div>
  <h3> </h3>
  {/*   */}
  <p>hello, I am Gopal</p>
  {/*   */}
  <p>hello { this.msg }</p>
  {/*   */}
  <input />
  {/*   */}
  <myComponent></myComponent>
 </div>
 );
}

Attributes/Props

Attributes의 바인딩은 일반적인 HTML 구조와 같습니다.

render() {
 return <div><input placeholder="111" /></div>
}

동적 속성이 v-bind:placeholder = "this.placeholderText"가placeholder = {this.placeholderText}로 바뀌었음을 주의하십시오.

render() {
 return <input
   type="email"
   placeholder={this.placeholderText}
   />
}

우리도 하나의 대상을 펼칠 수 있다

render (createElement) {
 return (
  <button {...this.largeProps}></button>
 )
}

input 탭과 같이 다음과 같은 대량 귀속 속성을 사용할 수 있습니다

const inputAttrs = {
 type: 'email',
 placeholder: 'Enter your email'
};
render() {
 return <input {...{ attrs: inputAttrs }} /> 
}

슬롯

구명 슬롯과 역할 영역 슬롯을 어떻게 실현하는지 살펴보겠습니다.
구명 슬롯: 부모 구성 요소의 쓰기 방법은 단일 파일 구성 요소 템플릿과 유사합니다. slot='header'를 통해 삽입할 위치를 지정합니다.서브어셈블리는this.$를 통해slots.header 방식은 슬롯의 이름을 지정합니다. 그 중에서 header는 슬롯의 이름입니다.
상위 어셈블리:

render() {
 {/*   */}
 <myComponent>
 <header slot="header">header</header>
 <header slot="content">content</header>
 <footer slot="footer">footer</footer>
 </myComponent>
}

서브어셈블리:

render() {
 return (
 <div>
  {/*   */}
  <p> </p>
  {this.$slots.header}
  {this.$slots.content}
  {this.$slots.footer}
 </div>
 );
}

역할 영역 슬롯: 하위 구성 요소에서 {this.$scopedSlots.test ({user:this.user})} 를 통해 지정한 슬롯의 이름은test이며, user를 부모 구성 요소에 전달합니다.부모 구성 요소가 하위 구성 요소 탭을 쓸 때 scopedSlots 값을 통해 삽입된 위치를test로 지정하고 리셋 함수에서 하위 구성 요소가 전송하는user 값을 가져옵니다.
상위 어셈블리:

render() {
 {/*     */}
 <myComponent {
 ...{
  scopedSlots: {
  test: ({user}) => (
   <div>{user.name}</div>
  )
  }
 }
 }>
 </myComponent>

서브어셈블리:

render() {
 return (
 <div>
  {this.$scopedSlots.test({
  user: this.user
  })}
 </div>
 );
}

명령

일반적인 명령은 다음과 같습니다.

render() {
 {/*   */}
 {/* v-model */}
 <div><input vModel={this.newTodoText} /></div>
 {/* v-model   */}
 <div><input vModel_trim={this.tirmData} /></div>
 {/* v-on   */}
 <div><input vOn:input={this.inputText} /></div>
 {/* v-on   */}
 <div><input vOn:click_stop_prevent={this.inputText} /></div>
 {/* v-html */}
 <p domPropsInnerHTML={html} />
}

함수식 구성 요소

함수식 구성 요소는 상태가 없고 실례가 없는 구성 요소입니다. 자세한 내용은 홈페이지 설명을 참조하고 FunctionalComponent를 새로 만듭니다.js 파일, 내용은 다음과 같습니다.

export default ({ props }) => <p>hello {props.message}</p>

상위 어셈블리에서 다음과 같이 호출됩니다.

import funComponent from './FunctionalComponent'

...

render() {
 return {/*   */}
  <funComponent message="Gopal"></funComponent>
}

다음은 Vue에서 JSX를 사용하는 방법에 대한 상세한 내용입니다. Vue에서 JSX를 사용하는 방법에 대한 더 많은 자료는 저희의 다른 관련 글을 주목해 주십시오!