Development/Vue2 Vue deep 선택자 (deep selector) Deep Selector in Vue scoped vue에서 를 주면 해당 컴포넌트 안에서만 스타일 속성이 주어진다. ... .btn[data-v-e1123455]:hover { } 이런 방식으로 특정 vue 컴포넌트의 특정 요소에 지정되어 다른 컴포넌트에는 영향을 끼치지 않는다. scoped를 붙이지 않으면 글로벌하게 적용된다. deep 는 하위 컴포넌트에까지 영향을 끼치진 않는다. 만약 한 컴포넌트에 포함된 하위 컴포넌트까지 스타일을 적용하고 싶다면, deep selector를 사용해야 한다. // Vue2 /deep/ {} // deprecated ::v-deep // Sass >>> // without Sass // Vue3 /deep/ {} // deprecated >>> // deprecate.. 2022. 6. 13. vue의 문법 (v-directive, Vue 인스턴스 생성, watch, data 등) vue의 문법 Vue 인스턴스 Vue 공식 가이드의 인스턴스 부분은 이렇게 시작한다. 모든 Vue 앱은 Vue함수로 새 Vue 인스턴스를 만드는 것부터 시작합니다. Vue로 개발하려면 이런 인스턴스를 만드는 것부터 시작해야 한다. var vm = new Vue({ //옵션 }) new Vue({ el: "#print", data: { text: 'hello Vue!' }, }) 옵션 el 인스턴스 생성시 el 옵션을 사용할 수 있다. 위의 인스턴스 생성에서도 대략 알 수 있듯, el이라 함은 Vue가 실행할 HTML의 DOM요소를 지정하는 것이다. el을 지정할 때는 CSS의 선택자처럼 사용하면 된다. el : { #selector } data Vue의 data객체. data : { name : 'yeo.. 2022. 6. 13. 이전 1 다음