반응형 Vue시작하기16 [ VueJS 입문 ] 이벤트 리스너 v-on / VueJS Directive 이벤트 디렉티브 v-on - https://jsfiddle.net/sunghun/th2m9ws7/12/ v-on 디렉티브는 이벤트가 일어 났을 때 javascript를 실행 하는 디렉티브이다. 가장 대표적인 이벤트는 클릭 이벤트를 예로 든다면 사이트에 접속 후 아이디와 패스워드를 입력 후 로그인 버튼을 '클릭' 해야지 로그인이 되는 상황을 볼 수 있다. 이때 로그인 버튼은 자신이 클릭 되는 순간과 이벤트를 서로 연결하는 것이 "이벤트 리스너" 라고 한다. v-on:이벤트명="methods 이름" 샘플은 주사위 던지기 입니다. 즉 '주사위 던지기' 라는 버튼을 클릭시 앞 숫자가 1~6으로 랜덤하게 표현되는 예제이다. 이때 해당 버튼에는 v-on:click="rollDick()" 을 넣어 클릭시 해당 함수가.. 2019. 9. 24. [ VueJS 입문 ] HTML 코드를 직접 template에 넣어주는 v-html / VueJS Directive Html을 직접 넣는 디렉티브 v-html - https://jsfiddle.net/sunghun/th2m9ws7/10/ 샘플에서 보면 html 부분에는 태그로만 내용이 있지만 해당 내용을 Run버튼으로 실행해서 본다면 Vue속성으로 잡혀있는 태그가 태그 안에 그대로 삽입되어 있는 것을 볼수 있다. 즉 필요한 html을 속성에 넣어두고 필요한 부분에 직접 html을 삽입할 수 있게 된다. 2019. 9. 23. [ VueJS 입문 ] 일회성 디렉티브 v-once / VueJS Directive 일회성 디렉티브 - https://jsfiddle.net/sunghun/th2m9ws7/8/ 샘플에서 보면 sayHello() 함수 부분에 title을 "안녕하십니까!" 로 변경해두었다. 만일 태그에 v-once 속성을 사용하지 않았다면 {{ title }} 과 {{ sayHello() }} 두곳 모두 변경된 "안녕하십니까!" 가 출력이 될 것 이다. 하지만 v-once 디렉티브로 {{ title }}의 원래의 값인 "안녕 VueJS!"가 출력이 되고 그뒤 함수 안에서 변경된 내용은 다음 {{ sayHello() }} 부분에만 변경이 되게 된다. 2019. 9. 22. [ VueJS 입문 ] HTML 속성에 접근 v-bind / VueJS Directive HTML 속성에 접근하기 지금까지 HTML 코드에 {{ mustached }} 를 사용해 원하는 위치에 Vue의 값 또는 함수를 불러왔다. 만일 지금과 같은 문자열을 출력하는게 아닌 HTML의 속성 내에서 선언을 하고 싶을땐 이전과 같은 방법으론 불가능하다. Ex) 링크 // 사용불가능 위와 같이 하이퍼링크부분에 속성을 삽입하고 싶다면 {{ mustached }}가 아닌 v-bind 디렉티브를 사용해야한다. 디렉티브(Directive) 란? 디렉티브란, HTML 태그 안에 들어가는 속성의 역할을 하며, v- 라는 접두사가 붙는것이 특징이다. 디렉티브는 여러가지가 있다. Html 속성에 접근하는 v-bind - https://jsfiddle.net/sunghun/th2m9ws7/6/ Html속성에 Vue내.. 2019. 9. 21. [ VueJS 입문 ] VueJS 함수 저장소 / VueJS Methods 함수 저장소, methods - https://jsfiddle.net/sunghun/th2m9ws7/1/ Vue의 정보를 저장하는 곳이 data라면 함수를 저장하는 곳은 methods 이다. 예제에 보면 methods에 howAreYou() 라는 함수를 선언하였다. 간단하게 "기분이 어때?"라는 문자열을 return한 함수이다. 해당 코드를 Run버튼을 눌러 실행해보면 {{ howAreYou() }} 자리에 해당 문자열이 나타나는 것을 볼 수 있다. Vue 내에서 Vue를 지칭하는 단어, this - https://jsfiddle.net/sunghun/th2m9ws7/2/ Data 안의 정보를 가져와 바로 사용하는데 있어 필요한 마법의 단어는 this 이다. 예제를 보면 sayHello()라는 함수에 t.. 2019. 9. 21. [ VueJS 입문 ] VueJS의 정보 저장소 data / VueJS data Vue선언 - https://jsfiddle.net/sunghun/th2m9ws7/ VueJS의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링하는 것. 쉽게 면에 렌더링 되는 HTML 코드들을 컨트롤 하는 것. New Vue({ })는 이러한 역할을 할 Vue를 선언하고 정의해주는 역할. Vue의 정보 저장소 data Vue는 여러 속성(property)들을 가지는데 그 중 data는 Vue에서 사용할 정보들을 저장하는 곳으로 object 형태로 정보들을 가지고 있다. 우리는 title이란 변수를 만들어 "안녕 VueJS!"라는 값을 넣어주었다. 그럼 이 Vue는 "안녕 VueJS!" 라는 값을 들고 title 값이 어디로 가야할지 찾는다. 그 값의 위치는 여기 {{ Mustac.. 2019. 9. 20. [ VueJS 입문 ] 시작하기 앞서 새로운 자바스크립트(Javascript)의 프레임워크인 Vue를 최근 공부하기 시작하며, 공부한 내용을 기록으로 남기고자 한다. 다음 내용들은 '맨땅에 개발하기' 의 'Hoza Cho' 님의 좋은 강의 내용을 토대로 공부하고 있으며, 강의 내용을 따라한 예제나 일부 설명부분들을 그대로 또는 일부 조금 수정해보았다. ( 참고사이트 - 맨땅에 VueJS ) 새로운 프레임워크를 잘 적응하여 프론트개발에 있어 더 다양한 결과가 나오길 기대해본다. 2019. 9. 20. 이전 1 2 다음 반응형
