WordPressのようなCMSだと直接HTMLを編集できないケースがあり、そのような場合にVue.jsのバインディング要素{{mess}}やv-modelをJSで挿入し、バインディングさせる方法はあるのでしょうか？
jQueryで{{}}を挿入してみましたが、案の定そのまま出力されてしまいました。

行動規範の内容に同意します

回答2件

サンプルコードを作ってみましたのでご確認ください。

前提

Vue-cliなどのツールではなくcdnサービスのVueを使ってます。

解説

固定で配置されれている.hogeという要素の隣に#appという要素を追加してVueを当ててます。
VueインスタンスのtemplateプロパティにVueテンプレートを書きます。(サンプルではAppTemplateに格納してます)
その他コンポーネントの共通化などする場合は公式サイトをご確認くださいm(__)m
https://jp.vuejs.org/v2/guide/components-registration.html

サンプル

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>唐突にVueアプリを誕生させる</title>
8  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
9  <script>
10    window.addEventListener('DOMContentLoaded', (event) => {
11
12      // Vueアプリ用のDIV生成
13      const AppDiv = document.createElement('div');
14      AppDiv.id = 'app';
15
16      // Vueアプリ用のDIV追加
17      const target = document.querySelector('.hoge');
18      target.parentNode.insertBefore(AppDiv, target.nextSibling);
19
20      // Vueテンプレート
21      const AppTemplate =
22      `<template>
23        {{ msg }}
24      </template>`
25
26      const App = new Vue({
27        el: '#app',
28        data: {
29          msg: 'これはVue要素です'
30        },
31        template: AppTemplate
32      });
33
34    });
35  </script>
36</head>
37<body>
38  <div class="hoge">↓↓↓↓ ここ下にVueアプリを描画 ↓↓↓↓</div>
39</body>
40</html>

投稿2021/06/17 20:08

runnynose

総合スコア497

Anon_

2021/06/29 23:42

AppTemplateはhoge要素のどこに出力されますか？

runnynose

2021/06/30 10:59 編集

今回のサンプルに関しては以下のコードにて、hoge要素の隣に出現します。回答にあるソースコードをhtmlファイルにしてブラウザで確認してみてください。 ``` target.parentNode.insertBefore(AppDiv, target.nextSibling) ``` どこに出現させるかはjavascriptの書き方次第なのでhoge要素の子要素として出力することも可能です。

Anon_

2021/07/07 16:01

insertBeforeってhoge要素の前ですよね？ <div class="hoge">↓↓↓↓ ここ下にVueアプリを描画 ↓↓↓↓</div> とかかれていてhoge要素の中に出力されるような感じですが、そこはあまり気にしない方がいいですかね。

Anon_

2021/07/08 01:54

まったく新しい要素内で完結させるのではなく、複数の既存の要素の後ろに差し込みたい場合、どのようにする方法がいいと思われますか？ el: '#app'　ではなく el: 'body'　などの全体を包括している要素を指定するとtemplateに指定した要素のみが表示されます。

行動規範の内容に同意します