Vue.js(イベント修飾子・バインディング)(Laravel使用)
◆イベント修飾子
単純なクリックイベントなどを少し変更できる。
イベント修飾子一覧
<body>
<div id="sample">
<div @click.right="right">右クリック</div>
<div @click.left="left">左クリック</div>
</div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
const sample = new Vue({
el: '#sample',
methods:{
right: function () {
alert('右クリックしました。');
},
left: function () {
alert('左クリックしました。')
}
}
});
</script>
このように、左クリックと右クリックを別で検知できたりします。
イベント修飾子でよくつかう.stopと.preventについて参考記事をもとに学習しようと思います。
.stop
.stopをつけると、JavaScriptのstopPropagationを呼び出して、親要素への伝搬をとめてくれます。
<body>
<div id="sample">
<div @click="parent">
<button @click="child">クリック(stopなし)</button>
</div>
<div @click="parent">
<button @click.stop="child">クリック(stopあり)</button>
</div>
</div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
const sample = new Vue({
el: '#sample',
methods:{
parent:function () {
alert('親要素をクリックしました。')
},
child: function () {
alert('子要素をクリックしました。')
}
}
});
</script>
stopなしの場合、childメソッドの後にparentメソッドが呼ばれます。
stopありの場合、childメソッドのみ呼ばれます。
.prevent
.preventをつけると、JavaScriptのEvent.preventDefaultを呼び出して、意図しない画面遷移を防いでくれます。
<body>
<div id="sample">
<form @submit.prevent="submitPrevent">
<input type="text" v-model="keepText">
<button type="submit">submitPrevent</button>
</form>
<form @submit="submit">
<input type="text" v-model="text">
<button type="submit">submit</button>
</form>
</div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
const sample = new Vue({
el: '#sample',
data: {
keepText: '',
text: ''
},
methods:{
submitPrevent() {
alert(this.keepText);
},
submit() {
alert(this.text);
}
}
});
</script>
.preventなしのほうは送信されてしまって入力値がなくなるが、.preventがあるほうは送信されずに値は残る。
◆複数要素のバインディング
<body>
<div id="sample">
<label><input type="checkbox" v-model="val" value="1">1</label>
<label><input type="checkbox" v-model="val" value="2">2</label>
<label><input type="checkbox" v-model="val" value="3">3</label>
@{{ val }}
</div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
const sample = new Vue({
el: '#sample',
data: {
val: []
}
});
</script>
入力値の同期にはv-modelを使用します。今回の場合ですと、セレクトボックスが複数ですので、valの初期値を空配列にしております。参考記事
マウント要素外のイベント
windowやbodyはマウント要素外のため、addEventListenerを使って指定する必要がある。
window.addEventListener('動作', vueアプリ内メソッド)
Author And Source
この問題について(Vue.js(イベント修飾子・バインディング)(Laravel使用)), 我々は、より多くの情報をここで見つけました https://qiita.com/shibaHaya/items/ce68a92430ae96bb24f0著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .