【Vue.js】子コンポーネントのmounted後に処理を実行したい
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
Vue.jsでアクセス元（referrer）を取得する
リファラーのデータを集め用とした際に、document.referrerを使っても前のページが取得出来なかった。 $routeを使っているとdocument.referrerで接続元が取れないらしい。 下記のようにbeforeRouteEnterを用いることで、接続元を取得することが出来た。 data() { return { prevRoute: null }; }, beforeRouteEnter(to, from, next) { next(vm => { vm.prevRoute = from }) }, methods: { hogehoge() { console.log("リファラー：" + this.prevRoute.path); } } 参考サイト teratail VueRouterで前のページのURLを取得することは可能でしょうか？ https://teratai
Vueテンプレート構文：条件で属性を付けたり外したり【備忘録】 - Qiita
属性値のバインディングはわかるけど、 属性自体の切替はどうやるんだと迷ったので備忘録。 やりたいこと blankフラグがfalseのときはtarget属性無し blankフラグがtrueのときはtarget属性有り <template lang="pug"> .component template(v-for="item in linkList") // blankフラグがfalseのときはtarget属性なし a(:href="item.href") |{{item.text}} // blankフラグがtrueのときはtarget="_blank" a(:href="item.href" target="_blank") |{{item.text}} </template> <script> export default { data(){ return { linkList: [ {
Vue・Nuxtでslotの中身の有無で処理を分ける方法 【$scopedSlotsを使います】
2021/06/10 (更新日: 2022/11/01) Vue・Nuxtでslotの中身の有無で処理を分ける方法 【$scopedSlotsを使います】 JavaScript PROGRAMMING Vue VueやNuxtで、slotの利用時に、v-slotでslotの処理を複数に分けていて、slotが渡されていれば表示・slotが渡されていなければ非表示にするというような処理を書きたい時に使える便利な方法について解説します。 この記事を書いている僕は、フロントエンドのプログラマー(フリーランス)として、これまで4年ほどのWeb制作経験があり、Vue,React,Nuxtなどフロントエンドの開発を得意としています。 この記事を読むことによって、Vueのslotで中身の有無により処理を切り分けることができるようになります。 Vue・Nuxtでslotの中身の有無で処理を分ける方法 【$s
話題の爆速CLIツール「Vite」をVue.jsの定番ツール「Vue CLI」と徹底比較！
はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型指定ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を説明しています。前回記事では、Vue.jsのプロジェクト作成や実行などができるCLI（コマンドライン）ツール「Vue CLI」の利用法を説明しました。 一方、Vue.jsのプロジェクト作成や実行ができるツールとして最近話題になっているのが「Vite」です。Vue.jsの作者であるEvan You氏とオープンソースコミュニティで開発されているこのツールは、「ヴィート」（フランス語で「高速」の意味）という名の通り、プロジェクト作成や実行をより高速に行うことを主眼に作られています。Vue.jsだけでなく、Reactなどさまざまな形式のプロジェクトに対
コンポーネントを小さく・きれいに設計しよう。Vue Composition APIを活用したコンポーネント分割術 - ICS MEDIA
Vue.jsを使った開発でよく悩まされるのがコンポーネントの肥大化です。複雑なアプリケーションになると、1つのコンポーネントが<script>ブロックだけで数百行…なんてこともめずらしくないでしょう。従来、Vue 2までの標準的な書き方では、UIとしてのコンポーネントの細分化はできてもロジックの分割や整理には限界がありました。しかし、Vue 3のComposition APIを活用すると、はるかに柔軟な整理・分割が可能です。 「Composition APIは難しそうだからまだ使っていない」という方、あるいは「導入はしているけどイマイチメリットがわからない」という方は、この機会にぜひComposition APIを活用したコンポーネントの整理術を試してみてはいかがでしょうか？ なぜ、Vueのコンポーネントは肥大化するのか？ 簡単な例を見てみましょう。下のサンプルはミニマムなアナログ時計のコ
The correct way to force Vue to re-render a component
Sometimes Vue's reactivity system isn't enough, and you just need to re-render a component. Or maybe you just want to blow away the current DOM and start over. So how do you get Vue to reload a component the right way? The best way to force Vue to re-render a component is to set a :key on the component. When you need the component to be re-rendered, you just change the value of the key and Vue wil
「vuejs-paginate」でページネーション を実装する
導入手順 管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。 今回のサンプルはBootstrapベースのページネーションを実装します。 ライブラリの呼び出し まずライブラリを呼び出す為に、以下の２通りの呼び出しを選択します。 コンパイラを使用しない場合は、UMDを使ってください。 ES6等で実装する場合 import Paginate from 'vuejs-paginate' Vue.component('paginate', Paginate) UMDで実装する場合 Vue.component('paginate', VuejsPaginate) ページネーションメソッドを設定 サンプル用にforを使って、リスト用の配列itemsを設定します。 dateのperPageに1ページに表示するアイテム数を設定します。 またitemsにリストを設定
Vue.jsでカテゴリー分けされた画像リストを実装
2023年2月7日 JavaScript, Vue.js たくさんある商品画像やポートフォリオの作品一覧などを見せたいときに、カテゴリーごとに絞って表示できたら便利ですよね。Vue.jsを使えば同じページのまま表示画像を変更できるので、管理も楽になりますよ。 ↑私が10年以上利用している会計ソフト！ 完成図 まずは画像を一覧で表示させ、上部にあるカテゴリー名のボタンをクリックすると、そのカテゴリーに属する画像だけを表示させます。 1. Vue.jsの読み込み設定 まずはHTMLの head 内にVue.jsを読み込ませます。別のバージョンやNPMでのインストール方法は公式サイトを参照してください。 <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script> 2. 画像を一覧表示 Vue.jsの配列を使って画
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to avoid empty class in Vue with null
Redirecting
【Nuxt.js】vue-touch-eventsでタッチイベントを使おう | aLiz Nuxt
Wait for multiple images to load
Intersection Observer doesn't observe new elements
Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガク