【WordPress】で[vue.js]を意地でも使いたい

「【vue.js】は使いたいのだけれど、【WordPress】ではビジュアルモード使用時にタグが書き換わって使用できない(‘_’)」

と悩んでおりましたが、ひとまずは解決方法を思いついたのでご報告を。

【WordPress】で[vue.js]を使うなら「iframe」でしょ！

１．開発ツールで、必要な部品を入れたファイルを作成

『Visual Studio』とかの開発ツールや適当なテキストエディタなりでファイルを作成します。

２．記事内ではiframeで呼び出す。

これで呼び出す。

以上。

メリット：とにかく楽。

「とりあえず「iframe」使っておけばいい」という単純さ。

単純なので保守も簡単です。

「【vue.js】を使いつつ、【WordPress】の補完機能は残したい…」とウンウン悩んでいたのですが

「HTMLファイル作成してiframeで呼び出せば解決しそうな気がする！」

と思いつき、そういえば素人感丸出しでiframe呼び出した記事を作成したなと思い出したので、こちらを利用して呼び出してみます。

技術力高い人であれば何か良い解決方法があるのでしょうが、こっちは素人。

素人なりに戦うしかありません。

【WordPress】iframeを（強引に）呼び出す超簡単な方法

そもそもなぜ普通に使用しないのか

実は、【WordPress】で【vue.js】を使おうとすると、

「（WordPressさん）ああこれはテキストねー。テキスト属性あげちゃう（ﾍﾟﾀｰ）」

と余計なタグを自動で入れてくれる機能があるので、JavaScriptのフレームワークを使用するのには不向きなのです。

ここで、普通にコーディングした場合にどうなるかご覧いただきたい。

-Before-

<div id="app">
    <input v-model="netaName" /><button @click="addItem">追加</button>
    <ul id="itemList">
        <span v-for="item in shari">{{ item }}</span>
    </ul>
</div>

-After①-

<div id="app"><input v-model="netaName" type="text" /><button click="addItem">追加</button><span v-for="item in shari">{{ item }}</span></div>

おわかりだろうか？

まず、「１行にまとまる。」

インデントを付けてもきれいに１行にしてくれる。

ではインデントを復活させて中身をご覧ください。

-After②-

<div id="app">
    <input v-model="netaName" type="text" />
    <button click="addItem">追加</button>
        <span v-for="item in shari">{{ item }}</span>
</div>

おわかりだろうか？

とりあえず<input>と付いていればテキスト属性を入れてくれる。

「入れ忘れたんだね」と忖度して追加してくれる親切設計も、ここではコードを破壊するだけになってしまう。

（もちろん、この状態だとエラーにもならずに動かない）