전체 글
-
[Vue.js] 양방향 데이터 바인딩 v-modelFront-End/Vue.js 2022. 11. 13. 13:12
VueJs의 꽃이라고 할 수 있는 v-model에 대해 정리하려 한다. 📑 양방향 데이터 바인딩 지금까지 앞에서 다룬 vue.js에 대한 내용들은 '단방향 데이터 바인딩'이었다. 뷰 인스턴스의 data 객체가 가지고 있는 정보를 HTML 코드 내로 바인딩하여 그 값을 확인했다. methods 내의 함수로 데이터를 변경하면 변경하는 즉시 값이 변하는 것을 확인했다. 즉) Vue 인스턴스 -> Template와 같은 방향으로 한 방향으로 데이터에 접근할 수 있었다. 이게 바로 단방향 데이터 바인딩이다. 그렇다면 양방향 데이터 바인딩은?? 말 그대로 vue 인스턴스에서 초기값 설정과 같이 값을 저장해두면 화면에서 볼 수 있고, 화면에서 어떤 값을 입력한다면 그것이 Vue 인스턴스에 저장되는 것이다. 이렇게 양..
-
[Vue.js] 계산된 속성 computed vs methodsFront-End/Vue.js 2022. 11. 13. 12:51
vue를 사용하면서 el, data, method 값을 정의할 수 있었다. 만약 버튼 클릭 시 1씩 증가하는 로직이 있다고 했을 때 보통 method에 이러한 로직을 처리한다. 그러나 html 에서 {{ }} 내에서 js 로직을 처리할 수도 있고 와 같이 html 태그안에 직접 js 코드를 넣어줘도 가능하다. 하지만 이런 템플릿 내의 표현식은 단순한 연산에서만 사용이 가능하기 때무에 복잡한 계산식을 계산해서 값을 return 해주는 "계산된 속성"이라는 computed가 필요하다. 📑 computed 만약 count의 값이 1씩 증가할 때 값이 10보다 커지면 10보다 큽니다 라는 문구를 출력하도록 작성해보자. {{ isLargerThanTen }} 클릭 클릭 버튼을 4번째 누름과 동시에 10보다 큽니다..
-
[Vue.js] 기본 문법 (v-on 이벤트리스너)Front-End/Vue.js 2022. 11. 13. 12:11
이전엔 data를 이용해서 값을 적용할 수 있는 v-bind, v-once, v-html에 대해 정리해봤다. 이번 포스팅에선 이벤트와 관련된 v-on 디렉티브에 대해 정리해보려고 한다. 📑 이벤트 리스너, v-on v-on은 이벤트 리스너의 역할을 한다. 이벤트 리스너란? 예를들어 사용자가 로그인 페이지에 접속할 때, 아이디와 패스워드를 입력하고 로그인 버튼을 클릭하는 순간 로그인이 된다. 여기서 로그인 버튼은 자신이 클릭되는 순간에 로그인 이벤트를 실행시키게 된다. 바로 여기서 이벤트를 실행하기 위한 트리거( 여기서는 로그인 버튼 클릭)와 이벤트를 연결해주는 것을 이벤트 리스터라고 한다. 📌 주사위 던지기 예제 주사위 던지기로 이벤트 리스너에 대해 더 알아보겠다. 로직은 아래와 같이 작성한다. 1. 주..
-
[Vue.js] 기본 문법 (v-once, v-html)Front-End/Vue.js 2022. 11. 13. 11:30
앞서 vue.js의 기본 문법과 v-bind에 대해 정리해 보았다. 이번 포스팅에선 디렉티브의 다른 문법들을 정리해보자. https://wonisdaily.tistory.com/140 [Vue.js] 개념과 기본문법 살펴보기 (data, method) 📑 Vue.js란? 프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크이다. MVVM 패턴의 ViewModel에 해당하며, UI 코드와 데이터제어 제어 로직을 분리한다. SPA(Single Page wonisdaily.tistory.com 📑 v-once 설명에 앞서 바로 코드를 살펴보자. {{text}} {{sayHello()}} 위의 코드를 살펴보면 sayHello 함수는 data에 선언된 text 값을 "..
-
[Vue.js] 기본 문법, 디렉티브 사용 v-bindFront-End/Vue.js 2022. 11. 13. 10:43
Vue.js의 기본 개념과 data, method는 이전 포스팅에서 알아봤다. 이번엔 vue에 문법에 대해 알아보려고 한다. https://wonisdaily.tistory.com/140 [Vue.js] 개념과 기본문법 살펴보기 (data, method) 📑 Vue.js란? 프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크이다. MVVM 패턴의 ViewModel에 해당하며, UI 코드와 데이터제어 제어 로직을 분리한다. SPA(Single Page wonisdaily.tistory.com 📑 v- bind 지금까지 {{mustached}} 기호를 통해 Vue 내의 값 혹은 함수를 불러왔다. 하지만 만약 문자열을 출력해야 하는 간단한 경우가 아니라 HTML ..
-
[Vue.js] 개념과 기본문법 살펴보기 (data, method)Front-End/Vue.js 2022. 11. 13. 10:01
📑 Vue.js란? 프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크이다. MVVM 패턴의 ViewModel에 해당하며, UI 코드와 데이터제어 제어 로직을 분리한다. SPA(Single Page Application)를 구축하는데 이용 가능하다. 📌 view(html DOM) : 사용자에게 보이는 화면. 📌 Model(JS) : 데이터를 담는 용기, 보통 서버에서 가져온 데이터를 javascript 객체로 저장 📌 ViewModel : View와 Model의 중간 영역으로 DomListener와 DataBinding을 제공하는 영역 📌 DOM : HTML 문서에 들어가는 요소(tag, class, attribute 등)의 정보를 담고있는 데이터 트리 📌 ..
-
[JavaScript] html과 js 실행 순서, $('document').ready(function(){}) 쓰는 이유프로그래밍 언어/JavaScript 2022. 11. 13. 09:27
html 태그 안에서 js를 html 코드보다 위에 쓰면 js 동작이 적용되지 않는 걸 봤다. 그럼 html,js 등 어떤 방식으로 로딩 되는 걸까? 그 순서를 알아보며 $('document').ready(function(){})를 쓰는 이유도 적어볼까 한다. 📑 $('document').ready(function(){}) 란? $('document').ready(function(){})는 'html 문서의 로딩이 끝나면'을 의미한다. 즉) html 문서가 로딩된 후 해당 함수를 실행시켜라. 라는 의미이다. document는 하나의 html 파일을 나타내는 트리의 루트 노드 객체라고 생각하면 될 것 같다. 그럼 이 코드는 언제 사용되는 걸까? 예제를 통해 알아보려 한다. 📑 js와 html 아래 코드에선..
-
[javaScript] jQuery로 코드 변경해보기 (html, css, class 제어, 이벤트리스너)프로그래밍 언어/JavaScript 2022. 11. 12. 12:53
제이쿼리는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리로, “write less, do more(적게 작성하고, 많은 것을 하자)”라는 모토로 2006년 미국의 SW 개발자 존 레식(John Resig)이 발표했다. javaScript보다 코드가 간결하기 때문에 종종 사용되는데 그 사용법을 간단하게 포스팅해보려고 한다. 📑 javascript -> jQuery 변경 기본 자바스크립트를 이용한 코드보다 코드 양이 절반으로 줄은 걸 확인할 수 있다. $는 querySelecctor와 동일하게 사용할 수 있다. 안녕 안녕2 안녕2 물론 css도 변경이 가능하다. css 속성값을 변경하려면 아래와 같다. $('.hello').css('color','red') ..