初めての Vue Component の import と使用
<template> <h2>My name is Nakanishi.</h2> </template> <script></script> <style></style> <template> <div class="wrapper"> <Name /> <h2 class="title"> Vue + Vuex<br /> 入門コース </h2> <p class="body">わかりやすいと評判！！</p> </div> </template> <script> import Name from "./components/Name"; export default { components: { Name } }; </script>
【Vue.js】v-bindでclass名を動的に追加、削除する！（北斗の拳の名言編） - クモのようにコツコツと
Vue.jsの続きです。前回まではJSONファイルの読み込みをしました。今回は属性値の動的な変更をします。v-bindを使ってclass名の追加、削除を行います。それではいきましょう！ 【目次】 v-bindは属性を指定するディレクティブ v-bind:hrefでURLを指定 v-bind:syleでCSSスタイルを指定 v-bind:classでclass名の追加、削除 複数ボタンで「北斗の名言」を表示する 最後に ※前回：【Vue.js】axiosでJSONファイルを読み込む（はっぴいえんど編） - クモのようにコツコツと v-bindは属性を指定するディレクティブ 以前の記事でv-on、V-if、v-forをやってみた。これら（v-hoge）は「ディレクティブ」というVue.js独自の属性。 ※参考：【Vue.js】イベント（v-on）、分岐（v-show、v-if）、ループ（v-f
FN1702008 | Vue.js入門 05: 項目を数えて表示する | HTML5 : テクニカルノート
ID: FN1702008 Technique: HTML5 / JavaScript Library: Vue.js 2.1.10 Vue.jsには、普通のプロパティとメソッドのほか、プロパティのように扱えるメソッドが備わっています。そのプロパティで、条件に合ったデータを数えて返してみます。 [注記] 本稿はVue.js 2.6とECMAScript 2015(ES6)にもとづく「Vue.js + ES6入門 05: 項目を数えて表示する」に改訂しました。 01 項目の数を示す 「Vue.js入門 04: フィールドに入力したテキストを動的に項目として加える」でつくったコード001に手を加えてゆきましょう。アプリケーションに納めた複数のデータがリストとして示され、入力フィールドのテキストは「追加」ボタンで項目に加えられます(図001)。これら項目のすべてとチェックされていない数を、それぞ
【Vue.js】イベントオブジェクトと任意の引数を同時に受け取る
Vue.jsでは以下のように書くことで、「イベントオブジェクト」を引数として受け取ることが可能です。 <template> <!-- テンプレート側では何も渡さなくてOK --> <button @click="onClick">Click</button> </template> <script> export default { methods: { onClick(event) { // 第１引数に自動的に入ってくる console.log(event) } } } </script> 一方、任意の引数を渡すことも可能です。 <template> <!-- 任意の値を指定 --> <button @click="onClick(1)">Click</button> </template> <script> export default { methods: { onClick(num
【Nxut.js】axiosの初期設定を行う(baseURL・browserBaseURLを解説) - 独学プログラマ
2020.06.23に公開 Udemy 5. RailsAPI×Nuxt.js初めてのAPI通信 No.2 / 3 今回達成すること API通信をするaxios（アクシオス）モジュールの設定を行い、 Nuxt.jsのトップページにAPIリクエストを送るボタンを設置します。 完走するとhttp://localhost:8080に、このようなボタンが表示されます。 ※ この記事ではNuxt.js（frontディレクトリ内）のファイルを編集します。 axiosのインストールを確認する 手順通りに進んできた方はpackage.jsonに@nuxtjs/axiosモジュールがインストールされていると思います。 front/package.json ... "dependencies": { "nuxt": "^2.0.0", "@nuxtjs/axios": "^5.3.6" }, もし見当たらない
Vue.jsでAccordionを作ってみるく - astamuse Lab
こんにちわ。 今日は前回の続き（「絶対フォント感」を身につけようとすると新たな扉が開く話 - その1 - http://lab.astamuse.co.jp/entry/2018/06/06/131745）を書こうと思ってたのですが、 アクセス数がかなり少かった（；；）ので一旦お休みしてフロントエンドっぽい事書いていこうと思います。 概要 vueでやるとAPIやdataリストにタイトルや本文を入れたくなりますが、今回は以下の要望を満たすものを作っていこうと思います。 アコーディオンの中身（タイトルや本文）はhtml側で制御したい それでは早速Vue.jsでAccordionを作ってみるく♡ step.1 下準備（html、css） 今回デザインはこんな感じで作っていきます。 See the Pen vue-accordion - html,css by 35n139e (@35n139e)
Vueの配列の変更が反映されないんだが - Qiita
最終的にやりたかったこと ツリー表示して選択されたデータを反映 公式のツリーのサンプル https://jp.vuejs.org/v2/examples/tree-view.html は使いたくないんだ 確かに楽なんだけど子コンポーネント孫コンポーネント作っちゃうと データのバケツリレーになるからVuexを使わなければいけなくなるではないか。。。！ なので子コンポーネント化せずにがんばった やってみた 動かない v-forでリストレンダリングしてるツリー構造の部分がクリックしても開閉せず しかしクリックイベントは拾ってデータの変更はされている 配列がリアクティブじゃないぞ。。。。 配列の挙動の検証 <template> <div> <ul> <li v-for="(item, index) in list" :key="index"> {{ item }} </li> </ul> {{ l
「vue-scrollto」を使ってNotificationを実装する|カバの樹
vue-scrolltoとは 「vue-scrollto」は、クリックイベントによって要素までイージングスクロールを実装するライブラリです。 window.requestAnimationFrameを使用してアニメーションを実行するため、最高のパフォーマンスが得られます。 イージングはbezier-easingを使って行われます 環境 インストール 以下のnpm、yarn、CDNを使ってインストールします。 npm npm install --save vue-scrollto yarn yarn add vue-scrollto CDN <script src="https://cdn.jsdelivr.net/npm/vue-scrollto"></script> gitリポジトリは以下から取得できます。 https://github.com/rigor789/vue-scrollTo
vue.jsのcreatedとmountedの違いを目で見て理解 | アールエフェクト
vue.jsを含めフロントエンドの技術を学び始めるとライフサイクルという言葉を目にする機会が増えてきます。私がそうであったようにvue.jsを含めJavaScriptのフレームワークに触れたことがない人にとってはライフサイクルというものが一体何なのか理解するのが最初は非常に難しいと思います。最初はライフサイクルの中で行われているすべての処理を理解しようとせず利用頻度の高いcreated, mountedで何が行われるのかということと2つの区別がはっきりつけばライフサイクルの理解が進みます。本文書ではvue.jsのライフライクルフックcreatedとmountedの違いを要素elを使って説明していきます。要素elの説明は後ほど出てくるので安心してください。さらにVue3のOptions APIとComposition APIを利用してcreated, mountedの動作確認を行っています。
条件付きレンダリング — Vue.js
v-ifv-if ディレクティブは、ブロックを条件に応じて描画したい場合に使用されます。ブロックは、ディレクティブの式が真を返す場合のみ描画されます。 <h1 v-if="awesome">Vue is awesome!</h1> これは、v-else で “else ブロック” を追加することも可能です: <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1> テンプレートでの v-if による条件グループv-if はディレクティブなので、単一の要素に付加する必要があります。しかし、1 要素よりも多くの要素と切り替えたい場合はどうでしょうか？このケースでは、非表示ラッパー (wrapper) として提供される、<template> 要素で v-if を使用できます。最終的に描画される結果は、<template> 要
【Vue.js】Vuejsをchromeブラウザでデバッグする方法 - Qiita
開発環境 ⭐️Mac book pro (Mac OS Mojave) ⭐️ブラウザ Google Chrome https://twitter.com/nonnonkapibara/status/1166711295384510465 ⛱️Vue.js⛱️CodePen⛱️ Vue.jsをCodePenで実装してみたよぉ。 CDN（インターネット経由）でできるので、めっちゃ便利♪♪https://t.co/z92om6dOAu pic.twitter.com/FrcWwWINq0 — non (@nonnonkapibara) August 28, 2019 1.Chromeのアドオン「Vue.js Devtools」を入れる。 Vue.js Devtools https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjm
【Nuxt.js】Vue Router基礎編：params, queryを使ってページ遷移 | aLiz Nuxt
前置き とっても便利なparams, queryについてご紹介🌟 同じコンポーネントを見せたいけど、 カテゴリごとにURLだけを変えたい… 一覧ページからソートして表示させたい… そんな時に便利です♪ params, queryについて いくつかに分けて書きます✍️ router-linkが分かれば簡単です🌟 まだ不安な方のためにも 複数の書き方で記載しました🍒
Nuxt.jsをはじめよう - クエリパラメータやパスパラメータを使ってデータを渡す
前回の記事 では画面遷移の仕方を紹介しました。 画面間でデータのを受け渡しをする方法を紹介します。Nuxt.js というか Vue.js の仕様も含まれています。 画面間でデータを渡す画面間でデータの受け渡しをする方法はいくつかあります。URLのクエリパラメータで渡す方法やパスパラメータによる方法、またフレームワーク側でデータを保持する方法などです。Nuxt.js においてこれらのやり方をまとめてみました。 クエリパラメータを使うURLのクエリパラメータとしてデータを取得したい場合には $route オブジェクトの query プロパティから取得ができます。 以下のように pageName=next というデータを nuxt-link から渡します。
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発 花谷拓磨 Vue.jsでUniversalなSPAを開発できるフレームワークであるNuxt.jsのバージョン 1.0のリリースがいよいよ近づいてきました。 本稿では、シングルページアプリケーション（以下 SPA）開発によって生じた問題を解決するために生まれたサーバーサイドレンダリング （以下 SSR）を中心に、Vue.jsでの開発を強力にサポートするNuxtについて、その魅力と基本的な使い方をご紹介いたします。 Nuxt.jsとは？ Nuxt.js（ナクストと読みます）はReact.jsベースのSSR用フレームワークであるNext.jsに触発されて作成された、Vue.jsベースのフレームワークです。 特にUIの描画サポート に主眼をおき、SSRをはじめとした様々なサポートを行ってくれるものとなります
【Nuxt.js】asyncDataの引数はContextというオブジェクトです - Qiita
asyncDataの引数について Nuxt.jsでよく使われる「asyncData()」メソッドの引数には、 Contextというオブジェクトが渡されてきます。 例 export default { async asyncData ({ params }) { // ここでContextが引数に渡されてくる let { data } = await axios.get(`https://api-test/posts/${params.id}`) return { name: data.name } } } 参照：公式ドキュメント/非同期なデータ Contextとは Contextには、paramsやstore、route等の asyncData内で使用できるオブジェクトが入っています。 Contextの詳細については、公式ドキュメント/Contextに詳しく載っています。 asyncDat
フィルター — Vue.js
ガイド 基本的な使い方 インストール はじめに Vue インスタンス テンプレート構文 算出プロパティとウォッチャ クラスとスタイルのバインディング 条件付きレンダリング リストレンダリング イベントハンドリング フォーム入力バインディング コンポーネントの基本 コンポーネントの詳細 コンポーネントの登録 プロパティ カスタムイベント スロット 動的 & 非同期コンポーネント 特別な問題に対処する トランジションとアニメーション Enter/Leave とトランジション一覧 状態のトランジション 再利用と構成 ミックスイン カスタムディレクティブ 描画関数とJSX プラグイン フィルター ツール 単一ファイルコンポーネント テスト TypeScript のサポート プロダクション環境への配信 スケールアップ ルーティング 状態管理 サーバサイドレンダリング セキュリティ 内部 リアクティブ
テンプレート構文 — Vue.js
ガイド 基本的な使い方 インストール はじめに Vue インスタンス テンプレート構文 算出プロパティとウォッチャ クラスとスタイルのバインディング 条件付きレンダリング リストレンダリング イベントハンドリング フォーム入力バインディング コンポーネントの基本 コンポーネントの詳細 コンポーネントの登録 プロパティ カスタムイベント スロット 動的 & 非同期コンポーネント 特別な問題に対処する トランジションとアニメーション Enter/Leave とトランジション一覧 状態のトランジション 再利用と構成 ミックスイン カスタムディレクティブ 描画関数とJSX プラグイン フィルター ツール 単一ファイルコンポーネント テスト TypeScript のサポート プロダクション環境への配信 スケールアップ ルーティング 状態管理 サーバサイドレンダリング セキュリティ 内部 リアクティブ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js用のバリデーションで人気の「VeeValidate」の使い方 | カバの樹
CODEPREP | Vue.jsで作り直すアコーディオンパネル
https://helloworld-blog.tech/javascript/vue-js-smooth-scroll%E3%81%A7top%E3%81%AB%E6%88%BB%E3%82%8B%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B