Vue.js 시작하기 - Age of Vue.js

(59개의 수강평)
461명의 수강생

33,000원

장기효(캡틴판교)

입문

수료증

68개 수업, 총 5시간 25분

위시리스트 추가

장기효(캡틴판교)의 다른 강좌들

django랑 vue의 연동 가능성 및 조언이나 더 효율적인 백엔드가 있는지? anstls9614 7일 전

강의 잘 들었습니다.

궁금한 점이 생겼는데,

vuecli를 사용하다 보니

여러가지 모듈들이 같이 설치 되는 것 같던데,

이것들을 다 가져가서 django랑 연동 하는지 의문이네요.. 아니면

vuecli를 쓰지않고 그냥 vue.js cdn 파일만 가져가는지..

아직 모르겠네요. 현재는 조그만한 풀스택 개발이 목표거든요.

백엔드를 django로 생각하고 있거든요.

django 템플레이트에서 변수를 불러 올 때에도 수염괄호쓰는데 방법은 있는걸로 알고 있는데, django랑 vue 같이 사용하면 좋은지..

두서없이 말씀드렸는데, 정리하겠습니다.

1. 첫번째로 django랑 vue랑 같이 사용하면 좋은가 궁금합니다.

- 템플릿에서 수염괄호가 django에서 사용 되고 있어서..

2. 소규모의 개발에서 캡틴판교강사님의 생각에

vue에 잘 어울리는 백엔드는 무엇인지도 궁금합니다.

3. 만약에 django를 연동한다고 하면, vuecli를 연동하는지 아니면,

cdn에서 vue.js를 가져와서 연동하는지?

컴포넌트 질문이 있습니다 ㅎㅎ SeJin Kang 9일 전

안녕하세요.

현재 어느정도 진행이 되어진 파이썬 + 장고 프로젝트에적용하려 합니다.

장고 프레임워크라서 .vue 파일을 이용한 순수 뷰 프로젝트 구조를 사용을 못하고 있습니다. (혹은 방법을 아직 모르겠네요) 그래서 현재 .js 파일로 vue를 작성 중에 있는데요.

기존 완성된 하나의 웹 페이지인 HTML 파일에 html 코드로 작성된 header, body, footer들을 vue 컴포넌트 별로 분류를 하려 합니다.

그래서 최상위(?) 뷰 인스턴스 하나에 components 들을 각각 app-header, app-content, app-footer 들로 등록을 해주려는데요.

.js 파일에 각 component를 선언한 객체에 template에다가 그 긴 HTML 코드들을 javscript 언어로 작성해서 제어해 주는 방법 밖에 없을까요~?

ex)

let appHeader = {

template: '<div id="header">header</div>',

props: ['propsdata']

};

let appFooter = {

template: '<div id="footer">footer</div>'

props: ['propsdata']

};

let app = new Vue({

el: '#app',

components: {

'app-header': appHeader,

'app-footer': appFooter

}

});

위 예시에 appHeader, appFooter 의 template 는 짧지만 현재 제 프로젝트에는

HTML 코드로 작성된 header와 footer 는 이미 수 많은

element 들로 작성된 코드가 있는데요. 그걸 .js 파일안에 있는 appHeader, appFooter 객체에 있는 template 에다가 javascript 코드로 적는 방법 밖에 없는지 해서요..

혹시나 다른 방법이 없을까요!?

scf shhan730@gmail.com 9일 전

scf관련 문의드립니다!

파일 저장후에 vetur또한 잘 설정되어있는것을 확인하였는데도

scf자동완성이 작동하지 않습니다.

이 부분 확인 부탁드립니다!

안녕하세요 강사님 질문이 있습니다. console.log가 출력되지 않아서요 terecal 12일 전

안녕하세요 강사님 질문이 있습니다. console.log가 출력되지 않아서요

실습 도중 아래의 코드에서 접근값이 출력은 되는데 console.log("접근")은 출력이 안되요 이유가 무엇일까요?

```

    <script>
        var div = document.querySelector('#app');       
        
    var o = {};     
    var bValue = 38;    
    
        
    Object.defineProperty(o, 'b', {

        get: function() {
            console.log("접근");
            
            return bValue;
        },
        set(newValue) { bValue = newValue; },
        enumerable: true,
        configurable: true
    });     
        
    </script>
```
 