【WordPress】[vue.js]を1ミリも知らない素人が[vue.js]を使用できるようにする。

どんな人向けの記事？

・「『npm』？なにそれ？」な方

・とにかく速攻で[vue.js]を使用してみたい方

・「もう『jQuery』は嫌だヽ(`Д´)ﾉ　」な方

何をするの？

・『CDN版』を使用します。 「『CDN版』って何？」という方にも手軽にご使用いただけます。

・jQueryと同じように、スクリプトタグでインポートするだけで使用できます。

コマンドぽちぽちするべきなのですが、残念ながらこちとら初心者じゃい！後で！後でね！！

すること

イベントハンドリングから『CDN』をコピー
『header.php』にスクリプトをペースト
いつものjsファイルに「vue.js」の形式でテスト用のイベントハンドラを記入
あとはいつものブログ投稿で「vue.js」のテストを行います。

※ちなみに、『header.php』を直接編集したら、また消えました。 編集前に必ずコピーしてバックアップとってください。

【WordPress】ヘッダーファイル直接編集したら消えた[header.php]

詳細手順

１．イベントハンドリングから『CDN』をコピー

イベントハンドリングで#CDNのスクリプトタグをコピーします。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>

２．『header.php』にスクリプトをペースト

１．でコピーしたスクリプトタグを、「header.php」の[<head>タグ内]にペーストします。

３．いつものjsファイルに「vue.js」の形式でテスト用のイベントハンドラを記入

イベントハンドリング内のメソッドイベントハンドラからお借りして、jsファイル内にコピペしてよろしく変更します。（ [【WordPress】管理画面] – [外観] – [テーマの編集]から、テーマ内にあるjsファイルに追記します。）今回入れたもの ↓

//■20190203 vue.js
var example = new Vue({
  el: '#example',
  data: {
    name: 'Vue.js'
  },
  // `methods` オブジェクトの下にメソッドを定義する
  methods: {
    sakusaku: function (event) {
      // メソッド内の `this` は、 Vue インスタンスを参照します
      alert('押しましたね？')
      // `event` は、ネイティブ DOM イベントです
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

４．あとはいつものブログ投稿で「vue.js」のテストを行います。

<div id="example"><button v-on:click="sakusaku">押してください</button></div>

テストですのでこの程度で大丈夫です。 [JavaScript]で記述していたonclickのイベントハンドラは下記の通りです。

JavaScript：[onClick=””]

vue.js：[v-on:click=””]

↓ 完成 ↓

これで動作完了です。以上です。いかがでしょうか？