Vue.jsの単一コンポーネントはtemplateを書かなくても良い。なぜかというと、templateを使わずにrenderメソッドで直接描画することもできるため。そのため、その仕組を使うことで特に何も描画せず、ロジックだけ実行するということも可能。
例えばhighlight.jsを使った例。下記のようなhighlight.vue
というコンポーネントを作成する。
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import highlight from 'highlight.js'
@Component
export default class Highlight extends Vue {
mounted() {
highlight.initHighlightingOnLoad()
}
}
</script>
これを、実際に描画するテンプレートの最後に配置するだけ。配置したページにだけ、配置したコンポーネントの処理が実行される。
<highlight />
ただまあ、特にhighlight.jsの場合など、ディレクティブを使ったほうが良さそうだったりするので、これは雑なやり方になる。仕事とかでやると「なんで何もしてないのに勝手にコードハイライトされてんだー!?」みたいになる場合もありそうな感じ。
また、本番では何も言われないが開発中はコンソールに「テンプレートもrenderもないよ!」というエラーが出ている。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント