vue template에 <div > 내에 class 명을 선언하고 class 명에 해당하는 css,js 파일이 적용되게 하고 싶어요. 어떻게 하면 좋을까요?

Question

vue template에 <div class = "name" >

내에 class 명을 선언하고 class 명에 해당하는 css,js 파일이 적용되게 하고 싶어요.

carousel 을 넣고 싶은데, vue-slick 사용할 수 있는 쉬운 방법도 없는지 궁금합니다.

Answer 1

<template> <div class="name">css 적용</div> </template> <style scoped> .name { background-color: red; } </style>

위와같이 template 하단에 style 태그를 추가하여 css 를 작성할 수 있습니다. scoped를 붙이면 위 컴포넌트에만 스타일이 적용되고 그렇지 않으면 뷰앱 내의 name 클래스를 가진 모든 요소에 적용됩니다.

그리고 vue-slick 사용법은 https://github.com/staskjs/vue-slick#readme 문서에 아주 자세히 설명되어있으니 여기서 참고하시는게 좋을 듯 합니다.