vue 구성 요소는 3가지 부분으로 구성됩니다. 1. 구성 요소의 템플릿 구조를 설정하는 템플릿, 2. 구성 요소의 JavaScript 동작을 설정하는 스크립트, 3. 구성 요소의 스타일을 설정하는 스타일. 각 구성 요소는 템플릿 템플릿 구조를 포함해야 하며 스크립트 동작과 스타일은 선택적 구성 요소입니다. ""은 래퍼로만 작동하며 실제 DOM 요소로 렌더링되지 않는 컨테이너 태그입니다. "는 vue에서 제공하는 컨테이너 태그입니다. 래핑 역할만 합니다. 실제 DOM 요소로 렌더링되지 않습니다.
이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3
vue는 구성 요소 개발을 완벽하게 지원하는 프레임워크입니다. vue의 구성 요소 이름은 .vue입니다. 이전에 본 App.vue 파일은 기본적으로 vue 구성 요소입니다.
template -> 컴포넌트의 템플릿 구조script -> 컴포넌트의 JavaScript 동작
style -> 각 구성 요소에는 템플릿 템플릿 구조가 포함되어야 하며, 스크립트 동작과 스타일은 선택적인 구성 요소입니다. Vue에서는 각 구성 요소에 해당하는 템플릿 구조를 노드에 정의해야 한다고 규정합니다. ;은 vue에서 제공하는 컨테이너 태그입니다. 이는 실제 DOM 요소로 렌더링되지 않습니다.
구성 요소에서는 개발자가 현재 구성 요소의 DOM 구조를 렌더링하는 데 도움이 되도록 앞서 학습한 명령 구문이 지원됩니다. vue 2.x 버전에서 노드 내의 DOM 구조는 단일 루트 노드만 지원합니다. <template>
<!-- 当前组件的DOM结构，需要定义到template 标签的内部
</ template>
<template>
<h1>这是App根组件</h1>
<!--使用{{ }}插值表达式-->
<p>生成一个随机数字: {{ (Math. random() * 10). toFixed(2) }}</p>
<!-- 使用v-bind 属性绑定-->
<p :title="new Date(). tol ocaleTimeString()">我在黑马程序员学习vue. js</p>
<!--属性v-on事件绑定
<button @click=”showInfo">按钮</button>
</template>구성 요소의 스크립트 노드
vue 규정: 구성 요소 내의
![당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
