Vue.js 입문편 ~컴포넌트에 대해~
구성 요소란?
구성 요소는 명명된 재사용 가능한 Vue 인스턴스입니다.
소위 Vue.js에서 인스턴스를 생성하여 HTML에 반영하기 위해
새로운 상자와 같은 이미지군요.
그럼 실제로 성공품과 코드를 살펴보겠습니다.
①Error 메시지 표시
② 클릭된 횟수를 표시
이상 두 가지를 설명합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
</style>
<body>
<div id="app"> <!-- こちらがerrorメッセージ -->
<alert-box>
入力されていません
</alert-box>
<!-- コンポーネント化されているため反映される -->
<alert-box>
入力されていません
</alert-box>
</div>
<!-- クリック回数の取得 -->
<div id="components-demo">
<button-counter></button-counter>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>
Id 요소에는 각각 app 와 components-demo 가 주어지고 있는 것을 봐 알 수 있을까 생각합니다.
그건 그렇고, <alert-box>와 <button-counter>는 실제로 HTML에 존재하지 않으며,
컴퍼넌트에 의해 만들어진 인스턴스가 됩니다.
이제 Vue.js에서 실제로 인스턴스를 생성하는 방법을 살펴 보겠습니다.
①Error 메시지 표시
Vue.component('alert-box',{ //alert-box というコンポーネント作成
template:
`<div class="alert" v-on:click="caution"> //htmlを記述
<strong>Error!</strong>
<slot></slot>
</div>`,
methods:{ //メソッドを定義
caution: function(){
alert('クリックされました') //アラートメッセージの表示
}
}
});
var app = new Vue({ //id要素の取得
el: "#app"
});
② 클릭된 횟수를 표시
Vue.component('button-counter',{ //button-counter というコンポーネント作成
data: function(){
return{ //初期値
count:0
}
},
template:
`<button v-on:click="count++"><p>クリックされた回数は {{ count }} です</p></button>`
});
var button = new Vu({ //id要素の取得
el: '#components-demo'
});
이상의 기술로 이쪽이 완성됩니다.
<참고문헌>
htps // jp. 아 js. rg/v2/구이데/코m포넨 ts. HTML
htps //w w. 요츠베. 이 m/와 tch? v = vD7fZY2F_Kc & st = PLh6V6_7f 떡 SZY hBVFs 2tp0dd 마 W & 왜 x = 8
Reference
이 문제에 관하여(Vue.js 입문편 ~컴포넌트에 대해~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ron-Qiita/items/f203e0c0bac2a107cb4c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
</style>
<body>
<div id="app"> <!-- こちらがerrorメッセージ -->
<alert-box>
入力されていません
</alert-box>
<!-- コンポーネント化されているため反映される -->
<alert-box>
入力されていません
</alert-box>
</div>
<!-- クリック回数の取得 -->
<div id="components-demo">
<button-counter></button-counter>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>
Vue.component('alert-box',{ //alert-box というコンポーネント作成
template:
`<div class="alert" v-on:click="caution"> //htmlを記述
<strong>Error!</strong>
<slot></slot>
</div>`,
methods:{ //メソッドを定義
caution: function(){
alert('クリックされました') //アラートメッセージの表示
}
}
});
var app = new Vue({ //id要素の取得
el: "#app"
});
Vue.component('button-counter',{ //button-counter というコンポーネント作成
data: function(){
return{ //初期値
count:0
}
},
template:
`<button v-on:click="count++"><p>クリックされた回数は {{ count }} です</p></button>`
});
var button = new Vu({ //id要素の取得
el: '#components-demo'
});
Reference
이 문제에 관하여(Vue.js 입문편 ~컴포넌트에 대해~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ron-Qiita/items/f203e0c0bac2a107cb4c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
