vue.js 간단하게 시작 해보았다. #1

아쉽게도 관리자 페이지라 스크린샷이 불가능하여, 제 블로그로 대체해서 (..) 해보도록 하겠습니다.

우선 배경은 다음과 같습니다.

위 이미지에 표시된 div#mArticle 에만 적용한다 가정하겠습니다.

우선 https://vuejs.org/v2/guide/installation.html 가서 설치 가이드를 따릅니다.

그것도 귀찮으신가요? 써 드리죠!

<script type="text/javascript" src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script>

* 2.4.2기준입니다, 최신버전은 다를수있음.

네 vuejs 준비는 끝났습니다!

짝짝

이 다음에 js 파일을 하나 만들어서 하나더 로드시키거나 바로 <script></script> 에서 써봅시다.

new Vue({

  el: '#mArticle', // -- element ID

  data: { // -- 내부 저장소

    message: 'world limelight world!'

  },

  methods: { // 메소드들

  click: function() {

  alert("그건 끝났어");

  }

  }

});

그리고 HTML DOM쪽에는 {{ }} 로 써줍니다.

단, jinja경우 {{ }} 를 이미 쓰고있으니 {{ '{{ }}' }} 을 써야됩니다. 아님 다른걸로 바꾸던가.. 해야됩니다

그리고.. 브라우저로 들어가면!

짠! 해당 div#mArticle 에만 vuejs 가 적용 되었습니다.

- 가 제일 간단하게 쓰는 방법입니다. v-for, v-if 등 어느정도는 한글화가 되어있으니 참고해보시는것도 좋은 방법입니다. https://kr.vuejs.org/

사실 관리자 페이지라고 해봤자 목록 표시가 많은데, jquery는 제가 일일이 html append했어야되는데 vuejs 에서는 html 쪽에서 구조를 만들고

javascript 쪽에서는 array만 관리해주면 됩니다! 저는 이렇게 썼습니다.

resource 을 제가 관리하는 array로 생각하고

v-for(#link) 을 이용하여 div을 돌려봅시다.

알아서 그려줍니다.

만약 jquery 썼을때는 열심히 DOM을 js에 쑤셔(..) 박고 있었겟죠. 편하게 잘쓰고있습니다. 

물론 이 부분은 vuejs의 초반의 초반 초반!!입니다 활용하면  이보다 기능 많습니다. 

왜  이런글을 쓸려고 했는가?

편해서요...

- html&dom + jquery 노다가를 그만두세요! 제발!

- 간단하고 심플하게 시작할수 있을것 같아서

- 비 개발자인 저도 합니다!

Q) 그럼 저는 여러 div을 해야되는데 어떻게 해야되나요?

A) 그냥 2개 해주면됩니다 (..)

element Id만 안겹치면.. new vue 하면서 알아서 잡아냅니다

Q) 브라우저에서 바로 접근가능한가요?

A) 네, var/let 써서 지정해주세요.

됨.