Vue.js - プログレッシブ JavaScript フレームワーク

本家: Vue.js
　　 Vue.js (日本語)
ソースコード: vuejs/vue: 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

最新バージョン: {{ vue_ver }}

Vue.js (ヴュージェイエス)、または Vue は、Web アプリケーションにおけるユーザーインターフェイスを構築するための、オープンソースの JavaScript フレームワークである。
他の JavaScript ライブラリを使用するプロジェクトへの導入において、容易になるように設計されている。
一方で高機能なシングルページアプリケーション(SPA)を構築することも可能である。
Vue.js - Wikipedia より

DokuWiki に CDN の Vue 3 でアプリを埋め込む方法

<html>
  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.min.js"></script>
  <div id="vuejs-app">
    <p>最新バージョン: {{ vue_ver }}</p>
  </div>
  <script>
      const { createApp } = Vue
 
      createApp({
        data() {
          return {
            vue_ver: Vue.version,
          }
        }
      }).mount('#vuejs-app')
  </script>
</html>
※Vue.js バージョンを表示するだけの簡単なサンプルアプリケーション。\\

DokuWiki に RequireJS で Vue.js アプリを埋め込む方法

RequireJS - モジュール管理フレームワーク

<html>
  <script src="/_media/javascript/requirejs/require-2.3.6.min.js?cache=recache"></script>
  <script>
    self.DEBUG = true;
  </script>
  <script src="/_media/javascript/requirejs/settings.js?cache=nocache"></script>
</html>
====== DokuWiki Vue.js サンプルアプリ ======
<html>
  <div id="doku-vuejs-app">
    <p>Vue.js version: {{ vue_ver }}</p>
  </div>
  <script>
    "use strict";
 
    let doku_vuejs_app;
 
    require(['Vue'], (Vue) => {
      doku_vuejs_app = new Vue({
        el: '#doku-vuejs-app',
        data: {
          vue_ver: Vue.version,
        },
      });
    });
  </script>
</html>
※Vue.js バージョンを表示するだけの簡単なサンプルアプリケーション。\\

DokuWiki Vue.js サンプルアプリ
 DokuWiki REST API Vue.js サンプルアプリ

インスタンス

ライフサイクルフック (lifecycle hooks)

created: {
},

コンポーネント

Vue.js コンポーネント

参考文献

ガイド - Vue.js
5分でわかるVue.js基礎の基礎 - Qiita
jQueryからネイティブJavaScriptへ置き換えの第一歩 - Qiita
vue.jsのcreatedとmountedの違いを目で見て理解 | アールエフェクト
 クライアントサイドストレージ — Vue.js

目次