VUE 15

Vue.js) 태그에 조건을 달아 조건에 따른 CSS 적용하기(Vue2, 3버전)

아래와 같이 상황에 따라 길이를 다르게 적용해야할때가 있다. C가 있다면 보여주고, 없으면 안보여주는 상태. 비율로해서 없는 부분이 채워지게 할 수 도 있겠지만, C가 있는지 없는지에 대한 조건을 달아서 width값을 다르게 적용해보자. 방법은 간단하다. "[ ]" 로 감싸고 그 안에 삼항 연산자 형식으로 입력하면된다. :style = "[countC > 0 ? 'width: 33.3%' :'width: 50%']" ** 주의할 점. 여기서는 css와는 다르게 카멜표기법이 아닌, 스네이크형식으로 입력해야한다. ex) backgroundColor (X), background-color (O) Vue 2 버전 방식 문법이 조금 다르니 참고하기! :style = "[countC > 0 ? {'width': '..

Front-end/Vue.js 2023.01.04

Vue ) 프록시 설정. Dev Server has been initialized using an options object that does not match the API schema.

나는 뷰를 cli를 통해서 설치한게 아니라 따로 npm으로 필요한것만 설치를 했었다. 그러다 보니 구글링해서 많이 나오는 것을 가져다 쓰면 오류범벅... 그래도 덕분에 이걸쓰려면 뭐가 필요한지 알아가는것같으니 좋다고 생각하자..하하 프록시를 설정하는와중에 나오는 오류다. [webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options.proxy should be one of these: object { … } | [object { … } | function, ...] -> Allows to proxy requests, c..

Front-end/Vue.js 2022.11.19

Vue.js) 스크롤 감지하기. 스크롤 할 때마다 특정 함수 실행

vue 프로젝트에서 화면을 스크롤할때 감지하여 특정 함수를 실행시키고 싶었다. 계속 addEventListener를 해줘도 안되서 뭐지 했는데 뒤에 true를 써줘야 했던것...ㅠㅠㅠ // 이벤트 등록 mounted() { document.addEventListener('scroll', this.scrollEvents, true); }, // 이벤트 해제 beforeUnmount() { window.removeEventListener('scroll', this.scrollEvents); }, methods : { scrollEvents(e) { console.log("스크롤될때마다 이 함수 실행?",e) } } 결과화면 => 스크롤 내릴때마다 함수가 실행된다! 이제 응용해서 만들어야지~

Front-end/Vue.js 2022.09.29

Vue.js) Vue 시작하기, 설치하기(**cil없이 설치)

1. node.js 설치하기 노드js는 웬만하면 12버전 이상으로 설치를 권장한다. https://nodejs.org/ko/download/ 설치 후 버전 확인. 노드를 설치했으면 npm도 자동으로 설치되어 npm버전도 확인해준다. D:\> node -v v16.14.0 D:\> npm -v 8.3.1 2. Vue 패키지 설치 우선 작업을 할 폴더를 생성하고 그 폴더 안으로 들어가서 패키지를 설치한다. D:\myVue> npm init -y 아무것도 없었던 작업폴더에 파일이 하나 생성된다. 3. webpack 패키지 설치 > npm i vue > npm i -D vue-loader vue-template-compiler vue-style-loader webpack webpack-cli webpack-de..

Front-end/Vue.js 2022.09.29

Vue.js) 태그 스타일에 변수 적용하기(CSS에 변수 적용) Vue2, Vue3

내가 하고싶은것은 넓이가 유동적으로 변하는 값에 따라 높이를 맞추고 싶었다. 그냥 간단히 말해 vue단에서 선언한 변수를 css에 적용하고 싶었다. 여러가지 구글링 했을때는 css변수 사용해서 :root에 변수를 선언하라고 되있는데, 나는 css에서 새로운 변수를 만드는게 아니라 자바스크립트 단에서 만든 변수를 사용하고 싶었다. 방법은 생각보다 간단! Vue3 1) 변수 선언 data() { return { hhhhh : '', }; }, 2) 변수에 값 넣기 mounted(){ this.hhhhh = 50 * 10 + "px"; }, 3) 변수를 style에 적용 변동css 변동css Vue2 Vue2는 3과 적용 방법이 살짝 다르다.

Front-end/Vue.js 2022.08.12
반응형