Vuejs Hello World Wont Render

Cloud 9 개발 환경에서 Vuejs hello world를 실행하려고합니다. 너무 단순하지만 아직 오류가 없는데도 렌더링이 안되는 이유를 알 수 없습니다. 여기서 내가 뭘 잘못하고 있니?Vuejs Hello World Wont Render

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript" src="https://unpkg.com/[email protected]"></script> 
     <script type="text/javascript"> 
      new Vue({ 
       el: '#app' 
       data: { 
        message: 'Hello World!' 
       } 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="app">{{ message }}</div> 
    </body> 
</html>

출처

2017-03-13 rustyocean

본문 맨 아래로 스크립트를 이동하십시오. – Bert

오류가 없다는 것을 무엇을 의미합니까? 콘솔에 "SyntaxError : Unexpected identifier"가 표시되고 8 행을 가리 킵니다. – JJJ

스크립트는 body의 하단에 나타납니다. head 요소에 포함 시키면 이 실행되고#app이 렌더링되기 전에 아무 것도 실행되지 않습니다.

또한, 당신은 el: "#app" 후 쉼표,

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="https://unpkg.com/[email protected]"></script> 
</head> 
<body> 
    <div id="app">{{ message }}</div> 
    <script type="text/javascript"> 
     new Vue({ 
      el: '#app', 
      data: { 
       message: 'Hello World!' 
      } 
     }); 
    </script> 
</body>

사실

출처

2017-03-13 18:09:54 Bert

해결했습니다! 감사합니다 – rustyocean

@rustyocean 아무런 문제가 없습니다. – Bert

을 놓친, 당신은 하단에 기록 된 파일을 넣어하지 않았고 엘과 데이터 사이에 쉼표 (,)를 포기하지 않았다 그것이 스크립트가 결과를 보여주지 않는 이유입니다. 이제 끝났 으면 좋겠어.

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> 
    </head> 
    <body> 
     <div id="app">{{ message }}</div> 
    </body> 
    <script type="text/javascript"> 
     new Vue({ 
     el: '#app', 
     data: { 
      message: 'Hello World!' 
      } 
     }); 
    </script> 
</html>

출처

2017-03-13 18:17:18

몸 바깥 쪽 스크립트 블록에 대해 까다 롭지 않은 한 왜 누군가가 당신을 왜곡 시켰는지 모르겠습니다. 당신이 올바른지. – Bert

@BertEvans 그의 대답은 당신의 복사 + 붙여 넣기입니다. – Romoku

@Romoku 그가 방금 같은 대답을 내놓았을 때의 차이점이 있습니다. 나랑 잘 지내. – Bert

Vuejs Hello World Wont Render

답변

관련 문제