よしたく blog

ほぼ週刊で記事を書いています

VueSchoolでVue.jsの基礎を学んでみた

Vue.js オンライン学習

VueSchoolという、Vueについて学べるサイトがあります。

vueschool.io

ここでは、Vue.jsについて様々なことを学べるコースが月$12で用意されています。全編英語ではありますが、字幕は用意されていますし、再生速度も変えることができました。Vue.jsについて学べる動画はあまり展開されていないので、試してみる価値はあるのかなと思います。

今回は無料で試せる「Vue.js Fundamentals」をやってみました。無料ということもあり、Vue.jsの基礎的なことが学べる内容でした。10レッスン、計27分だったので気分転換に眺めてみるのもいいと思います。

サンプルコードもGitHub上に展開されています。

github.com

【下書きの公開前に追記】

繰り返し見てまとめていましたが、英語で理解しづらい部分もあり困りました。並行して「Vue.js入門 基礎から実践アプリケーション開発まで」を読んでいたので少しずつ理解できましたが、「Vue.js Fundamentals」単体だと難しいかも知れません。他の言語から来た人だとわかりやすいのかな…

理解が深まってきて色々直したくなってきたので、動画から学べたこととして一回アップし供養します。

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.js入門 基礎から実践アプリケーション開発まで

【追記ここまで】

Vue.js Fundamentals

This Vue.js course will teach you and get you up and running with the fundamental concepts of Vue.js. Perfect if you haven't touched Vue before or you just getting started!

Get Started with Vue.js

Getting Started With Vue.js

  • CDNからVue.jsをサイトに追加する方法
  • Vueインスタンスの生成方法
    • el:'#id'の形式でマウントするポイントを指定
    • dataではVueインスタンスが使うデータを指定
  • v-modelで画面上の変数に動的に値を入力できる

https://vueschool.io/lessons/getting-started-with-vuejs

VVue.js Template Syntax And Expressions

  • VueのテンプレートでJavaScriptを実行する方法

https://vueschool.io/lessons/vuejs-user-events

Loops

  • v-forでループ処理を実行できる。

https://vueschool.io/lessons/vuejs-loops

User Inputs & Vue Devtools

  • v-modelで入力した値をdataに格納できる
  • Vue Devtoolsの紹介
    • ChromeとFireFoxで利用できる
    • 開発やバグを見つける際に便利

https://vueschool.io/lessons/vuejs-user-inputs-vue-devtools

User Events

  • v-onでイベントを設定できる
    • v-on:は@に置き換えられる
  • clickやkeyup.enterで様々なイベントに対応できる

https://vueschool.io/lessons/vuejs-user-events

Vue Methods

  • メソッドを利用することで冗長的なコードを排除できる
    • Vue Schoolの中では扱われていなかったが、computedとの違いはなにか気になった。

https://vueschool.io/lessons/vue-methods

Conditional Rendering

  • v-ifとv-elseを使って、動的にページを変化できる
    • dataの配下にstateを用意し管理している
    • この形が標準的に使われているのか気になった

https://vueschool.io/lessons/vuejs-conditionals

Attribute Bindings

  • v-bind でHTML属性をバインドできる

https://vueschool.io/lessons/vuejs-attribute-bindings

Dynamic Classes

  • v-bind:classにオブジェクトを渡すことで動的に変えることができる
  • v-bind:classには配列を渡すこともできる

https://vueschool.io/lessons/vuejs-dynamic-classes

Computed Properties

  • ComputedはVueの特徴の1つである
  • dataに対する処理をtemplateへ最新の変数として再利用できる

https://vueschool.io/lessons/vuejs-computed-properties

まとめ

  • 30分でVueの基礎を学べた

  • 英語がわからないと辛い

    • 辛かった
    • その他のコースも受講しようか迷ったが、英語なので一旦思いとどまる
  • methodとcomputedの違いを調べてみる