Vue는 콘텐츠 대신 템플릿 태그를 렌더링합니다.

iFunction

나는 vue를 배우려고 노력하고 있지만 아무것도 작동하지 않습니다. 이것은 내가 지금 시도한 다섯 번째 튜토리얼이며 내가 뭘 잘못하고 있는지 정말 모르겠습니다.

다음 코드를 렌더링 할 때 의도 한 콘텐츠가 아닌 템플릿 태그가 표시됩니다.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>Learning Vue.js</title>
  </head>
  
  <body>
    <div id="app">
      <input type="text" v-model="name" />
      <p>Hello {{ name }}</p>
    </div>

    <script>
      new Vue({
    el: '#app',
    data() {
      return {
        name: 'John'
      };
    }
      });
    
  </body>
</html>

누구든지 이것이 작동하지 않는 이유를 이해하도록 도와 주시겠습니까? 지난 한 달 동안이 문제가 발생했으며 해결책을 찾을 수 없습니다. Linux 컴퓨터에서 Firefox를 사용하고 있으며 동일한 문제로 Opera 및 Brave 브라우저에서도 사용해 보았으므로 내 코드라고 의심됩니다.

Yash Maheshwari

위의 코드 스 니펫에서는 스크립트 태그를 닫지 않았습니다. 태그를 닫은 후 코드 :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>Learning Vue.js</title>
  </head>
  
  <body>
    <div id="app">
      <input type="text" v-model="name" />
      <p>Hello {{ name }}</p>
    </div>

    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            name: 'John'
          };
        }
      });
    </script>
  </body>
</html>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Nodejs Express는 페이지를 렌더링하는 대신 서버 콘텐츠를 표시합니다.

분류에서Dev

백본 템플릿은 HTML 콘텐츠를 렌더링

분류에서Dev

React (Preact)는 콘텐츠를 두 번 렌더링합니다.

분류에서Dev

Wagtail / Django 블록이 사용자 지정 / 중첩 StructBlock 템플릿에서 콘텐츠를 제대로 렌더링하지 않습니다.

분류에서Dev

HTML 요소 내부의 콘텐츠를 렌더링하지 않는 Meteor 템플릿

분류에서Dev

애플리케이션 템플릿에 의해 렌더링되는 emberjs 템플릿으로 콘텐츠를 렌더링하려면 어떻게해야합니까?

분류에서Dev

wordpress 단축 코드는 대시 보드에서 콘텐츠를 렌더링합니다.

분류에서Dev

html5 템플릿 태그 : 콘텐츠 액세스를위한 대체

분류에서Dev

동일한 콘텐츠를 공유하는 다른 항목 템플릿 처리

분류에서Dev

콘텐츠를 렌더링하기 전에 Swig 템플릿에 출력 태그 표시

분류에서Dev

jQuery의 .prepend가 처음에 콘텐츠를 추가하는 대신 내 콘텐츠를 대체합니다.

분류에서Dev

블레이드 템플릿의 @include는 섹션의 나머지 콘텐츠를 재정의합니다.

분류에서Dev

가져온 스타일 시트를 사용자 지정 요소의 템플릿 태그 콘텐츠에 적용하는 방법은 무엇입니까?

분류에서Dev

Azure 알림 허브는 콘텐츠를 사용할 수있는 템플릿을 등록 할 수 없습니다.

분류에서Dev

Django의 클래스에서 템플릿에 콘텐츠를로드하는 데 문제가 있습니다.

분류에서Dev

Django : 렌더링하는 대신 Internet Explorer 다운로드 페이지 콘텐츠

분류에서Dev

새 템플릿없이 Ionic 탭에서 콘텐츠를 렌더링하는 방법, 부트 스트랩과 같이 탭만 전환하는 방법

분류에서Dev

Flask 관리자보기의 렌더링 템플릿은 HTML 기능 대신 텍스트를 인쇄합니다.

분류에서Dev

MDX 블로그는 Next JS에서`@ mdx-js / react`의`MDXProvider`를 사용하는 동안 렌더링하는 대신 마크 다운 콘텐츠 만 표시합니다.

분류에서Dev

콘텐츠 항목이없는 경우 Sitecore에서 템플릿을 렌더링하는 방법

분류에서Dev

React Redux는 템플릿에 대한 렌더링 기능이있는 컨테이너를 만듭니다.

분류에서Dev

