반응형
Vuejs 3 Stand Alone Component 만들기
Vue3 를, (npm 없이, webpack 없에, package.json 없이 등등..),
홀로 사용 하려는 경우에 vue3 를 개발하는 방식 중 하나 입니다.
Stand Alone 으로 사용할 수 밖에 없는 경우만 봐주세요~
npm build 없이 php 나 html 에서 사용하려면 .vue 를 import 못하기 때문에
js 로 component 를 만들어서 사용해야합니다.
우선 javascript 파일을 만듭니다.
baseCard.js
const BaseCard = {
props:{
title: String,
content: {
type: String,
default: "",
description: "card content"
},
buttonText: {
type: String,
default: "Ok",
description: "button text"
}
},
template:`
<div class="card" style="width: 18rem;margin: auto;">
<img src="https://i1.daumcdn.net/thumb/C58x58/?fname=https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FTDpcV%2FbtrwqNbZy5N%2FhrBS6KeeRGRiBDKHkWWUHk%2Fimg.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{ title }}</h5>
<p class="card-text">{{ content }}</p>
<button class="btn btn-primary" @click="handleClick">{{ buttonText}}</button>
</div>
</div>
`
}props : 여기에는 tag 에 attribute 로 전달 받을 파라메터들을 입력해 줍니다.
props: [ 'title', 'content', 'something' ] // 이렇게 간단하게 써도 됩니다.
// 또는 아래와 같이 기본값등의 설정도 할 수 있습니다.
props: {
title : {
type: String,
default: "Default Title",
description: "description of this field"
}
}template : 여기에 html 코드와 props 를 사용할 수 있습니다.
template 을 감싸고 있는 문자는 ` 입니다. (상단 숫자키 1번의 왼쪽)
props 는 {{ }} 사이에 사용해서 쓸수 있습니다.
이렇게 작성 한 custom javascript vue template 을 가져다가 쓰는 방법은,
우선 이 js 파일을 include 합니다.
<script src="./baseCard.js"></script>그리고 createApp 안에 components 에 등록해 줍니다.
base-card 는 <base-card></base-card> 로 사용하기 위해 이름을 지어준 것이고,
뒤에 있는 BaseCard 는, 위에서 const BaseCard = { ... } 로 사용한 상수 명입니다.
그리고 tag 에서 다음과 같이 사용할 수 있습니다.
실행 결과
전체 소스
baseCard.js 는 위에 소스가 있습니다.
lesson06.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Hello Vue</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5">
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- vue 3 -->
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<!-- vue 3 -->
<script src="https://unpkg.com/vue@3"></script>
<div id="app">
<base-card title="Custom Card" content="cardMessage" @click="hello"></base-card>
</div>
<script src="./baseCard.js"></script>
<script>
var app = Vue.createApp({
components: {
'base-card': BaseCard
},
data() {
return {
cardMessage: "Hello~ bryan. This is for you"
}
},
methods: {
hello(){
alert('hi');
}
},
}).mount('#app')
</script>
<style>
#app{
width: 100%;
margin: 20px;
}
</style>
</body>
</html>
728x90
반응형
'Vue.js' 카테고리의 다른 글
| [Vue3] Router 에서 권한 체크해서 login 페이지로 보내기 (0) | 2023.09.05 |
|---|---|
| [Vue] vuex 설치 (0) | 2023.08.20 |
| [Vue3] Stand Alone #5. bootstrap CDN 으로 사용하기 (0) | 2022.03.21 |
| [Vue3] Stand Alone #4. fetch post (php json 호출하기) (0) | 2022.03.21 |
| [Vue3] Stand Alone #3. v-for, :key (0) | 2022.03.20 |
댓글