プログラミング

Vue.js 3をWordPress 上で動かしてみた。

Vue.jsはオープンソースのフレームワークです。
現在「Vue3」と呼ばれる Ver.3がリリースされています。 Vue.jsの最新バージョンですね。
このVue3を WordPressで動かしてみようというのが今回の目的です。
といっても簡単で単純に Vue3のライブラリーをCDNのリンクを貼っているだけです。

今回は、取り敢えずの動作確認ということで最低限の実装で動作確認をしてみました。
内容は単純に setIntervalで現在時間を取得して表示するデジタル時計です。
時間の表示には Google Font 「Black Ops One」 を Webフォントで表示しています。

{{ message }}

Vue3ライブラリの実装

viu.js 3 と sprintf のライブラリを CDNから読み込みます。 funcions.php に記述します。
参考サイト
https://v3.ja.vuejs.org/
https://cdnjs.com/libraries/sprintf

HTMLソース

Mustache構文により vue.js で データを置き換えます。

// テンプレート(HTMLのpタグ内)
{{ message }}

// 渡す値(javascriptの実行による)
{
message: ‘Hello Vue!’
}
このjavascriptの実行により {{ message }}がHello Vue!に書き換えられる。

vue3(javascript)ソース

css

実際の時間は googleWebフォントでフォントのデザインしています。
PC画面では背景に画像を用いて見かけを装飾しています
また、メディアクレリーによりスマフォ等の幅の狭いブラウザの場合は背景をなくしています。

最近の記事

  1. wordpres5をubuntu nginxにインストール
  2. ubuntu 20.04 nginx php mysql Webサーバー環境整備
  3. Ubuntu nginx SSL
  4. EC-CUBE 4.0 インストール
  1. サーバー環境

    無料SSL証明書 Let’s Encrypt でワイルドカードな証明…
  2. プログラミング

    WordPress にて jQueryUI テーマを動的選択してデザインを反映
  3. プログラミング

    ワードプレス AmCharts Javascript ライブラリー を表示させる…
  4. サーバー環境

    Webサイト https 導入 備忘録
  5. サーバー環境

    Git コマンドライン
PAGE TOP