差分

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

--- javascript:vuejs [2020/06/01 10:00] – [DokuWiki に RequireJS で Vue.js アプリを埋め込む方法] ともやん
+++ javascript:vuejs [2022/10/16 10:04] (現在) – ともやん
@@ 行 1: / 行 1: @@
-<html>
-  <style>
-    #result pre {
-      overflow: scroll;
-      overflow-x: hidden;
-      font-size: 10px;
-    }
-    #source_code pre {
-      height: 200px;
-      overflow: scroll;
-      overflow-x: hidden;
-      font-size: 10px;
-    }
-    .dokuwiki .wrap_left {
-      margin-right: 0;
-    }
-    #logo {
-      background-color: white;
-      padding: 0 10px;
-      width: fit-content;
-    }
-    #logo p {
-      margin: 0;
-    }
-  </style>
-  <script src="https://vuejs.org/js/vue.min.js"></script>
-</html>
 ====== Vue.js - プログレッシブ JavaScript フレームワーク ======
 <WRAP #logo>
 {{:javascript:vuejs_logo.png?200|Vue.js Logo}}
 </WRAP>
-<html>
-  <div id="vuejs-app">
-</html>
 本家: [[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>
-    "use strict";
+      const { createApp } = Vue
-    var vuejs_app = new Vue({
+      createApp({
-      el: '#vuejs-app',
+        data() {
-      data: {
+          return {
-        vue_ver: Vue.version,
+            vue_ver: Vue.version,
-      },
+          }
-    });
+        }
+      }).mount('#vuejs-app')
   </script>
 </html>
@@ 行 54: / 行 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 html>
+<code javascript>
 <html>
   <script src="/_media/javascript/requirejs/require-2.3.6.min.js?cache=recache"></script>
@@ 行 90: / 行 89: @@
 </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]]\\