콘텐츠 대신 콘텐츠의 래퍼를 반환하는 jQuery

분류에서Dev

Umbraco는 OnPublish에서 렌더링 된 콘텐츠를 가져옵니다.

분류에서Dev

Xcode의 템플릿에 콘텐츠가없는 이유는 무엇입니까?

분류에서Dev

대화 형 콘텐츠를 래핑하는 HTML5 태그?

분류에서Dev

jQuery는 div 콘텐츠를 대체합니다.

분류에서Dev

Wordpress 4.5.3 : 적용된 템플릿 파일로 콘텐츠를 얻습니까?

분류에서Dev

Jquery .each ()는 HTML 대신 [object HTMLUListElement]를 렌더링합니다.

분류에서Dev

Shadow DOM에서 <content> 태그의 콘텐츠를 렌더링하지 않는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    Nodejs Express는 페이지를 렌더링하는 대신 서버 콘텐츠를 표시합니다.

  2. 2

    백본 템플릿은 HTML 콘텐츠를 렌더링

  3. 3

    React (Preact)는 콘텐츠를 두 번 렌더링합니다.

  4. 4

    Wagtail / Django 블록이 사용자 지정 / 중첩 StructBlock 템플릿에서 콘텐츠를 제대로 렌더링하지 않습니다.

  5. 5

    HTML 요소 내부의 콘텐츠를 렌더링하지 않는 Meteor 템플릿

  6. 6

    애플리케이션 템플릿에 의해 렌더링되는 emberjs 템플릿으로 콘텐츠를 렌더링하려면 어떻게해야합니까?

  7. 7

    wordpress 단축 코드는 대시 보드에서 콘텐츠를 렌더링합니다.

  8. 8

    html5 템플릿 태그 : 콘텐츠 액세스를위한 대체

  9. 9

    동일한 콘텐츠를 공유하는 다른 항목 템플릿 처리

  10. 10

    콘텐츠를 렌더링하기 전에 Swig 템플릿에 출력 태그 표시

  11. 11

    jQuery의 .prepend가 처음에 콘텐츠를 추가하는 대신 내 콘텐츠를 대체합니다.

  12. 12

    블레이드 템플릿의 @include는 섹션의 나머지 콘텐츠를 재정의합니다.

  13. 13

    가져온 스타일 시트를 사용자 지정 요소의 템플릿 태그 콘텐츠에 적용하는 방법은 무엇입니까?

  14. 14

    Azure 알림 허브는 콘텐츠를 사용할 수있는 템플릿을 등록 할 수 없습니다.

  15. 15

    Django의 클래스에서 템플릿에 콘텐츠를로드하는 데 문제가 있습니다.

  16. 16

    Django : 렌더링하는 대신 Internet Explorer 다운로드 페이지 콘텐츠

  17. 17

    새 템플릿없이 Ionic 탭에서 콘텐츠를 렌더링하는 방법, 부트 스트랩과 같이 탭만 전환하는 방법

  18. 18

    Flask 관리자보기의 렌더링 템플릿은 HTML 기능 대신 텍스트를 인쇄합니다.

  19. 19

    MDX 블로그는 Next JS에서`@ mdx-js / react`의`MDXProvider`를 사용하는 동안 렌더링하는 대신 마크 다운 콘텐츠 만 표시합니다.

  20. 20

    콘텐츠 항목이없는 경우 Sitecore에서 템플릿을 렌더링하는 방법

  21. 21

    React Redux는 템플릿에 대한 렌더링 기능이있는 컨테이너를 만듭니다.

  22. 22

    콘텐츠 대신 콘텐츠의 래퍼를 반환하는 jQuery

  23. 23

    Umbraco는 OnPublish에서 렌더링 된 콘텐츠를 가져옵니다.

  24. 24

    Xcode의 템플릿에 콘텐츠가없는 이유는 무엇입니까?

  25. 25

    대화 형 콘텐츠를 래핑하는 HTML5 태그?

  26. 26

    jQuery는 div 콘텐츠를 대체합니다.

  27. 27

    Wordpress 4.5.3 : 적용된 템플릿 파일로 콘텐츠를 얻습니까?

  28. 28

    Jquery .each ()는 HTML 대신 [object HTMLUListElement]를 렌더링합니다.

  29. 29

    Shadow DOM에서 <content> 태그의 콘텐츠를 렌더링하지 않는 방법은 무엇입니까?

뜨겁다태그

보관