vue.js その１
0: ポイントと思った部分
new Vue({})でインスタンを作ってその中にオプションを書いていくワケだけど、
el:はどのhtml要素と繋がるのか
data:{}はどんなデータがあるのか
methods:{}はどんなメソッドがあるのか
があるのかを書く場所であるということ
１：基本的な使い方。データを表示する
<html>
<div id="id名">
<p> {{ データのプロパティ名}}</p>
</div>
</html>
<script>
new Vue({
el: '#id名'
data: {
プロパティ名: 値
プロパティ名: 値
プロパティ名: 値
}
})
</script>
elでdivタグ内全体が関連づく感じ（divじゃなくてもok）
データをたくさん作って置いて、プロパティ名で欲しいやつを表示。
ちなみに{{}}の部分は、省略形で本来は
<p v-text="プロパティ名"></p>
のようにhtmlの要素に対する命令は、タグ内にv-ディクティブ（命令）という形で記述するのが基本形。例えば、<h1>Hello world</h1>を先ほどのpタグ内に<h1>タグもテキストとして表示したいなら,v-textを使う。pタグの中にh1タグを作りたいならv-htmlを使う。
２：要素の属性をデータで指定する時はv-bindを使う。
基本形は次の形
<タグ名 v-bind:属性の種類="プロパティ名"> </タグ名>
ちなみにv-bindは良く使うので省略して＜タグ名 :属性="プロパティ名"> </タグ名>
と書くことも多い。
heref 要素
<a v-bind:href="url"></a>
img 要素
<img v-bind:src="hoge.png"></img>
ブロック要素やセル要素のalign
<p v-bind:align="プロパティ名"></p>
インラインのスタイル
<p v-bind:style="{color:プロパティ名}"></p>
<p v-bind:style="{fontSize:プロパティ名}"></p>
<p v-bind:style="{backgroundColor:プロパティ名}"></p>
普通cssはケバブケースで書くがjsなのでキャメルケースになっていることに注意。ちなみに最初も大文字なのはパスカルケース
３フォーム入力とデータをつなげる時は, v-model
基本形は
<タグ名 v-model="プロパティ名">
具体例
<input v-model="myNmae" placeholder="お名前">
<textarea v-model="myText"></textarea>
<label>
<input type="checkbox" v-model="myCheck">
チェックボックスは{{myCheck}}
</label>
※data:{ myCheck:flase},みたいな感じにしといて最初はfalse表示させといてチェックボックスをチェックしたらtrueに変わる。
文量かさばるので書かないが、複数チェックボックスの値を取得して表示したかったら、<label><input type="checkbox" value="red" v-model="myChecks">赤</label>って感じでvalue指定して、data:{}の中ではmyChecks:[ ]って感じで空の配列用意しといてあげればいい。
<input type="radio">や<select></select>やv-bind:disabledによるボタンの無効化等はここでは割愛。とにかくフォームで入力したものをv-modelを使ってdata:{}で受け取ることができるということだけは基本としておさえとこう
追記予定
