Vue.jsの実行環境を準備
ローカル環境にすでにdockerは入っているもののdocker慣れてないので最初から環境構築しない方が良いかなと、
良い感じに勉強できる環境を探してみました。
検索すると色々出てきますが、個人的にはCode SandBoxが一番使いやすかったです。
ファイル一覧・コード記述・Webブラウザの3構成でコンソールも見えるので、
最初から基礎コードが入った状態で展開されるので、僕みたいに最近勉強し始めた!という方にはオススメです。
個人的に感じたデメリットとしては、基礎コード&ファイルが入っている状態から始まるので、他のフロントエンドに知見が無い初心者には相応にハードルが高い気がします。
Reactとかがある程度できる人であれば、何の問題もなさそう。
って言いながら、ここでは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とかもう意味不明で大変で途中挫折。
ただ一回挫折したからこそ分かってくる部分も多く、改めて勉強を始めてみると意外と頭に入ってきますね。
そして、本家サイトの説明が非常に分かりやすい。
勉強その1:DOMとの関連付け
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
el部分にレンダリングしたい指定した部分にレンダリング。
一般的ではないかも知れないが、class指定(.className)や子孫セレクタ(#idName.className)でも表示された。
勉強その2:マスタッシュ構文
<div id="app">
{{ message }}
</div>
二重括弧で囲まれた{{ message }}の部分のこと。
ここには記述されたdata部分が表示されるが、HTML内の属性としては使えない。
属性を操作したい場合は、v-bindなどVue処理を使って処理を行なう。
ちなみに、{{ message.split(”).reverse().join(”) }}こういった表記も可能だが、算出プロパティ(後述)を使うのがベスト。
2回以上同じ処理が出てきた場合、煩雑になり管理できなくなる。
勉強その3:データの宣言
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()
}