AGFA

関心が赴くままに

Vue.jsの勉強1日目

Vue.js

f:id:kanekok13:20170816142016p:plain

Vue.js初心者の僕が、
Vue.jsを使いこなせるようになるまで
地道に頑張ります。
このブログはメモ的に使っていきますので、
よろしくお願いします。

※毎日更新ではありません。 1日1個とも限りません

本日の課題 ①

最初はいつもの「Hello Vue!」の表示、でいきましょう。（spanタグで囲う）

①の解答

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

<script src="vue/vue.min.js"></script>
<script>
var ap = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>
</body>

f:id:kanekok13:20170816212026p:plain

el:で対象となるHTML要素を取得！

ここでは、<div id="app">が対象。

data:はバインドする値！

ここでは、{{ message }}のmessageと紐づけられた。

バインド (bind)とは
あっちとこっちを紐付ける、関連付ける、割り当てることです。 http://wa3.i-3-i.info/word12448.html

本日の課題②

② spanタグにクラス属性testをつける

②の解答

<body>
<div id="app">
  <span v-bind:class="className">
    {{ message }}
  </span>
</div>

<script src="vue/vue.min.js"></script>
<script>
var ap = new Vue({
  el: '#app span',
  data: {
    message: 'Hello Vue!',
    className: 'test'
  }
})
</script>
</body>

f:id:kanekok13:20170816215205j:plain

el:のHTML要素取得にはCSS的な要素の指定でOK！

この部分el: '#app span',

data:の中には様々な指定ができる！

<span v-bind:class="className">とclassName: 'test'が結びついている。

スタイルも当てられる！

<div id="app">
  <span v-bind:style="style" v-bind:class="className">
    {{ message }}
  </span>
</div>

<script src="vue/vue.min.js"></script>
<script>
var ap = new Vue({
  el: '#app span',
  data: {
    message: 'Hello Vue!',
    className: 'test',
    style: "color: red"
  }
})
</script>

f:id:kanekok13:20170816215517j:plain

勉強になりました。

次回予定

ループと条件分岐について

具体的には次回考えます。