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

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

(165개의 수강평)

1064명의 수강생
HandHand 프로필

안녕하세요 v-model과 v-bind와 관련하여 문의드립니다 HandHand 5일 전

초보적인 질문일 수 있음을 양해 부탁드립니다 ㅠㅠ

이번 강의에서 데이터 바인딩에 사용된 v-model과 v-bind에는 

v-bind :  컴포넌트의 data 값과 html 속성 혹은 props시 사용

v-model : form 태그 사용시 양방향? 연결을 통해 동기화 시킴

이렇게 이해하면 되는 것인가요??

추가적으로 v-model의 경우 form 태그에만 사용할 수 있는 것인지도 궁금합니다

1
SSING 9 프로필

컴포넌트 통신 방법 - 기본 에서 실습문제에 대해 질문 드립니다. SSING 9 8일 전

컴포넌트 통신 방법 - 기본 -> event emit 실습문제 '버튼 클릭시 data num 1증가' 문제를 고민고민 하다가

<div id="app">
      <app-content v-on:add="addNum" v-bind:propsNum="num"></app-content>
   </div>

   <script>
      var appContent = {
         template: '<button v-on:click="numEvent">add</button>',
         props: ['propsNum'],
         methods: {
            numEvent: function(){
               this.$emit('add');
            }
         }
      }
      new Vue({
         el: '#app',
         components: {
            'app-content': appContent
         },
         methods: {
            addNum: function(){
               this.num++;
            }
         },
         data: {
            num: 10
         }
      });
   </script>

위의 코드와 같이 앞서 배운 props를 떠올려서 위와 같이 만들었습니다.

근데 실습 문제 풀이영상을 보니 너무 돌아가서 생각 했던 것 같더라구요...

잘 돌아가긴 하던데 문법적으로 중복이라던지 문제가 있는지 이런 식으로 코드를 작성해도 되는건가요? 

1
삼촌축구단 프로필

수업내용 삼촌축구단 10일 전

안녕하세요. 혹시 강의 들으면서 설명을 너무 잘해주신 부분에 대해서 해당 내용을 개인블로그에 공부 정리목적으로 화면 캡처해서 사용 가능한가요?(물론 참고 출처는 남깁니다!)

2
m_crew 프로필

passNum: () => { m_crew 13일 전

위 제목처럼 passNum: function() {} 이 아닌
es6  arrow functions 를 사용하면 

vue.js:1897 TypeError: this.$emit is not a function

에러가 나오는데 왜 그런지 알려주시면 감사하겠습니다

1
P mw 프로필

vue+spring P mw 15일 전

강의내용과 관련이 없을 수 도 있는데요 ㅠ spring 과 vue를 사용하려고 하는데 그런부분은 초급,중급,완벽에서 어느부분을 봐야하나요? 

1
서은영 프로필

live server에서 실행시 화면이 안떠요 서은영 17일 전

html 파일 실행시 이런식으로 뜨고 화면이 안나오는데 왜그런 걸까요..ㅠ

1
keshoho 프로필

vue create vue-form 에러 keshoho 1달 전

PS C:\vue-cli> vue create vue-form

vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\User 

s\Duksoo\AppData\Roaming\npm\vue.ps1 파일을 로드할 수 없  

습니다. 자세한 내용은 about_Execution_Policies(https://go 

.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.     

위치 줄:1 문자:1

+ vue create vue-form

+ ~~~

    + CategoryInfo          : 보안 오류: (:) [], PSSecuri 

tyE    xception

OS는 윈10입니다. 권한 관련 에러인 듯한데 어떻게 해야하나요?

2
ksb304 프로필

console.log 사용시 컴파일 에러 발생합니다... ksb304 1달 전

아래와 같이 오류가 나면서 동작 안하는데 console.log를 사용 못하나요?

3
이동명 프로필

App.vue 이동명 1달 전

안녕하세요 강의 정말 재밌게 듣고 있습니다.!!  크롭 뷰 개발자도구에서 Root이하의 App.vue가 저는 <App>이 아닌 <Anonymous Component>로 되어있는데 왜 그런건지 알수 있을까요??

1
FireChilde 프로필

질문드려요! FireChilde 1달 전

cli 부분 보고 있는데

data: function() 

이런식으로 쓰시더라구요

그런데 자동완성 기능을 쓰니까

data() 로 자동완성이 되는데 이 방법도 괜찮은건가요?

1
keshoho 프로필

cli설치 에러가 발생하고 cli프로젝트 생성이 안됩니다. keshoho 1달 전

설치 에러

learn-vue-js-master> npm install -g @vue/cli

npm WARN deprecated core-js@2.6.10: core-js@<3.0 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

npm WARN deprecated fsevents@1.2.9: One of your dependencies needs to upgrade to fsevents v2: 1) Proper nodejs v10+ support 2) No more fetching binaries from AWS, smaller package size

프로젝트 생성시 에러

vue\learn-vue-js-master> vue create vue-cli

vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users 

\Duksoo\AppData\Roaming\npm\vue.ps1 파일을 로드할 수 없습  

니다. 자세한 내용은 about_Execution_Policies(https://go.mi 

crosoft.com/fwlink/?LinkID=135170)를 참조하십시오.

위치 줄:1 문자:1

+ vue create vue-cli

+ ~~~

    + CategoryInfo          : 보안 오류: (:) [], PSSecurit 

yEx    ception

    + FullyQualifiedErrorId : UnauthorizedAccess

4
P mw 프로필

live server P mw 1달 전

open live server로 동작하게 한다음 ip주소가 다르다고 나와서 주소창에 제가 직접 ip를 쳐서 바꿨는데 혹시 처음ip주소 설정하는 방법있나요?

2
junho kim 프로필

크롬 화면이 안바껴요 junho kim 1달 전

App.vue 를 바꾸고 http://localhost:8080/  을 크롬에서 확인했는데 화면 새로고침을 해도 화면이 바뀌지가 않아요...

1
parkht 프로필

console.log() 에러 parkht 2달 전

메소드 안에 console.log() 를 사용하면 terminal에서 에러가 발생하는 데 원인을 모르겠어서 질문드립니다.

1
parkht 프로필

비동기적으로 데이터를 가져온 값 통신으로 보내기 parkht 2달 전

안녕하세요. 비동기 통신과 관련하여 질문이 있어 글을 남기게 되었습니다.

Promise 객체를 공부하면서 활용 목적으로 해당 코드를 짜보았는데요.

만들고자 한것은 app-content에서 비동기 통신으로 객체를 받아온 후, same level component에게 message 객체를 보내려고 한 것입니다.

코드를 실행해본 결과 app-content 컴포넌트를 통해 this.message에 값이 담긴것을 확인했는데요.

passMessage 이벤트로 this.message를 찍어보면 ''로 찍힙니다.

비동기 통신을 제대로 활용하지 못해 값이 안담긴 건지요?

그리고 getMesssage().then( this.$emit('pass',this.message); ) 를 해보니까 이벤트 발생이 안된다고 뜨더라구요.

2가지 해결책 부탁드립니다.

항상 좋은 강의 감사합니다!!

1
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스