2019-01-22に更新

Vue.jsの単一コンポーネントで雑にロジックだけ実行

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開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitはβバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

関連記事

コメント