propsで受け取った値をmountedで使いたいっ！[Vuejs]
ちょうどいいサンプルが無いですが、普通にthis.hogeでアクセスできるみたいです。 <script> export default { props: ['hoge'], mounted: function() { console.log(this.hoge) } } </script> 関連記事vuejsのエラーをなんとかしたいっ！ Vuejsを触っていて表示されたエラーをメモっていきます。 Property or method “hoge” is not defined on the...Vuejsでコンポーネントを読み込んで使いたいっ！ そもそもコンポーネントはそういうものだとは思いますが。 まずはHogeコンポーネントを追加しました。 <template> <div>Hoge!!</div> </templat […]...react.jsで別のComponentへのアクセス h
![propsで受け取った値をmountedで使いたいっ！[Vuejs]](https://cdn-ak-scissors.b.st-hatena.com/image/square/e5b65605ba2ddc960fcacccd5ad79cc507e6d771/height=288;version=1;width=512/https%3A%2F%2Fblog.mitsuto.com%2Fwp-content%2Fwebpc-passthru.php%3Fsrc%3Dhttps%3A%2F%2Fblog.mitsuto.com%2Fwp-content%2Fuploads%2F2021%2F06%2Fvuejs.png%26nocache%3D1)
コンポーネントを小さく・きれいに設計しよう。Vue Composition APIを活用したコンポーネント分割術 - ICS MEDIA
Vue.jsを使った開発でよく悩まされるのがコンポーネントの肥大化です。複雑なアプリケーションになると、1つのコンポーネントが<script>ブロックだけで数百行…なんてこともめずらしくないでしょう。従来、Vue 2までの標準的な書き方では、UIとしてのコンポーネントの細分化はできてもロジックの分割や整理には限界がありました。しかし、Vue 3のComposition APIを活用すると、はるかに柔軟な整理・分割が可能です。 「Composition APIは難しそうだからまだ使っていない」という方、あるいは「導入はしているけどイマイチメリットがわからない」という方は、この機会にぜひComposition APIを活用したコンポーネントの整理術を試してみてはいかがでしょうか？ なぜ、Vueのコンポーネントは肥大化するのか？ 簡単な例を見てみましょう。下のサンプルはミニマムなアナログ時計のコ
Vue.jsの世代交代が到来！ Vue 3デフォルト時代の「Vue.js開発新常識」
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回はVue.jsでコーディングするための基本的な記法を説明しました。今回はVue.jsの公式ブログから発信された「Vue 3をデフォルトバージョンにする」発表と、それに伴って、これまでと変わっていくVue.js開発の新常識を紹介していきます。 はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型指定ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を、順を追って説明しています。 本連載ではVue.jsの最新バージョンとなる「Vue 3」を用いてきましたが、実は
Vue.jsでJSON Serverを使う | devsakaso – プログラミングの独学サイト
2021年4月16日2021年5月4日Vue.js Vue.jsでJSON Serverを使う方法をまとめました。 JSON ServerはAPIモックサーバーです。 ローカル環境からAPIが使えない場合などに使います。 ターミナル まずターミナルで次のように操作します。 cd フォルダ名 でフォルダへ移動します。 npm install json-server でそのフォルダのローカルにインストールします。 json-server のURLを取得することができます。 たとえば、http://localhost:3000というURLです。 json-server -watch data/db.json もしくは npx json-server --watch data/db.json とすると、json-serverの変更を随時watchしてくれるようになります。 Jobs.vue たとえ
Vue 3 Composition API入門 | ともすた
Vue.jsは、JavaScriptライブラリとしてReactと共に人気のあるライブラリです。特に2021年に登場した最新の「Vue 3」からは「Composition API」という新しい開発手法が登場しました。 これは、それまでのVue.jsの開発手法（これをOptions APIといいます）では、かなり独特だったプログラムの書き方が、かなりJavaScript標準の書き方に近づいたもので、Vue.jsに馴染めなかった人でも、すんなり導入できるスタイルに変化しました。 本記事では、そんなComposition APIを利用したVue 3の開発手法を紹介しながら、簡単なToDoツールを開発していきましょう。 Vue 3のプロジェクトを作成しよう npmを利用しよう Vue 3は、HTMLファイルに後から組み込むこともできますが、npmを利用してプロジェクトを作成することもできます。今回は
Vue Composition APIの使い方を解説！Vue2との違いと書き換え
Vue Composition APIの使い方を解説！Vue2との違いと書き換え 2020年11月29日 2021年12月29日 Vue Composition API, Vue.js, プログラミング JavaScript, Vue 3, Vue Composition API, Vue.js 2020年9月18日に「Vue.js v3.0」がリリースされ、その中でも特にVue Composition APIが注目されています。 Composition APIでは今まで慣れ親しんできたVue2の書き方から一新されてしまったため、「使い方が分からない」と思っている方も多いのではないでしょうか。 この記事では以下の公式ドキュメントを基に、Composition APIの基本的な使い方を解説していきます。
Vue.jsの「el」とは？ - JavaScript勉強会
Vue.jsの学習メモ。 jsstudy.hatenablog.com Vue.jsの基本的なコードを見ると、「el」というプロパティーがあるけど、これって何なんだろう？と思いました。 var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) ↑この「el: '#app'」という部分ですね。 本ではサラッと説明されていて、いまいちピンと来なかったので、他の説明を調べてみました。 マウントする要素 まずは本書の説明です。 (p.43) オプションには使用するデータやメソッドを定義していきます。 var app = new Vue({ // （コンポーネントの）オプションをここに書く }) 基本的なオプションの構成 // 基本的なオプション構成（使用するデータやメソッド） var app = new Vue({
【Vue】Vue Element Adminで簡単な画面を作ってみた - CARTA TECH BLOG
はじめに TechDivの金です。 今回は Vue Element Admin が使っているライブラリを適用し、 Web画面を作る一連の流れを説明させていただきたいです。 目次 Vue Element AdminとはVue Admin Templateの起動メニュー追加「element-ui」Table作成「echarts」グラフの作成感想 Vue Element Adminとは Vue Element Adminとは vue-element-admin は管理画面のフロントエンドのインタフェースで、vue と element-uiを使っています。i18nの多言語対応、可変ルート、権限、典型的なビジネスアプリテンプレートであり、豊富なコンポーネントを提供しています。素早くビジネス用の管理画面の現型を構築に役立ちます。 引用：PanJiaChen/vue-element-admin デモ画面
はじめてのVue Router(基本編) | アールエフェクト
vue.jsの拡張ライブラリであるVue Routerを利用することでシングルページアプリケーション(SPA)を構築することができます。 Vue Router４を利用した新しい記事を新たに作成しました。2020年10月現在のVue Routerの最新バージョンについて学習したい場合は下記を参考にしてください。 Vue Routerを利用してシングルページアプリケーションを構築するとあるページから別のページに移動する際にページ全体の情報を読み込む必要がなくなります。ページ間で共通の箇所は更新が行われずページ内の異なる内容が記述されている箇所のみ書き換えが行われます。例えばヘッダーやフッター、サイドバーがあるサイトの場合、共通な情報であるため更新の必要のないそれらの情報を毎回読み込むことを行いません。そのためシンプルページアプリケーションではページの移動をスムーズに行うことができます。 本文書
vue.jsを使ってaxiosを学ぶ | アールエフェクト
CDNを利用するとブラウザのコンソールに”You are running a development build of Vue. Make sure to use the production build (*.prod.js) when deploying for production.”メッセージが表示されます。 Vue2の場合 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>vueを使ってaxiosを学ぶ</title> </head> <body> <div id="app"> <h1>{{ message }}</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script s
とほほのVue.js入門 - とほほのWWW入門
vm.$data, vm.$props, vm.$el, vm.$options, vm.$parent, vm.$root, vm.$childlen, vm.$slots, vm.$scopedSlots, vm.$refs, vm.$attrs, vm.$listeners
基礎から学ぶ Vue.js
どんな本？ 機能ごとに解説している Vue.js 入門書です。これからはじめる方にも、すでに Vue.js をお使いの方にも、楽しんでいただける内容になっています。 しっかり学習できる！ Vue.js は直感的に使える機能が多く、雰囲気で使ってしまいがちです。どんなメリット＆デメリットがあるかも解説しているため、しっかりと学習できます。 「Vue.js が楽しい！」ウェブフロントエンド界隈でこの言葉を耳にすることが増えました。 フロントエンドを取り巻く技術の進化によって、フロントエンドの役割は増え、フレームワークもより身近なものになっています。 この本では「Vue.js ってなに？」「フレームワークってなに？」という基礎概念と導入からプロダクトに役立つ情報までを体系的に解説しています。 これから JavaScript のフレームワークを始める方にはもちろん、すでに Vue.js をお使いの
「Vue.js」入門～JavaScriptフレームワークをTypeScriptで学ぼう
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。初回となる今回は、簡単なサンプルを通して、Vue.jsとTypeScriptの概要と機能を紹介していきます。 はじめに Webフロントエンド開発の分野では、JavaScriptを利用して動的なWebページを構築できるライブラリーやフレームワークがいくつかあります。Googleが中心となって開発しているAngularやその前身であるAngularJS、Facebookが中心となって開発しているReactなどが有名です。 本連載で取り上げるVue.jsも、そのようなフレームワークの一つです。JavaScriptを利用して、データとWebページの内容を結び付けて（バインディングして）表示したり、Webページ
vue.js | アールエフェクト
関連する記事 2023/04/26 2023/06/05 unplugin-vue-componentsとunplugin-auto-importでimportの自動化 2023/04/26 2024/02/29 Vuetify3を使いこなすためのTheme, Styles, Sassの設定の基礎 2022/11/26 2024/05/16 Nuxt 3を使いこなすために基礎から徹底解説 2022/11/16 2022/11/17 Vue.jsからデータベースに対して読み書きをしたい 2022/11/10 2022/11/10 Vue.jsで簡単にできるテーブル行の並び替え(ドラッグ&ドロップ) 2022/10/14 2023/11/26 Vue Router 4基礎から理解(Composition API＋Vite環境) 2022/09/15 2022/09/15 Vue.js 3のCo
Vue.js - The Progressive JavaScript Framework | Vue.js
The Progressive JavaScript Framework Web ユーザーインターフェース構築のための、親しみやすく、パフォーマンスと汎用性の高いフレームワーク。 Vue を使う理由 はじめる インストール Vue 2 のセキュリティー・アップデート 親しみやすい 直感的な API とワールドクラスのドキュメントを使用して、標準的な HTML、CSS、JavaScript をもとに構築します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Viteで@/componentsのショートカットが使えない問題 - あさめしコード
[Vue.js]Vue RouterでSPAのルーティング制御 | コラム | 東京・千代田区にあるリピート率90%以上の完全独立系ITシステム会社の株式会社ディスタント・ビュー
Vue Routerを使ってURLを動的に制御する方法
Vue CLI
Vue Router | The official Router for Vue.js