文書の表示以前のリビジョンバックリンク文書の先頭へ この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。 ====== Vue.js - プログレッシブ JavaScript フレームワーク ====== <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 フレームワークである。\\ 他の JavaScript ライブラリを使用するプロジェクトへの導入において、容易になるように設計されている。\\ 一方で高機能なシングルページアプリケーション(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]]\\ javascript/vuejs.txt 最終更新: 2022/10/16 10:04by ともやん