VueJS - szablon

W poprzednich rozdziałach dowiedzieliśmy się, jak uzyskać wynik w postaci treści tekstowej na ekranie. W tym rozdziale dowiemy się, jak uzyskać na ekranie wynik w postaci szablonu HTML.

Aby to zrozumieć, rozważmy przykład i zobaczmy wynik w przeglądarce.

<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>"
   }
})

Teraz załóżmy, że chcemy wyświetlić zawartość HTML na stronie. Jeśli zdarzy się, że użyjemy go z interpolacją, czyli z podwójnymi nawiasami klamrowymi, to właśnie otrzymamy w przeglądarce.

Jeśli widzimy, że treść html jest wyświetlana w taki sam sposób, jak podaliśmy w zmiennej htmlcontent, to nie jest to, czego chcemy, chcemy, aby była wyświetlana w odpowiedniej treści HTML w przeglądarce.

Do tego będziemy musieli użyć v-htmldyrektywa. W momencie, gdy przypisujemy dyrektywę v-html do elementu html, VueJS wie, że musi wyprowadzić ją jako treść HTML. Dodajmy dyrektywę v-html w.html plik i zobacz różnicę.

<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>

Teraz nie potrzebujemy podwójnych nawiasów klamrowych, aby wyświetlić zawartość HTML, zamiast tego użyliśmy v-html = ”htmlcontent”, gdzie htmlcontent jest zdefiniowana wewnątrz js plik w następujący sposób -

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

Dane wyjściowe w przeglądarce są następujące -

Jeśli sprawdzimy przeglądarkę, zobaczymy, że treść jest dodawana w taki sam sposób, jak jest zdefiniowana w .js plik do zmiennej htmlcontent : "<div><h1>Vue Js Template</h1></div>".

Przyjrzyjmy się elementowi inspect w przeglądarce.

Widzieliśmy, jak dodać szablon HTML do DOM. Teraz zobaczymy, jak dodać atrybuty do wychodzących elementów HTML.

Weź pod uwagę, że mamy tag obrazu w pliku HTML i chcemy przypisać src, który jest częścią Vue.

Przykład

<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>

Spójrz na powyższy tag img, src jest pusty. Musimy dodać do niego src z vue js. Przyjrzyjmy się, jak to zrobić. Będziemy przechowywać img src w obiekcie danych w pliku.js plik w następujący sposób -

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

Jeśli przypiszemy src w następujący sposób, dane wyjściowe w przeglądarce będą wyglądać tak, jak pokazano na poniższym zrzucie ekranu.

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

Otrzymujemy uszkodzony obraz. Aby przypisać dowolny atrybut do tagu HMTL, musimy użyćv-binddyrektywa. Dodajmy src do obrazu z dyrektywą v-bind.

W ten sposób jest przypisywany .html plik.

<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>

Musimy poprzedzić src ciągiem v-bind:src = ”imgsrc” i nazwę zmiennej z src.

Poniżej przedstawiono dane wyjściowe w przeglądarce.