Vue.jsでのdeep selectorの書き方 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Vuetifyのv-iconに自作SVGアイコンを(楽に)使いたい！！ - Qiita
TL;DR SVGアイコンをWebfontにしてstyle.cssをインポートすると <v-icon>{名前}</v-icon>で使えるようになるよ！ Vuetifyのリファレンスがかなりアレ Vuetifyのv-iconってFontAwesomeとかのアイコンを利用できるじゃないですか。 でも自作のSVGアイコンも使いたいですよね。 一応リファレンスにやり方が載っています。 Installing Icons — Vuetify.js 簡単に訳すと、 SVGファイルを単一コンポーネントにしてVue.useの段階でセットすれば$vuetify.icons.{名前}で利用できるよ！ ということです。 追加したいアイコンが100個ぐらいあった場合、1個1個単一コンポーネントにしてVue.useで読み込ませるのは非常に不便ですしコードが長くなるしで割と最悪です。 そこで色々調べていたところ,このよ
Vue.jsでコンポーネント親子間の値の受け渡し | webOpixel
Vue.jsでコンポーネント親子間の値の受け渡し Vueの初歩的なことになりますが、親子関係のコンポーネントで値の受け渡しをやってみます。 投稿日2017年03月28日 更新日2017年04月10日 ※Vue 2.2 を使用します。 親から子にデータ渡す 親の方では子のコンポーネントを読み込みテンプレートで配置するだけです。 後で子コンポーネントで設定する「message」に値を入れます。 parent.vue <template> <div> <child message="Hello Vue!!"></child> </div> </template> <script> import Child from './child.vue'; export default { components: { Child } } </script> 子コンポーネントではpropsに「message」
Vue.js2.x系で親から子コンポーネントにデータを渡す方法
Vue.jsの2.0がリリースされたということで、1年半ぶりに勉強している。 そんな中、なぜか親コンポーネントから子コンポーネントにデータを渡すことができずハマりかけたので共有する。 ちなみにvue-cliを使っているので、次のようなディレクトリ構成になっている。 . ├── src │ ├── App.vue │ ├── assets │ │ ├── icon.png │ ├── components │ │ ├── Card.vue │ │ └── TimeLine.vue │ └── main.js └── static └── data.json vue-cliの使い方は、次の記事を参考にしてほしい。 親コンポーネントから子コンポーネントにデータを渡す Compotentsの関係は、App.vue > TimeLine.vue > Card.
Vue.jsで動的にrefにアクセスする方法 - Qiita
#refに変数を使いたい templateにはv-bindディレクティブを使ってv-bind:refや:refと書けばいいことは分かるけど、それに対してscriptでどうアクセスするか分からなくて少しスタックしたのでメモ。 公式にさらっと書いてあるんだけど、分かりづらかった。 v-for で要素/コンポーネントに対して使用されるとき、登録された参照は DOM ノードまたはコンポーネントインスタンスを含んでいる配列になります。 https://jp.vuejs.org/v2/api/#ref 静的なDOMを取得する場合はthis.$refs.hogeだけど、動的に指定した場合は配列として取得できる。 つまりthis.$refs[hoge]でOK。 <template> <div> <div v-for="item in items" :key="item.id"> <input type="
カスタムスクロールディレクティブの作成 — Vue.js
最終更新日: 2018年3月20日 基本的な例Web サイト上でスクロールイベントと連動するアニメーションなど、ちょっとした振る舞いを加えたくなる時は多くあります。やり方は多くありますが、最も少ないコード量と依存で実現できる方法はおそらく、特定のスクロールイベントを発火させるフックを作成する、カスタムディレクティブを使用することでしょう。 Vue.directive('scroll', { inserted: function (el, binding) { let f = function (evt) { if (binding.value(evt, el)) { window.removeEventListener('scroll', f) } } window.addEventListener('scroll', f) } }) // main app new Vue({ el: '
書き方で変わる?! Vue.jsでthisのスコープを調査した - タダケンのEnjoy Tech
こんにちは! タダケン(@tadaken3)です。 最近、Vue.jsを勉強しつつ、WEBサービスを作っています。 Vue.jsを勉強している中で、Vueインスタンスのmethodsなどで、インスタンスのthisを参照しようとした場合、うまく参照できないパターンがあり苦労しました。 自分の理解を深めるためにVue.jsでのthisの参照パターンについてまとめてみました。 まだ、勉強中の身なので、もし間違えや認識違いなどあれば、ご指摘いただけますと思います。 Vue.jsの基本となるサンプルコード まずは基本となるサンプルコードです。 ボタンを押すと、incrementメソッドが実行されて、countの値をひとつずつ増やしてくシンプルなVueのコードを用意しました。こちらのコードをベースにthisのスコープがどのように変わっていくのか確認していきます。以降のサンプルでは、JavaScript
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsのカスタムディレクティブの使い方とフック関数のタイミングを理解する - Qiita
vueでスクロール検知 - web