差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
javascript:vuejs [2020/06/04 04:37] – [参考文献] ともやん | javascript:vuejs [2022/10/16 10:04] (現在) – ともやん | ||
---|---|---|---|
行 1: | 行 1: | ||
- | < | ||
- | < | ||
- | #result pre { | ||
- | overflow: scroll; | ||
- | overflow-x: hidden; | ||
- | font-size: 10px; | ||
- | } | ||
- | # | ||
- | height: 200px; | ||
- | overflow: scroll; | ||
- | overflow-x: hidden; | ||
- | font-size: 10px; | ||
- | } | ||
- | .dokuwiki .wrap_left { | ||
- | margin-right: | ||
- | } | ||
- | #logo { | ||
- | background-color: | ||
- | padding: 0 10px; | ||
- | width: fit-content; | ||
- | } | ||
- | #logo p { | ||
- | margin: 0; | ||
- | } | ||
- | </ | ||
- | <script src=" | ||
- | </ | ||
====== Vue.js - プログレッシブ JavaScript フレームワーク ====== | ====== Vue.js - プログレッシブ JavaScript フレームワーク ====== | ||
<WRAP #logo> | <WRAP #logo> | ||
行 34: | 行 7: | ||
ソースコード: | ソースコード: | ||
< | < | ||
+ | <script src=" | ||
<div id=" | <div id=" | ||
< | < | ||
</ | </ | ||
< | < | ||
- | "use strict"; | + | const { createApp } = Vue |
- | + | ||
- | var vuejs_app | + | |
- | | + | |
- | | + | return { |
- | vue_ver: Vue.version, | + | |
- | }, | + | } |
- | }); | + | } |
+ | }).mount('# | ||
</ | </ | ||
</ | </ | ||
行 53: | 行 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 アプリを埋め込む方法 ===== | ===== DokuWiki に RequireJS で Vue.js アプリを埋め込む方法 ===== | ||
行 90: | 行 89: | ||
</ | </ | ||
[[javascript: | [[javascript: | ||
+ | [[javascript: | ||
+ | |||
+ | ===== インスタンス ===== | ||
+ | |||
+ | ==== ライフサイクル フック (lifecycle hooks) ==== | ||
+ | <code javascript> | ||
+ | created: { | ||
+ | }, | ||
+ | </ | ||
+ | ===== コンポーネント ===== | ||
+ | [[javascript: | ||
===== 参考文献 ===== | ===== 参考文献 ===== | ||
[[https:// | [[https:// |