【Vue.js】基本的なコンポーネントtemplateの書き方と注意点

今回はVue.jsのtemplateの基本的な書き方と注意点を紹介していきたいと思います。

templateを使うことでhtmlなどの描画をすることが可能です。

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

templateの基本的な書き方

templateの基本的な書き方は下記になります。

他にも書き方はありますがとりあえず基本の書き方を覚えておきましょう。

html

<div id="app">
        <temp-cont></temp-cont>
</div>

js

Vue.component('temp-cont', {
  template: '<p>テキスト</p>'
})

templateの書き方の注意点

それではtemplateの書き方の注意点を2つほど挙げておきたいと思います。

Vue.jsをはじめたばかりだと思わぬエラーとかが起きてしまうことがあると思います。

template内での改行したい

template内での改行するとエラーが起こる

templateの内容が長くなる場合に改行させたいこともあると思います。

ですがシングルクオテーションで囲まれている場合、改行してしまうエラーが起こりうまく動作しなくなってしまいます。

改行したい場合は`(バッククォート)を使用するようにしましょう。

Vue.component('temp-cont', {
  template: '
<p>テキスト1</p>

',
})

templateに複数のタグを入れたい

templateに複数のタグを入れるとエラーが起こる

templateに複数のタグを入れる場合には少しルールがあります。ルールどおりに入れないとエラーが起こりうまく表示されなかったりします。

たとえばpタグを二つ入れた場合、1つのルート要素になっていないためエラーが起こります。

1つのルート要素にするためには2つのpタグをを囲む親タグが必要になります。

※Vue jsの古いバージョンで上記のようなエラーが起こるようです。

Vue.component('temp-cont', {
  template: `
<div>
<p>テキスト1</p>
<p>テキスト2</p>
</div>`,
})

サンプル

まとめ

Vue.jsをはじめたばかりだと慣れていないので思わぬエラーが起こることもあると思います。

そんなときはこのページを参考にしていただければと思います。

僕自身もはじめて触ったときにエラーが起こり焦ったりしました(笑)

ですが慣れればVue.jsはjQueryよりもシンプルで使いやすいフレームワークだと思います。

Vue.jsの勉強におすすめしたい本

たった1日で基本が身に付く!Vue.js超入門

とにかく短い期間でVue.jsの基礎だけを覚えてしまいたい人におすすめの入門書です。

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.jsを初心者レベルから実践まで徹底的にわかりやすく解説されている本です。

vueの書き方から適用例まで詳しく書かれているのでvue.jsを覚えたい人におすすめです。

僕もこの本をいまでも使っていますしVue.jsをはじめたときにこの本で勉強しました。

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

vue.js
スポンサーリンク
blogをフォローする
フロントエンジニア&コーダーのためのマテリアルブログ

コメント

タイトルとURLをコピーしました