Vue.js

イベントとはボタンやリンクをクリックしたり、マウスのホイールを動かしてページをスクロールさせたり、主にユーザーの操作をきっかけとしてブラウザの中で発生する出来事のこと。

「クリックイベント | Click event 」

削除ボタンをクリックするたびに在庫数が１ずつ減って、在庫が０にあると表示が「在庫切れ」に変わる。

書式：<要素名　v-on:イベント名="ハンドラ名">

書式：methods:{ハンドラ名：関数オブジェクト｝

HTML <div id="app">
<template v-if="stock" >
<span class="red">残り{{stock}}個</span>
<button v-on:click="onDeleteItem">削除</button>
</template>
<template v-else>在庫切れ</template>
</div>

JavaScript var app = new Vue({
el: '#app',
data: {
stock: 10
},
methods : {
onDeleteItem: function(){
this.stock--;
}
}
});

「コンポーネントの外側のイベントハンドリング | Event handling outside the component 」

v-onディレクティブでイベントハンドラを登録できるのは、elオプションに指定したコンポーネントのスコープ内にある要素に限られる。つまり＜div id="app"＞＜/div＞の外側にある要素や、ウインドウ自体に発生するイベントはv-onで検知出来ない。| Event handlers can be registered with the v-on directive only for elements within the scope of the component specified in the el option. In other words, elements outside

and events that occur in the window itself cannot be detected by v-on.

ページが読み込まれたときに発生するloadイベント、ウインドウサイズが変わったときに発生するresizeイベント、ページをスクロールさせたときに発生するscrollイベントなどが該当する。| This includes the load event that occurs when the page is loaded, the resize event that occurs when the window size changes, and the scroll event that occurs when the page is scrolled.

ウインドウの横幅：{{width}}

ウインドウの高さ：{{height}}

今回はresizeイベントを使いました。ウインドウの幅や高さを変えて左上の「更新ボタン（マル矢印）」を押してみましょう。| This time I used the resize event. Change the width and height of the window and press the "update button (round arrow)" on the upper left.

HTML <div id="app2">
ウインドウの横幅：{{width}}
ウインドウの高さ：{{height}}
</div>

JavaScript var app2 = new Vue({
el:'#app2',
data: {
width: window.innerWidth,
height:window.innerHeight
},
created: function(){
// イベントハンドラを登録
　　　addEventListener('resize',this.resizeHandler);
},
beforeDestroy: function(){
// イベントハンドラを解除
removeEventListener('resize',this.resizeHandler);
},
methods: {
// イベントハンドラ
resizeHandler: function($event){
// 現在のウインドウサイズでプロパティを更新
this.width = $event.target.innerWidth;
this.height = $event.target.innerHeight;
}
}
});

イベントハンドラが受け取る引数

イベントが発生したとき、ブラウザはイベントオブジェクトという特別なオブジェクトを生成してイベントハンドラの引数で渡してくれます。イベントオブジェクトの中には、イベントが発生したDOMノードそのものを表すtargetオブジェクトや、そのイベントに関する様々な情報が格納されています。

Vueでは$eventという変数名でイベントオブジェクトを受け取ります。resizeイベントの発生元はwindowオブジェクトなので、targetにはwindowオブジェクトが代入されています。そのため、windowオブジェクトが持っているinnerWidthやinnerHeightといったプロパティをtargetから引き出すことができます。

この本を参考に学び、完成させることができました。しかし、プログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^) 身に付けて消えないスキルがこの値段。買っておいてよかったです。

やっぱりプロの人から直接学びたいという方はこちら。| Click here if you want to learn directly from professionals

キャリアアップに必要なスキルを取得しよう。| Get the skills you need to advance your career.

オンラインで受講ができるスクールですので、全国どこからでも。 | Since it is a school where you can take classes online, you can take it from anywhere in the country.

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー