もう一度vuejsを学ぶ。5/26

まだ、理解できていないので、もう一度学び直します。その時にわかったことをまとめて、忘備録として行こうと思います。いま学んでいる人や、忘れちゃってるなという僕と同じようなプログラミング初心者に向けて書いていきます。

メソッドを使用して、データ内のmessageを表示する。

<div id="app">
 <p>{{ message }}</p> //data内のmessageに入っている’’を表示
 <p>{{ sayHi() }}</p> //sayHiメソッドを使用。
</div>

new Vue({
 el: "#app",
 data: {
 	message:'Hello World!',
 },
 methods: {
 	sayHi: function() {
 	return this.message;
   }
 }
})

ディレクティブについて。

Vuejsには専用の属性がある 。それをディレクティブという。v-〇〇で書くやつ。

<div>
      <a v-text="message"></a> //messageを表示できる
</div>

データの紐付けをする時

v-bindディレクティブ

<div id="app">
 <a :href="url">Google</a> //v-bind:href→:href
</div>

new Vue({
 el: "#app",
 data: {
 	url:'https://google.com'
 }
})

動的に表現できる。紐付けするイメージかな。

以下応用編

<div id="app">
  <a :[attribute]="url">Google</a> //[]で囲うことで、使うことも可能
  <a :href="urlTwitter" :id="number">Twitter</a> //idの付与も可能
//<a v-bind:"{href:urlTwitter, id:number}">Twitter</a>とオブジェクト形式にすることも可能
//もしくは、
//<a v-bind:"twitterObject">Twitter</a>も可能
</div>

new Vue({
 el: "#app",
 data: {
 	url:'https://google.com',
   urlTwitter: 'nttps://twitter.com',
   number: 31,
   attribute: 'href',
   twitterObject: {
        href:'nttps://twitter.com',
        id: 31
   }
 }
})

マウスをクリックした時に動かすイベントとか

v-onディレクティブ

マウスをクリックした、動いた、エンターキーを押した。時（DOMのイベント）などの時に活用するディレクティブ

v-on:click//clickはDOMイベント

<div id="app">
 <p>現在{{number}}回クリックされている</p>
 <button　v-on:click= "number += 1">カウントアップ</button>
//こう直せる
//<button　v-on:click= "countUp">カウントアップ</button>
//引数を入れたい時は(〇〇)をつける。なければ()なくてもいい。※1
//<button　v-on:click= "countUp(〇〇)">カウントアップ</button>
</div>

new Vue({
 el: "#app",
 data: {
 	number:0
 },
 methods: {
 	countUp: function() {
   	this.number += 1
		}
 }
})

イベントリファレンス | MDN

↑DOMイベント一覧

※1の場合、引数の値の書き方

<div id="app">
 <p>現在{{number}}回クリックされている</p>
 <button　v-on:click= "countUp(2)">カウントアップ</button>
</div>

new Vue({
 el: "#app",
 data: {
 	number:0
 },
 methods: {
 	countUp: function(times) {
   	this.number += 1 * times
		}
 }
})

省略するときは＠にする。

@click="countUp"

イベントオブジェクトとは

イベントを起こした時の全ての情報。クリックした位置とかの情報。

dataのmessageをそのまま自動で変更したい時。

双方向バインディングv-modelを使う。
バインディング：結合されている。という意味
データと結合されている関係。

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

new Vue({
 el: "#app",
 data: {
 	message: 'hello'
 }
})

テンプレート側からモデルのデータを変更できる。更新することなく、入力するだけで変更される。

クリックしていったら、表示が変わる動的な表現の時

動的なデータを表現するには、computedプロパティを使う。

<div id="app">
 <h1>{{ counter }}</h1>
 <button @click="counter += 1">+1</button>
 <p>{{ counter > 3 ? '3より上' : '3以下'}}</p> //三項演算子で動的な表現ができる
</div>

new Vue({
 el: "#app",
 data: {
 	counter: 0 
 }
})

これをもう少し綺麗に書く。

※データは動的な表現ができない…データは' 'や[ ]で空文字を入れておくこと。なので、動的な表現はcomputedプロパティを使うことで、HTMLにはプロパティっぽく書くことができる。

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

new Vue({
 el: "#app",
 data: {
 	counter: 0 
 },
 computed: {
 	lessThanThree: function() {
   	return this.counter > 3 ? '3より上' : '3以下'
   }
 }
})

メソッドとの違いは？もし書くなら{{ lessThanThree( )}}とするようにカッコをつけて、メソッドを書く。computedはカッコが要らない。

また、メソッドは再描画のたびに実行されてしまうし、テンプレートの更新で更新されてしまうらしい。つまり、余分な動作が多いらしいので、動的な表現はcomputedプロパティにする。

データが変わった時に使うのは、ウォッチャ。

振り返りは以上。

次は、前回タスク分割した内容をさらにタスク分割して見ようと思う。