HTML 페이지에서 Vue를 인스턴스화하는 방법-프런트엔드 Q&A-php.cn

HTML 페이지에서 Vue를 인스턴스화하는 방법

PHPz

풀어 주다： 2023-04-26 16:18:24

원래의

799명이 탐색했습니다.

Vue는 동적 웹 애플리케이션을 만드는 데 널리 사용되는 JavaScript 프레임워크입니다. Vue에는 기존 HTML 페이지에 쉽게 삽입할 수 있는 배우기 쉽고 사용하기 쉬운 API가 있습니다. 이 기사에서는 HTML 페이지에서 Vue를 인스턴스화하는 방법에 중점을 둘 것입니다.

Vue.js는 HTML 페이지에 쉽게 삽입할 수 있는 경량 JavaScript 프레임워크입니다. Vue를 인스턴스화하려면 다음과 같이 Vue 인스턴스를 정의해야 합니다.

new Vue({
  // options
})

로그인 후 복사

여기서는 옵션 개체를 전달하여 Vue를 인스턴스화합니다. 옵션 객체에는 Vue 애플리케이션에 대한 다양한 설정과 구성이 포함되어 있습니다.

Vue를 HTML 페이지에 포함하려면 Vue.js 파일을 다운로드하여 HTML 문서에 포함하세요. CDN(콘텐츠 전송 네트워크)을 사용하거나 Vue.js 라이브러리를 다운로드하여 서버에 저장할 수 있습니다. 다음은 Vue를 포함하기 위해 CDN을 사용하는 예입니다:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Vue Example</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    });
  </script>
</body>
</html>

로그인 후 복사

위의 예에서는 Vue.js CDN을 사용하여 HTML 문서에 Vue를 포함하고 있습니다. 그런 다음 ID가 "app"인 HTML 요소를 정의하고 Vue 인스턴스를 요소에 연결한 다음 Vue 인스턴스의 데이터 옵션에 "message"라는 속성을 정의합니다.

Vue 인스턴스의 "el" 옵션에서 Vue 애플리케이션을 ID가 "app"인 HTML 요소에 연결하고 싶다고 Vue에 알립니다. 이런 방식으로 Vue는 HTML 페이지에서 요소를 찾아 Vue 템플릿 엔진을 사용하여 렌더링합니다.

Vue 인스턴스의 데이터 옵션에서 "message"라는 속성을 정의하고 초기 값을 "Hello Vue!"로 설정합니다. 이중 괄호 구문({{ message }})을 사용하면 HTML 문서에 속성을 삽입할 수 있습니다.

이러한 간단한 단계를 통해 Vue를 인스턴스화하고 HTML 페이지에 포함할 수 있습니다. Vue의 사용 용이성과 유연성은 대화형 웹 애플리케이션을 만드는 데 탁월한 선택입니다.

위 내용은 HTML 페이지에서 Vue를 인스턴스화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!