差分

このページの2つのバージョン間の差分を表示します。

--- javascript:vuejs [2020/02/27 06:14] – [参考文献] ともやん
+++ javascript:vuejs [2022/10/16 10:04] (現在) – ともやん
@@ 行 1: / 行 1: @@
 ====== Vue.js - プログレッシブ JavaScript フレームワーク ======
-{{:javascript:vuejs_logo.png?200|Vue.js Logo}}\\
+<WRAP #logo>
+{{:javascript:vuejs_logo.png?200|Vue.js Logo}}
+</WRAP>
 本家: [[https://vuejs.org/|Vue.js]]\\
+　　 [[https://jp.vuejs.org/|Vue.js]] (日本語)\\
 ソースコード: [[https://github.com/vuejs/vue|vuejs/vue: 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.]]\\
+<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** (ヴュージェイエス)、または **Vue** は、Web アプリケーションにおけるユーザーインターフェイスを構築するための、オープンソースの JavaScript フレームワークである。\\
@@ 行 8: / 行 28: @@
 一方で高機能なシングルページアプリケーション(SPA)を構築することも可能である。\\
 [[https://ja.wikipedia.org/wiki/Vue.js|Vue.js - Wikipedia]] より\\
-\\
+===== DokuWiki に CDN の Vue 3 でアプリを埋め込む方法 =====
+<WRAP prewrap 100%>
+<code javascript>
+<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 バージョンを表示するだけの簡単なサンプルアプリケーション。\\
+</code>
+</WRAP>
+===== DokuWiki に RequireJS で Vue.js アプリを埋め込む方法 =====
+[[javascript:requirejs|RequireJS - モジュール管理フレームワーク]]\\
+<WRAP prewrap 100%>
+<code javascript>
+<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 バージョンを表示するだけの簡単なサンプルアプリケーション。\\
+</code>
+</WRAP>
+[[javascript:vuejs:dokuwiki_sample|DokuWiki Vue.js サンプルアプリ]]\\
+[[javascript:vuejs:dokuwiki_rest_api_sample|DokuWiki REST API Vue.js サンプルアプリ]]\\
+===== インスタンス =====
+==== ライフサイクル フック (lifecycle hooks) ====
+<code javascript>
+created: {
+},
+</code>
+===== コンポーネント =====
+[[javascript:vuejs:component|Vue.js コンポーネント]]\\
 ===== 参考文献 =====
 [[https://jp.vuejs.org/v2/guide/|ガイド - Vue.js]]\\
+[[https://qiita.com/kiyokiyo_kzsby/items/ce9fe8b72953584fecee|5分でわかるVue.js基礎の基礎 - Qiita]]\\
 [[https://qiita.com/nayuneko/items/b3ad3d6bc2687bcdb0f6|jQueryからネイティブJavaScriptへ置き換えの第一歩 - Qiita]]\\
 [[https://reffect.co.jp/vue/vue-js-created-mounted-diffrence|vue.jsのcreatedとmountedの違いを目で見て理解 | アールエフェクト]]\\
 [[https://jp.vuejs.org/v2/cookbook/client-side-storage.html|クライアントサイドストレージ — Vue.js]]\\