差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
javascript:vuejs [2020/02/25 09:19] – ともやん | javascript:vuejs [2022/10/16 10:04] (現在) – ともやん | ||
---|---|---|---|
行 1: | 行 1: | ||
====== Vue.js - プログレッシブ JavaScript フレームワーク ====== | ====== Vue.js - プログレッシブ JavaScript フレームワーク ====== | ||
- | {{: | + | <WRAP #logo> |
+ | {{: | ||
+ | </ | ||
本家: [[https:// | 本家: [[https:// | ||
+ | [[https:// | ||
ソースコード: | ソースコード: | ||
+ | < | ||
+ | <script src=" | ||
+ | <div id=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | const { createApp } = Vue | ||
+ | | ||
+ | createApp({ | ||
+ | data() { | ||
+ | return { | ||
+ | vue_ver: Vue.version, | ||
+ | } | ||
+ | } | ||
+ | }).mount('# | ||
+ | </ | ||
+ | </ | ||
\\ | \\ | ||
**Vue.js** (ヴュージェイエス)、または **Vue** は、Web アプリケーションにおけるユーザーインターフェイスを構築するための、オープンソースの JavaScript フレームワークである。\\ | **Vue.js** (ヴュージェイエス)、または **Vue** は、Web アプリケーションにおけるユーザーインターフェイスを構築するための、オープンソースの JavaScript フレームワークである。\\ | ||
行 8: | 行 28: | ||
一方で高機能なシングルページアプリケーション(SPA)を構築することも可能である。\\ | 一方で高機能なシングルページアプリケーション(SPA)を構築することも可能である。\\ | ||
[[https:// | [[https:// | ||
- | \\ | ||
+ | ===== DokuWiki に CDN の Vue 3 でアプリを埋め込む方法 ===== | ||
+ | <WRAP prewrap 100%> | ||
+ | <code javascript> | ||
+ | < | ||
+ | <script src=" | ||
+ | <div id=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | const { createApp } = Vue | ||
+ | | ||
+ | createApp({ | ||
+ | data() { | ||
+ | return { | ||
+ | vue_ver: Vue.version, | ||
+ | } | ||
+ | } | ||
+ | }).mount('# | ||
+ | </ | ||
+ | </ | ||
+ | ※Vue.js バージョンを表示するだけの簡単なサンプルアプリケーション。\\ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ===== DokuWiki に RequireJS で Vue.js アプリを埋め込む方法 ===== | ||
+ | [[javascript: | ||
+ | |||
+ | <WRAP prewrap 100%> | ||
+ | <code javascript> | ||
+ | < | ||
+ | <script src="/ | ||
+ | < | ||
+ | self.DEBUG = true; | ||
+ | </ | ||
+ | <script src="/ | ||
+ | </ | ||
+ | ====== DokuWiki Vue.js サンプルアプリ ====== | ||
+ | < | ||
+ | <div id=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | "use strict"; | ||
+ | | ||
+ | let doku_vuejs_app; | ||
+ | | ||
+ | require([' | ||
+ | doku_vuejs_app = new Vue({ | ||
+ | el: '# | ||
+ | data: { | ||
+ | vue_ver: Vue.version, | ||
+ | }, | ||
+ | }); | ||
+ | }); | ||
+ | </ | ||
+ | </ | ||
+ | ※Vue.js バージョンを表示するだけの簡単なサンプルアプリケーション。\\ | ||
+ | </ | ||
+ | </ | ||
+ | [[javascript: | ||
+ | [[javascript: | ||
+ | |||
+ | ===== インスタンス ===== | ||
+ | |||
+ | ==== ライフサイクル フック (lifecycle hooks) ==== | ||
+ | <code javascript> | ||
+ | created: { | ||
+ | }, | ||
+ | </ | ||
+ | |||
+ | ===== コンポーネント ===== | ||
+ | [[javascript: | ||
===== 参考文献 ===== | ===== 参考文献 ===== | ||
[[https:// | [[https:// | ||
+ | [[https:// | ||
[[https:// | [[https:// | ||
+ | [[https:// | ||
+ | [[https:// | ||