티스토리

얌얌 스파게티

검색하기

블로그 홈

얌얌 스파게티

yamyam-spaghetti.tistory.com/m

스파게티 코드라도 작성하고보자❗️

구독자: 1

방명록 방문하기

주요 글 목록

[VueJS] Vuex Vuex란? Vuex는 Vue.js 응용 프로그램을 위한 상태 관리 패턴 + 라이브러리이다. Vue 어플리케이션의 모든 구성 요소에 대한 중앙 집중식 저장소의 역할을 하며, 상태가 예측 가능한 방식으로만 변형될 수 있도록 보장하는 규칙을 가지고 있다. Vuex를 왜 사용하는가? Vue는 컴포넌트 사이에 단방향 통신만을 지원하기 때문이다. Vuex를 꼭 사용할 필요는 없다. 오히려 한두군데서밖에 사용하지 않는 state를 꾸역꾸역 store에 저장하는 것이 더 안 좋을 수도 있음. Vuex의 중심 컨셉 (state, getters, mutations, actions) Vue Component에서 변화가 일어난다면 dispatch 함수를 통해 Actions에 저장된 메소드를 호출한다. Actions의 메소드.. 공감수 0 댓글수 0 2022. 5. 17.
[VueJS] Mustache 보간법, 디렉티브(Directives) 텍스트 보간 Mustache 구문을 사용한 텍스트 보간. {{msg}} * Mustache 구문은 데이터를 일반 텍스트로 해석하기 때문에 만약 HTML로 출력하고 싶다면 v-html 디렉티브를 사용해야 한다. 여기에 msg가 출력된다 여기에 msg가 출력된다 Vue.js는 모든 데이터 바인딩 내에서 자바스크립트 표현식의 모든 기능을 지원한다. 가능 불가능 {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} {{ var a=1 }} {{ if(ok) {return 'YES'} }} (조건문은 작동하지 않음) 디렉티브 디렉티브는 v-접두사가 있는 특수 속성이다. 디렉티브 속성 값은 단일 자바스크립트 표현식이 된.. 공감수 0 댓글수 0 2022. 5. 16.
[VueJS] Vue Instance Vue Instance 생성 속성 속성 설명 el Vue가 적용될 요소 지정. CSS Selector or HTML Element data Vue에서 사용되는 정보 저장. 객체 또는 함수의 형태. (함수 형태를 더 권장함) emplate 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함꼐 화면에 그릴 수 있다. methods 화면 로직 제어와 관계된 method를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가. created 뷰 인스턴스가 생성되자 마자 실행할 로직을 정의. Vue Instance 유효범위 Vuew Instance를 생성하면 HTML의 특정 범위(el) 안에서만 옵션 속성들이 적.. 공감수 0 댓글수 0 2022. 5. 16.
[VueJS] Vue.js 기본 Vue.js란? 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 Progressive Framework. 특징 Approachable (접근성) Versatile (유연성) Performant (고성능) MVVM Pattern Model(자바스크립트 객체) + View(웹페이지의 DOM) + ViewModel(Vue) 기존에는 자바스크립트로 view(DOM)에 접근하거나 수정하기 위해 jQuery와 같은 라이브러리를 이용하였다. 예시 텍스트 클릭 $('button').click(function () { $('#p1').text('대체 텍스트'); }); Vue는 view와 Model을 연결하고 자동으로 바인딩하여 양방향 통신을 가능하게 하였다. {{msg}} 클릭 new Vue({ el: "#app".. 공감수 0 댓글수 0 2022. 5. 3.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.