VueJS-소개

Vue사용자 인터페이스를 구축하기위한 JavaScript 프레임 워크입니다. 핵심 부분은 주로 뷰 레이어에 초점을 맞추고 있으며 이해하기 매우 쉽습니다. 이 튜토리얼에서 사용할 Vue 버전은 2.0입니다.

Vue는 기본적으로 프론트 엔드 개발 용으로 구축되었으므로 다음 장에서 많은 HTML, JavaScript 및 CSS 파일을 다룰 것입니다. 세부 사항을 이해하기 위해 간단한 예부터 시작하겠습니다.

이 예에서는 vuejs의 개발 버전을 사용합니다.

예

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "intro" style = "text-align:center;">
         <h1>{{ message }}</h1>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
            data: {
               message: 'My first VueJS Task'
            }
         });
      </script>
   </body>
</html>

산출

이것은 VueJS를 사용하여 만든 첫 번째 앱입니다. 위 코드에서 볼 수 있듯이 .html 파일의 시작 부분에 vue.js를 포함했습니다.

<script type = "text/javascript" src = "js/vue.js"></script>

인쇄하는 본문에 추가되는 div가 있습니다. “My first VueJS Task” 브라우저에서.

<div id = "intro" style = "text-align:center;">
   <h1>{{ message }}</h1>
</div>

또한 보간에 메시지를 추가했습니다. {{}}. 이것은 VueJS와 상호 작용하고 브라우저에서 데이터를 인쇄합니다. DOM에서 메시지 값을 얻기 위해 다음과 같이 vuejs의 인스턴스를 생성합니다.

var vue_det = new Vue({
   el: '#intro',
   data: {
      message: 'My first VueJS Task'
   }
})

위의 코드 스 니펫에서 우리는 DOM 요소의 ID (e1 : '# intro')를 취하는 Vue 인스턴스를 호출하고 있는데, 이는 div의 ID입니다. 값이 할당 된 메시지가있는 데이터가 있습니다.‘My first VueJS Task’. VueJS는 DOM과 상호 작용하고 DOM {{message}}의 값을 다음과 같이 변경합니다.’My first VueJS Task’.

콘솔에서 메시지 값을 변경하면 브라우저에도 동일하게 반영됩니다. 예를 들면-