javascript:vuejs

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
javascript:vuejs [2020/08/25 10:21] – [コンポーネント] ともやん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 フレームワーク ====== ====== Vue.js - プログレッシブ JavaScript フレームワーク ======
 <WRAP #logo> <WRAP #logo>
行 34: 行 7:
 ソースコード: [[https://github.com/vuejs/vue|vuejs/vue: 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.]]\\ ソースコード: [[https://github.com/vuejs/vue|vuejs/vue: 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.]]\\
 <html> <html>
 +  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.min.js"></script>
   <div id="vuejs-app">   <div id="vuejs-app">
     <p>最新バージョン: {{ vue_ver }}</p>     <p>最新バージョン: {{ vue_ver }}</p>
   </div>   </div>
   <script>   <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>   </script>
 </html> </html>
行 53: 行 28:
 一方で高機能なシングルページアプリケーション(SPA)を構築することも可能である。\\ 一方で高機能なシングルページアプリケーション(SPA)を構築することも可能である。\\
 [[https://ja.wikipedia.org/wiki/Vue.js|Vue.js - Wikipedia]] より\\ [[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 アプリを埋め込む方法 ===== ===== DokuWiki に RequireJS で Vue.js アプリを埋め込む方法 =====
  • javascript/vuejs.1598318476.txt.gz
  • 最終更新: 2020/08/25 10:21
  • by ともやん