vue 작성순서

django와 vue.js의 흐름차이에 대해 가볍게 작성하자면

 

django & vue.js 코드 작성순서

• django
  • "데이터의 흐름"
  • url -> views -> template
• vue.js
  • "data가 변화하면 dom이 변경"
  1. data 로직 작성
  2. dom 작성

vue 작성순서

1. vue 공식문서 들어가서 cdn을 가져와서 붙여넣기

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. html문서에 아이디 선언 (vue에서 view를 할당)

<h2>선언적 렌더링</h2>
  <div id="app">

  </div>

3. script내에 vue 작성(vue 에서 view model을 할당)

const app = new Vue({
      el : '#app',  //element의 약자인 el임
    // data 부분이 vue에서 model을 할당함
      data: {
        message: '안녕하세요 Vue!',
      }
    })

4. html에 변수를 넣어줌

<h2>선언적 렌더링</h2>
  <div id="app">
    {{ message }}  // data내의 message라는 키를 자동으로 할당 해줌
  </div>

참고

vue에서 사용하는 몇가지 메서드

1. v-if // 조건문(true일시 실행)
2. v-on //vue에 이벤트 부여
3. v-for // 반복문
4. v-model="message" //message와 동기화 시켜줌 예시를 보면 메세지 뒤집는것도 함께 됨!