【脱jQuery】YouTubeから取得したプレイリスト(JSON)をVue.jsで表示してみた。limit!webの現場で働く人のブログこの広告は、90日以上更新していないブログに表示しています。2017-06-13【脱jQuery】YouTubeから取得したプレイリスト(JSON)をVue.jsで表示してみた。「昔作ったサイトをVue.jsで書き換えています。」的な記事をチラホラみかけるので私も勉強がてらに実装してみました。本記事では、YouTubeからプレイリスト(JSON)を取得するところの説明は省いております。(ググれば優秀な記事がたくさん出てくるので...)jQueryでつくったサンプルhttps://codepen.io/takumaro-web/pen/dNepxr今回はこちらのソースをVueに書き換えていきます。脱jQueryすっぞ。XHRライブラリは、「ajax」の代わりに「axios」を使用します。Vue.jsの公式ページでもオススメしているのでこちらでよいかと思います。});こんな感じで取得完了!直感的で結構シンプル!Angularの$httpっぽい!さっそくVueで書き換えていく。htmlから書き換えていく。手順1:生成させたいhtmlをとりあえずかく。テンプレート的なものになるので完成形をイメージしながらそれっぽくかく。Vueで操作するhtmlをかきかえていく。ループされていい感じに表示されればよいから「v-for」を使う。items」で指定する。aタグにはv-on:clickを指定し動画を選択できるようなイメージをもたせておく。hrefとsrcは、v-bindで指定しないと動かないのでこちらを指定しておく。</li></ul>これでなから(※)html側の準備は完了しました。なから:地元長野の方言で大体という意味。Vue.jsをつかってjsをかいていく。ターゲットとなる要素を指定し、dataには配列(items)を指定する。これでインスタンスが生成されたのでcreatedフックで、取得したデータ分だけfor文でまわしデータを格納していく。methodsを使用し、data(this)にアクセスする。今回は、methodsの中身は生のJavaScriptを記述してみました。JavaScriptの記述に合わせて、htmlも多少修正。}感想「とりあえず動くものが完成!!」https://codepen.io/takumaro-web/pen/owgbMm探り探りな部分もありましたが、なんとか形になりました。methodsの中身ももしかしたら、もっとうまいことできるのかもしれません...。やりたい事は明確なのに、記述方法がわからないということが多々あったので今後はこの辺を勉強していきたいです。アドバイスがある方は、是非コメントくださいませ。18:56【脱jQuery】YouTubeから取得したプレイリスト(JSON)をVue.jsで表示してみた。...2018-02-26【JavaScript】jQueryのthisを生のJSで表現してみる。jQueryのthisって便利だよね。これに対するこれって感じでめっ...2017-11-28もうclassの付与とか剥奪ならこんなに短くかけるのか。すみませんッ!ブログさぼってました。今回も大した内容ではな...2016-11-10【GA計測にも使える!】押された要素が何番目なのかを調べる方法。押された要素が何番目か調べる方法は、いくつかありますが個人...2016-09-26[JQuery]たった9行でInstagram(インスタグラム)の写真一覧をWebサイトに表示する。最新記事.htaccessによる少し複雑なリダイレクト備忘録Webの現場で使えるテクニック集まとめ(完全メモ帳)jQueryを使用しない現在地表示(ES6:JavaScript)【JavaScript】現在のURLを取得し、パラメータは除外するJSONジェネレータを作る(Vue.jsとかJavaScriptとか)月別アーカイブ注目記事はてなブログをはじめよう!paradox_tmさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。