SlideShare a Scribd company logo
ライオンでも分かる
Vue.js
バイタリフィ
自己紹介
名前: ライオン
職業: フロントエンド/バックエンド
本業: 味噌汁エンジニア
好き: JavaScript, Ruby
Vue.jsとは
• MVVMの設計思想の元、構築された軽量フロントJSフレームワーク
• データとViewを紐づけるの面倒。だからデータバインディングしてくれ
るとViewを意識せずに実装に移れる。
参考資料
Vue.js概要?
http://qiita.com/asip2k25/items/bd4bdccd5201d542953c
とりあえず定番の作ってみた
Index.html
Index.js
ハマりどころ
• thisが分かりづらかった。
• $removeとかがよく分からなかった。
ライオンでも分かるVuejs
お、methodsとdataの中身が展開されてて、
+dataは$付きelも$付きで外出しなのか??
じゃあこうしてみたら展開される?
ライオンでも分かるVuejs
展開されない…
まぁそれもそのはず
privateMethodsなんてものはバインディングの対象になっていない
素直にmethodsの中に入れるか、
$optionsの中にアクセスしろって事なのかな?
ライオンでも分かるVuejs
アクセス出来たー!
次のハマり所$remove
$removeとは?
• Vue.jsが持っているインスタンスメソッド
ライオンでも分かるVuejs
最初参考にしていたサイトが
this.todos.removeになっていてハマった
ドキュメント読めば解決した
良かった所
• Methodが定義されていない場合、すぐに分かったので楽だった
• ドキュメントそんなに読まずともサックリと使う事が出来た
ここでキャッチしてくれてた
まとめ
• コードを小さく保てる
• フレームワークの構造自体が理解しやすい(使い方をそんなに意識し
なくて良い)
• いろいろな所で気を利かせてくれてる
• そんなにmethod多く無くて良い
ご清聴ありがとうございました!

More Related Content

PDF
Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話
PDF
Vue.js入門
PDF
はじめてのVue.js
PDF
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
PDF
DevLOVE Kansai KnockoutJS
PPTX
Vue.js 2.0を試してみた
PDF
Vue.jsでさくっとMVVM
PDF
React.js + Flux
Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話
Vue.js入門
はじめてのVue.js
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
DevLOVE Kansai KnockoutJS
Vue.js 2.0を試してみた
Vue.jsでさくっとMVVM
React.js + Flux

What's hot (20)

PDF
RailsでReact.jsを動かしてみた話
PDF
Knockout.js を利用したインタラクティブ web アプリケーション開発
PDF
AngularJSの高速化
PDF
いまさら聞けない!?Backbone.js 超入門
PDF
Brush up your Coding! 2013 winter
PDF
AngularJSでの非同期処理の話
PDF
Node.jsで始める Modern JavaScript Framework
PPTX
Angular js はまりどころ
PPTX
さわってみようReact.js、AngularJS(1系、2系)
PDF
jQueryを中心としたJavaScript
PDF
React Redux Redux-Saga + サーバサイドレンダリング
PDF
( ゚∀゚)o彡° Flux! Flux!
PDF
Start React with Browserify
PPTX
JavaScript(AngularJS)で作る iOS・Androidアプリ開発ハンズオン
PDF
作って分かるKnockoutJS@ALM11月
PDF
なぜ人は必死でjQueryを捨てようとしているのか
PDF
Progressive Framework Vue.js 2.0
PPTX
React を導入した フロントエンド開発
PDF
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
PPTX
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
RailsでReact.jsを動かしてみた話
Knockout.js を利用したインタラクティブ web アプリケーション開発
AngularJSの高速化
いまさら聞けない!?Backbone.js 超入門
Brush up your Coding! 2013 winter
AngularJSでの非同期処理の話
Node.jsで始める Modern JavaScript Framework
Angular js はまりどころ
さわってみようReact.js、AngularJS(1系、2系)
jQueryを中心としたJavaScript
React Redux Redux-Saga + サーバサイドレンダリング
( ゚∀゚)o彡° Flux! Flux!
Start React with Browserify
JavaScript(AngularJS)で作る iOS・Androidアプリ開発ハンズオン
作って分かるKnockoutJS@ALM11月
なぜ人は必死でjQueryを捨てようとしているのか
Progressive Framework Vue.js 2.0
React を導入した フロントエンド開発
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
Ad

Viewers also liked (20)

PPTX
クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
PDF
翻訳から始めるVue.js 入門
PPTX
Vue 2.0 + Vuex Router & Vuex at Vue.js
PPTX
JavaScriptフレームワーク入門にVue.jsはいかが?
PDF
One night Vue.js
PDF
Vue.js ハンズオン資料
PDF
Vue.js for beginners
PDF
Angular1&2
PDF
React入門-JSONを取得して表示する
PPTX
How to Build SPA with Vue Router 2.0
PDF
その時、Bowerに何が起こったのか
PDF
ES2015の今とこれから
PDF
WordPress REST API とリアクティブプログラミング
PDF
AWS+WordPressでつくるFirefoxアプリ
PDF
意識低くMeteor紹介
PPTX
three.jsを「遅い」と思わせないデータの扱い方
PDF
「シュキーン」のコード品質を支えるSonarQube
PDF
Vue.jsコンポーネントのススメ
PDF
Javascript MVVM with Vue.JS
PDF
海外で注目されてるJs framework “mithril”の特徴
クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
翻訳から始めるVue.js 入門
Vue 2.0 + Vuex Router & Vuex at Vue.js
JavaScriptフレームワーク入門にVue.jsはいかが?
One night Vue.js
Vue.js ハンズオン資料
Vue.js for beginners
Angular1&2
React入門-JSONを取得して表示する
How to Build SPA with Vue Router 2.0
その時、Bowerに何が起こったのか
ES2015の今とこれから
WordPress REST API とリアクティブプログラミング
AWS+WordPressでつくるFirefoxアプリ
意識低くMeteor紹介
three.jsを「遅い」と思わせないデータの扱い方
「シュキーン」のコード品質を支えるSonarQube
Vue.jsコンポーネントのススメ
Javascript MVVM with Vue.JS
海外で注目されてるJs framework “mithril”の特徴
Ad

Similar to ライオンでも分かるVuejs (8)

PDF
はじめてのVue.js
PDF
初めてのvue.js(2.x系)
PDF
Vue.jsで遊んでみよう
PDF
Vue.js 基礎 + Vue CLI の使い方
PPTX
チュートリアルではじめるVue.js
PDF
WordPress REST API と Vue.js を使ったフロントエンド開発
PDF
すごいぞVuetify!! 〜ポートフォリオを作ってみた〜
PPTX
Learn vue.js
はじめてのVue.js
初めてのvue.js(2.x系)
Vue.jsで遊んでみよう
Vue.js 基礎 + Vue CLI の使い方
チュートリアルではじめるVue.js
WordPress REST API と Vue.js を使ったフロントエンド開発
すごいぞVuetify!! 〜ポートフォリオを作ってみた〜
Learn vue.js

ライオンでも分かるVuejs