VueJSを学ぶ（１）

2021-06-16

vue2.0, vue

VueJSをラーニング！

現場でNuxtとやらを使ってるんだけど、そもそもVueを知らんので最初から学んでいく

教材

Udemy(超Vue.js 2 完全パック (Vue Router, Vuex含む)
すこし早口で何言ってんのかよくわからんこと多いけど手を動かしながら見れば何となくわかる。
ライブならともかく、教材として売るならもっときちんと作ってほしいよね。。。

メモ

Vueインスタンスの宣言


1
2
3
4
5
6
7
8
9
10

<div id=app> </div>

<script>
new Vue({
  el: '#app'
  data: {
    foo: "FOO!"
  }
})
</script>

Vueの処理はすべてこの中に書く
new Vueの中身を「Vueインスタンス」タグ記法の部分を「テンプレート」と呼ぶらしい

{{ message }} と v-text="message" は同じ
変数 message が更新されると再描画される
再描画したくないときは v-once を使う
dataは別に必須じゃない
インスタンス変数の宣言部？

v-bind

要素に変数を充てたいときに使う


1
2
3
4
5
6
7
8

<a v-bind:href="url">google</a>

new Vue({
  data: {
    url: 'http://ggibucket.com'
  }

})

"v-bind:xxx" は省略して ":xxx" とすることができる
"v-bind:href" は "v-bind:[xxx]" として変数を宛てることができる
"v-bind:xxx="..." v-bind:yyy="..." はv-bind="zzz"とまとめることができる


1
2
3
4
5
6
7
8
9
10
11
12
13
14

<a :href="google">google</a>
<a :[attr]="yahoo">yahoo</a>
<a v-bind="ggi">ggi</a>
new Vue({
  data: {
    attr: "href"
    yahoo: "https://yahoo.co.jp"
    google: "http://google.co.jp"
    ggi: {
      href: 'http://ggibucket.com',
      target: '_blank'
    }
  }
})

v-on

イベントが発生したときに処理をはさみたいときに使う
要はaddEventListener

イベントリファレンス

v-on:clickは省略して @click と書ける


1
2
3
4
5
6
7
8
9
10
11
12
13

<button v-on:click.stop="someFunction(1, $event)"> なんかする </button> 
<a v-on:click.prevent href="path/to/link">no jump</a> 

<script>
new Vue({
  el: '#app',
  methods: {
    someFunction: function(arg, event) {
      this.message = ...
    }
  }
})
</script>

methods
関数をツラツラ書くところ
規模がちょっとでかくなったらスパゲッチーになりそう
$event
イベント引数を別の引数と一緒に使うときは $event を渡す
単独のときは記述不要
メソッド側は event で受け取る
.stop .prevent
stopPropagation やpreventDefault のためだけにメソッドを書かなくて済む
重なったオブジェクトにマウスイベントなどを伝播點せたくないときに使う

v-model

双方向にデータをバインドさせることができる
v-modelに指定された変数が変更されるとその都度レンダリングされる


1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="app">
  <input type="text" v-model="message">
  <h1>{{ message }}</h1>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'こんにちは'
  }
})
</script>

dataでは表現できない、何かに依存した値を表現したいときに使う
プロパティなので何かをreturnする関数にする必要がある。
メソッドだけどメソッドじゃないので()は不要
methodsでも同じことができるけど、methodは関係ない値が変更されたときも再実行される
対してcomputedは「依存関係に基づいてキャッシュされる」らしい
computedでできることはcomputedでやれってことだと思う。多分


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div id="app">
  <p>{{ lessThanThree }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  computed: {
    lessThanThree: function() {
      return this.counter > 3 ? "3以上" : "3イカ";
    }
  }
})
</script>

watch

値を監視して、変更があったときに何かしたいときに使う


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div id="app">
  <p>{{ counter }}</p>
  <button @click="counter += 1">+1</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  watch: {
    counter: function() {
      var vm = this;
      setTimeout(function() {
        vm.counter = 0
      }, 1000)
    }
  }
})
</script>