プログラミング

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. プログラミング

    Google Maps Platform 位置情報取得、緯度経度より住所取得
  2. Web・デザイン

    JavaScriptのアニメーションライブラリ AniJS
  3. サーバー環境

    wordpress メールをSMTP経由でのメール送信するように変更する
  4. サーバー環境

    mac Appleシリコンで WordPress ローカル環境構築
  5. サーバー環境

    Webサイト https 導入 備忘録
PAGE TOP