'SPA/Vue.js' 카테고리의 글 목록

이 영역을 누르면 첫 페이지로 이동

nm2 블로그의 첫 페이지로 이동

nm2

페이지 맨 위로 올라가기

nm2

nm2의 개인공부 저장

v-html

2021.04.02

일반적으로 {{ }} (이중 중괄호)을 이용한 보간법으로는 html tag들을 문자열로 출력하게 된다. 하지만 v-html를 이용하면 html tag들을 사용한 형태로 출력이 가능하다. html {{ msg }} js const vm = new Vue ({ el: '#app', data: { msg: 'message !', htmlMsg: 'message !' }, });

v-once

2021.04.01

v-once는 vue.js에서 한번만 랜더링 되고 이후에 업데이트는 되지않는다. 따라서 업데이트를 원하지 않을때 사용하면 좋다. html (bootstrap) Change {{ msg }} {{ msg2 }} {{ msg2 }} js const vm = new Vue ({ el: '#app', data: { msg: 'once', msg2: 'sample data' }, methods: { changeMsg() { this.msg = 'new once', this.msg2 = 'new sample data' } } });

v-model

2021.02.10

v-model은 vue.js에서 지원해주는 내용으로 vue data와 양방향 통신을 할수있게 도와준다. 특정 input tag나 기타 값에 v-model tag로 원하는 data 값을 연결 시켜주면 해당 값이 자동으로 반영된다. v-model의 경우는 활용방법이 많으니 지속적으로 활용하면서 익혀야 한다. 기본적인 데이터 연결만 정리해도 이후에 나오는 프로젝트나 정리에서 추가적으로 설명 html {{ email }} js const app = new Vue({ // vue 객체 생성 el: '#app', data: { // 초기값 설정 email: 'test@email.com' } }); 아래는 출력값 이후에 v-model로 연결되어있는 input tag의 값을 바꾸게 되면 자동적으로 위에 p tag값도 ..

v-for

2021.02.08

v-for는 우리가 흔히 알고있는 프로그래밍 언어의 for문의 개념과 비슷하다. 배열의 있는 값을 순서대로 뿌려주는데. 최근에 c# 언어를 계속 공부하다보니 c#의 foreach와 비슷하다고 느껴진다. 먼저 html {{ todo.title }} 다음은 js const vm = new Vue({ el: "#app", data: { todos: [ { id: '1', title: 'sample data #1', done: true }, { id: '2', title: 'sample data #2', done: false }, { id: '3', title: 'sample data #3', done: true }, { id: '4', title: 'sample data #4', done: false }, {..

v-if, v-show

2020.06.09

vue.js는 v-if와 v-show를 통해서 해당 엘리먼트를 조건에 맞춰서 출력해줄수 있다. 현재는 간단한 예제이지만 지속적으로 사용해가면서 익혀 나가야겠다. visible1 visible2 일단 기본적으로 vue.js는 new Vue라는 객체를 만듬으로써 시작된다. el를통해 vue.js를 적용시킬 영역을 결정하고 컨트롤 한다. 아무튼. 현재 위처럼 코드가 작성되어있으면 예상 가능하게 해당 h1태그가 전부 나타난다. 당연하듯이 아래쪽의 data의 visible를 false로 바꿔주게 되면 위의 h1태그는 나타나지 않는다. 하지만 둘의 차이점이 있는데 위의 코드를 개발자도구를 이용해서 보게되면 나타난다. v-show를 이용한 h1태그의 경우는 style에 display:none이 들어갔지만 v-if를 ..

vue.js 설치 및 적용

vue.js 설치 및 적용

2020.06.08

vue.js를 사용하기 위해서는 npm 방식과 cdn방식이 있는데 공부할때는 사실 cdn 방식이 편하다. vue.js를 사용하고자 하는 html에 스크립트를 추가해준다. 위와 같이 코드만 불러와주면 빠르게 적용이 가능하다. 그럼 아래와 같이 코드를 작성하여 vue를 정상적으로 불러왔는지 테스트해본다. {{ message }} 위와 같이 적은 후에 아래와 같이 출력되면 테스트는 완료 이후부터 차차 정리해야겠다.

최신
- 1
다음

정보

nm2 블로그의 첫 페이지로 이동

nm2

nm2의 첫 페이지로 이동

검색

메뉴

홈
태그
미디어로그
위치로그
방명록

카테고리

분류 전체보기 (240)

최근 글

인기 글

댓글

공지사항

아카이브

태그

나의 외부 링크

정보

nm2

nanggi

블로그 구독하기

구독하기
RSS 피드

방문자

전체 방문자
오늘
어제

티스토리

티스토리 홈
이 블로그 관리하기
글쓰기

Powered by Tistory / Kakao. © nanggi. Designed by Fraccino.

티스토리툴바