Vue 구성 요소는 여러 부분으로 구성됩니다.-프런트엔드 Q&A-php.cn

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 구조는 단일 루트 노드만 지원합니다. 로그인 후 복사

그러나 vue 3.x 버전에서는 这是App根组件 生成一个随机数字: {{ (Math. random() * 10). toFixed(2) }}

我在黑马程序员学习vue. js

按钮 로그인 후 복사 구성 요소의 스크립트 노드

vue 규정: 구성 요소 내의 노드는 선택 사항이며 개발자는 구성 요소의 JavaScript 비즈니스 논리를 ; script > 노드의 기본 구조는 다음과 같습니다. 这是App根组件 这是副标题 로그인 후 복사 script의 이름 노드는 이름 노드를 통해 현재 구성 요소의 이름을 정의할 수 있습니다.

这是App根组件 这是副标题 로그인 후 복사 vue -devtools 사용 프로젝트를 디버깅할 때 사용자 정의된 구성 요소 이름은 각 구성 요소를 명확하게 구분할 수 있습니다.

스크립트의 데이터 노드

vue는 구성 요소 렌더링 중에 필요합니다. //今后，组件相关的data 数据、methods 方法等， //都需要定义到export default 所导出的对象中。 export default {} 로그인 후 복사

구성 요소의 데이터는 함수여야 합니다. Vue에서는 구성 요소의 데이터가 함수여야 하며 데이터 개체를 직접 가리킬 수 없다고 규정합니다. 따라서 구성 요소에서 데이터 데이터 노드를 정의할 때 다음 메서드가 잘못되었습니다. export default { // name 属性指向的是当前组件的名称(建议:每个单词的首字母大写) name: 'MyApp'， } 로그인 후 복사

스크립트의 메서드 노드

구성 요소의 이벤트 처리 기능은 메서드 노드에서 정의되어야 합니다. 샘플 코드는 다음과 같습니다. export default { //组件的名称 name: 'MyApp'， //组件的数据(data方法中return出去的对象，就是当前组件渲染期间需要用到的数据对象) data() { return { username: '哇哈哈 ', } }, } 로그인 후 복사

컴포넌트의 스타일 노드

vue는 다음과 같이 규정합니다. 개발자는 현재 구성 요소의 UI 구조를 아름답게 만듭니다. 노드의 기본 구조는 다음과 같습니다. data: { //组件中，不能直接让data 指向一个数据对象(会报错) count: 0 } 로그인 후 복사 여기서 =""font=""> 스타일 언어. 기본적으로 일반적인 CSS 구문만 지원하며, 선택적 값에는 less, scss 등이 포함됩니다.

한 가지 요령 더 알아보기: 스타일에 맞게 더 적은 구문 지원

如果希望使用less 语法编写组件的style 样式，可以按照如下两个步骤进行配置 ：

①运行npm install less -D 命令安装依赖包，从而提供less 语法的编译支持

②在 标签上添加lang="less" 属性，即可使用less 语法编写组件的样式

h1{ font-weight: normal; i { color: red; font-style: normal; } 로그인 후 복사 【相关推荐： vuejs视频教程 、 web前端开发 】

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

Vue 구성 요소는 여러 부분으로 구성됩니다.