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コンテンツを表示するために二重中括弧は必要ありません。代わりに、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>"
   }
})

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

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

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

HTMLテンプレートをDOMに追加する方法を見てきました。次に、既存の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は空白です。vuejsからsrcを追加する必要があります。それを行う方法を見てみましょう。imgsrcをデータオブジェクトに保存します。.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を使用した変数の名前。

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