今回は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をはじめたときにこの本で勉強しました。
コメント