VueJS-템플릿

이전 장에서 화면에 텍스트 콘텐츠 형식으로 출력을 얻는 방법을 배웠습니다. 이 장에서는 화면에 HTML 템플릿 형식으로 출력을 얻는 방법을 배웁니다.

이를 이해하기 위해 예제를 고려하고 브라우저에서 출력을 보겠습니다.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div>{{htmlcontent}}</div>
      </div>
      <script type = "text/javascript" src = "js/vue_template.js"></script>
   </body>
</html>

vue_template.js

var vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>"
   }
})

이제 페이지에 html 콘텐츠를 표시한다고 가정합니다. 만약 우리가 그것을 보간과 함께 사용한다면, 즉 이중 중괄호와 함께 사용한다면, 이것이 우리가 브라우저에서 얻게 될 것입니다.

htmlcontent 변수에 주어진 것과 같은 방식으로 html 내용이 표시되는 것을 본다면 이것은 우리가 원하는 것이 아니라 브라우저의 적절한 HTML 내용에 표시되기를 원합니다.

이를 위해 우리는 v-html지령. v-html 지시문을 html 요소에 할당하는 순간 VueJS는이를 HTML 콘텐츠로 출력해야한다는 것을 알고 있습니다. v-html 지시문을.html 파일을 작성하고 차이점을 확인하십시오.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div v-html = "htmlcontent"></div>
      </div>
      <script type = "text/javascript" src = "js/vue_template.js"></script>
   </body>
</html>

이제 HTML 콘텐츠를 표시하기 위해 이중 중괄호가 필요하지 않습니다. 대신에 htmlcontent가 내부에 정의 된 v-html =”htmlcontent”를 사용했습니다. js 다음과 같이 파일-

var vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>"
   }
})

브라우저의 출력은 다음과 같습니다.

브라우저를 살펴보면 콘텐츠가 다음 페이지에 정의 된 것과 같은 방식으로 추가되는 것을 볼 수 있습니다. .js 변수에 파일 htmlcontent : "<div><h1>Vue Js Template</h1></div>".

브라우저에서 inspect 요소를 살펴 보겠습니다.

DOM에 HTML 템플릿을 추가하는 방법을 살펴 보았습니다. 이제 기존 HTML 요소에 속성을 추가하는 방법을 살펴 보겠습니다.

HTML 파일에 이미지 태그가 있고 Vue의 일부인 src를 할당하려고합니다.

예

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div v-html = "htmlcontent"></div>
         <img src = "" width = "300" height = "250" />
      </div>
      <script type = "text/javascript" src = "js/vue_template1.js"></script>
   </body>
</html>

위의 img 태그를 보면 src가 비어 있습니다. vue js에서 src를 추가해야합니다. 그 방법을 살펴 보겠습니다. 데이터 객체에 img src를 저장합니다..js 다음과 같이 파일-

var vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>",
      imgsrc : "images/img.jpg"
   }
})

다음과 같이 src를 할당하면 브라우저의 출력은 다음 스크린 샷과 같습니다.

<img src = "{{imgsrc}}" width = "300" height = "250" />

우리는 깨진 이미지를 얻습니다. HMTL 태그에 속성을 할당하려면 다음을 사용해야합니다.v-bind지령. v-bind 지시문을 사용하여 이미지에 src를 추가해 보겠습니다.

이것이 할당되는 방법입니다. .html 파일.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div v-html = "htmlcontent"></div>
         <img v-bind:src = "imgsrc" width = "300" height = "250" />
      </div>
      <script type = "text/javascript" src = "js/vue_template1.js"></script>
   </body>
</html>

src 접두사를 v-bind:src = ”imgsrc” src가있는 변수의 이름.

다음은 브라우저의 출력입니다.