Vue.jsの実行環境を準備

ローカル環境にすでにdockerは入っているもののdocker慣れてないので最初から環境構築しない方が良いかなと、
良い感じに勉強できる環境を探してみました。

検索すると色々出てきますが、個人的にはCode SandBoxが一番使いやすかったです。

ファイル一覧・コード記述・Webブラウザの３構成でコンソールも見えるので、
最初から基礎コードが入った状態で展開されるので、僕みたいに最近勉強し始めた！という方にはオススメです。

個人的に感じたデメリットとしては、基礎コード＆ファイルが入っている状態から始まるので、他のフロントエンドに知見が無い初心者には相応にハードルが高い気がします。

Reactとかがある程度できる人であれば、何の問題もなさそう。

codesandboxキャプチャ

って言いながら、ここではCodePenを使っていますw

Code PenでVueの実行環境を準備

Code Sand Boxを最初に使ってしまったので、Code Penは戸惑いました..
車輪マークからvueを入れて、サンプルコード入れなきゃいけない..。

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

これで準備完了！

See the Pen vue01 by Kotacr (@qurimuk) on CodePen.0

Vue.js を初めてみる

最初CLIから入ったんですが、nodeとかもう意味不明で大変で途中挫折。
ただ一回挫折したからこそ分かってくる部分も多く、改めて勉強を始めてみると意外と頭に入ってきますね。

そして、本家サイトの説明が非常に分かりやすい。

勉強その１：DOMとの関連付け

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

el部分にレンダリングしたい指定した部分にレンダリング。
一般的ではないかも知れないが、class指定（.className)や子孫セレクタ（#idName.className）でも表示された。

勉強その２：マスタッシュ構文

<div id="app">
  {{ message }}
</div>

二重括弧で囲まれた{{ message }}の部分のこと。
ここには記述されたdata部分が表示されるが、HTML内の属性としては使えない。

属性を操作したい場合は、v-bindなどVue処理を使って処理を行なう。

ちなみに、{{ message.split(”).reverse().join(”) }}こういった表記も可能だが、算出プロパティ（後述）を使うのがベスト。
2回以上同じ処理が出てきた場合、煩雑になり管理できなくなる。

勉強その３：データの宣言

data部でマスタッシュ構文やその他イベント処理で利用するデータを宣言。
カンマ区切りで追加していく。

宣言いろいろとマスタッシュ。


data: {
  message: 'Hello Vue!', // {{message }},
  message_add: 'Hello Vue! ' + new Date().toLocaleString(),
  hoge_message:{ 'hoge': 'fuga'}, // {{ hoge_message.hoge }}
  hoge_array: [
    {'hoge': 'fuga'}, // {{ hoge_array[0].hoge }}
    {'hoge': 'fugaaa'}, // {{ hoge_array[1].hoge }}
    {'hoge': 'fuga'} // {{ hoge_array[2].hoge }}
  ],
  number: 1,
  boolean: false,
  array: [],
  error: null
}

vue処理したいデータはここに記述していく。

See the Pen vue02 by Kotacr (@qurimuk) on CodePen.0

ちなみに、下記のような形で式を入れておくことも可能ではある。

data: {
  message_add: 'Hello Vue! ' + new 　Date().toLocaleString()
}

 

Similar Posts