집 > 기사 > 웹 프론트엔드 > Vue 구성 요소는 여러 부분으로 구성됩니다.

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

青灯夜游원래의: 2022-12-20 15:08:054518검색

vue 구성 요소는 3가지 부분으로 구성됩니다. 1. 구성 요소의 템플릿 구조를 설정하는 템플릿, 2. 구성 요소의 JavaScript 동작을 설정하는 스크립트, 3. 구성 요소의 스타일을 설정하는 스타일. 각 구성 요소는 템플릿 템플릿 구조를 포함해야 하며 스크립트 동작과 스타일은 선택적 구성 요소입니다. "

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3

vue는 구성 요소 개발을 완벽하게 지원하는 프레임워크입니다. vue의 구성 요소 이름은 .vue입니다. 이전에 본 App.vue 파일은 기본적으로 vue 구성 요소입니다.

template -> 컴포넌트의 템플릿 구조

script -> 컴포넌트의 JavaScript 동작
style -> 각 구성 요소에는 템플릿 템플릿 구조가 포함되어야 하며, 스크립트 동작과 스타일은 선택적인 구성 요소입니다. Vue에서는 각 구성 요소에 해당하는 템플릿 구조를
구성 요소에서는 개발자가 현재 구성 요소의 DOM 구조를 렌더링하는 데 도움이 되도록 앞서 학습한 명령 구문이 지원됩니다. vue 2.x 버전에서

<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 규정: 구성 요소 내의 <script> 노드는 선택 사항이며 개발자는 구성 요소의 JavaScript 비즈니스 논리를 <script> ; script > 노드의 기본 구조는 다음과 같습니다. <p><strong><pre class="line-numbers language-js"><template>  <div> <h1>这是App根组件</h1> <h2>这是副标题</h2> </div> </ template></pre><span style="font-size:16px;">script의 이름 노드는 이름 노드를 통해 현재 구성 요소의 이름을 정의할 수 있습니다. <p><pre class="line-numbers language-js"><template>  <h1>这是App根组件</h1> <h2>这是副标题</h2> </template></pre><span style="font-size:16px;"> vue -devtools 사용 프로젝트를 디버깅할 때 사용자 정의된 구성 요소 이름은 각 구성 요소를 명확하게 구분할 수 있습니다. <p><strong><span style="font-size:16px;"><p><span style="font-size:16px;"><p>스크립트의 데이터 노드 <span style="font-size:16px;"><p><strong>vue는 구성 요소 렌더링 중에 필요합니다. <span style="font-size:16px;"><pre class="line-numbers language-js"><script> //今后，组件相关的data 数据、methods 方法等， //都需要定义到export default 所导出的对象中。 export default {} </script></pre>구성 요소의 데이터는 함수여야 합니다. Vue에서는 구성 요소의 데이터가 함수여야 하며 데이터 개체를 직접 가리킬 수 없다고 규정합니다. 따라서 구성 요소에서 데이터 데이터 노드를 정의할 때 다음 메서드가 잘못되었습니다. <p><span style="font-size:16px;"><pre class="line-numbers language-js"><script> export default { // name 属性指向的是当前组件的名称(建议:每个单词的首字母大写) name: &#39;MyApp&#39;， } </script></pre><p>스크립트의 메서드 노드 <strong><span style="font-size:16px;">구성 요소의 이벤트 처리 기능은 메서드 노드에서 정의되어야 합니다. 샘플 코드는 다음과 같습니다. <p><span style="font-size:16px;"><pre class="line-numbers language-js"><script> export default { //组件的名称 name: &#39;MyApp&#39;， //组件的数据(data方法中return出去的对象，就是当前组件渲染期间需要用到的数据对象) data() { return { username: &#39;哇哈哈 &#39;, } }, } </script></pre><p>컴포넌트의 스타일 노드<span style="font-size:16px;"><br/><br/>vue는 다음과 같이 규정합니다. 개발자는 <style> 현재 구성 요소의 UI 구조를 아름답게 만듭니다. <script> 노드의 기본 구조는 다음과 같습니다. <p style="text-align:center"><span style="font-size:16px;"><pre class="line-numbers language-js">data: { //组件中，不能直接让data 指向一个数据对象(会报错) count: 0 }</pre><img alt="Vue 구성 요소는 여러 부분으로 구성됩니다." border="0" style="max-width:90%" src="http://www.itheima.com/images/newslistPIC/1635153282142_31.png" style="width: 646px; height: 158px;" title="Vue 구성 요소는 여러 부분으로 구성됩니다." vspace="0" style="max-width:90%"/>여기서<style>=""font=""> 스타일 언어. 기본적으로 일반적인 CSS 구문만 지원하며, 선택적 값에는 less, scss 등이 포함됩니다. <p><strong><span style="font-size:16px;"> 한 가지 요령 더 알아보기: 스타일에 맞게 더 적은 구문 지원<p><p><span style="font-size:16px;">如果希望使用less 语法编写组件的style 样式，可以按照如下两个步骤进行配置<span style="font-size: 16px;">：<p><span style="font-size:16px;">①运行npm install less -D 命令安装依赖包，从而提供less 语法的编译支持<p><span style="font-size:16px;">②在<style> <="" font="">标签上添加lang="less" 属性，即可使用less 语法编写组件的样式<pre class="line-numbers language-js"><style> h1{ font-weight: normal; i { color: red; font-style: normal; } </style></pre><p>【相关推荐：<a href="https://www.php.cn/course/list/18.html" target="_blank" textvalue="vuejs视频教程">vuejs视频教程、<a href="https://www.php.cn/course/list/1.html" target="_blank">web前端开发】</script>

위 내용은 Vue 구성 요소는 여러 부분으로 구성됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css less scss npm 封装对象事件 dom ui

성명：

이전 기사：React는 프레임워크인가요, 아니면 언어인가요?다음 기사：React는 프레임워크인가요, 아니면 언어인가요?