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コンテンツとして出力する必要があることを認識します。 l ファイルにv-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コンテンツを表示するために二重中括弧を必要とせず、代わりにv-html =” htmlcontent”を使用しました。ここで、htmlcontentは次のように js ファイル内で定義されます-

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

ブラウザでの出力は次のとおりです-

HTMLContent

ブラウザーを調べると、コンテンツが .js ファイルで定義されているのと同じ方法で変数* htmlcontentに追加されていることがわかります： "<div> <h1> Vue Js Template </h1> </div> "*。

ブラウザの検査要素を見てみましょう。

テンプレート

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を追加する必要があります。その方法を見てみましょう。次のように、*。js *ファイルのデータオブジェクトにimg srcを保存します-

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

Imgsrc

壊れた画像を取得します。 HMTLタグに属性を割り当てるには、 v-bind ディレクティブを使用する必要があります。 v-bindディレクティブを使用して、srcを画像に追加しましょう。

これは、 l ファイルでの割り当て方法です。

<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を付ける必要があります。

以下はブラウザの出力です。

Img Display

v-bindでsrcがどのように見えるかを調べて確認しましょう。

検査

上のスクリーンショットに見られるように、srcはvuejsプロパティなしで割り当てられます。

Vuejs-template

VueJS-テンプレート

vue_template.js

例