[Vue.js] 2. Vue 인스턴스 만들기

12453 단어 vue.jsvue.js

1.전체코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="me">{{content}}</div>
    <div id="me2">
      <span v-bind:title="message">
        내위에 마우스를 올리면 동적으로 바인딩 된 걸 볼 수 있어!
      </span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var can = new Vue({
        el: "#me",
        data: { content: "안녕!" },
      });
      var can2 = new Vue({
        el: "#me2",
        data: { message: "이것은" + Date() + "입니다." },
      });
    </script>
  </body>
</html>

2.html 요소 정의

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

해당 스크립트를 통해 Vue.js를 사용할 것임을 명시합니다.

<div id="me">{{content}}</div>
    <div id="me2">
      <span v-bind:title="message">
        내위에 마우스를 올리면 동적으로 바인딩 된 걸 볼 수 있어!
      </span>
    </div>

태그 옆 id와 {{ }} 안 내용을 주목하자.
v- 접두사는 "디렉티브"라고 하며 Vue에서 제공하는 특수 속성임을 나타낸다.
즉, 이 속성의 title요소는 message값으로 대체된다는 것이다.

3.Vue Code 작성

<script>
      var can = new Vue({
        el: "#me",
        data: { content: "안녕!" },
      });
      var can2 = new Vue({
        el: "#me2",
        data: { message: "이것은" + Date() + "입니다." },
      });
    </script>

주의: 해당 스크립트는 모든 html 요소가 렌더링 되고 난 이후 추가해야 합니다. 즉, 닫는 body태그 위에 붙여야 동작
-> 모든 html 태그가 DOM 형태로 구성된 후 Vue가 이를 처리할 수 있음

vue:el-input 입력 시 입력 형식 조작 제한
2. 문법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage