制作環境
Windows 10
Vue.js 2.6.11
Visual Studio Code
はじめに
この記事はプログラミングをはじめたばかりの素人が、できたことをメモするのに利用しています。
内容には誤りがあるかもしれません。
Laravelを独学で勉強中なのですが、Vue.jsについても知っておきたかったので、メモとして残してます。
双方向データバインディング (Two-way Data Binding)
Formのinput等で、Vueからデータを渡したり、Vueにデータを受け取ったりすること。
※一部省略
<input :value="sample" @input="sample = $event.target.value">
let app = new Vue({
el: '#app',
data () {
return {
sample: '',
}
},
})
上の場合は、Vueのsampleの値を:Valueに渡し、inputに入力された値をVueのsampleで受け取っています。
V-bind (省略形 : )とは
役割
属性とプロパティを紐付ける。
書き方
V-bind:value="sample"
省略形の書き方
:value="sample"
この場合はVueのsampleプロパティをvalueに紐付けている。
V-on (省略形 @ )とは
役割
イベントリスナー設置し、イベントを監視する。
書き方
V-on:click="指定のメソッド"
省略形の書き方
@click="指定のメソッド"
上の場合は、クリックイベントが発生した時に、Vueに記述してある指定のメソッド(関数)処理を行う。
V-model (省略形 ナシ )とは
form の input 要素またはコンポーネント上に双方向バインディングを作成する。
イメージとしては、V-bindとV-onを両方設置してくれる感じ。
書き方
v-model="test.sample"
★ポイント★
V-modelはタグによって設定されるV-bindとV-onの項目が異なる。
| タグ | V-bind | V-on |
|---|---|---|
| input,textarea | value | input |
| checkbox,radio | cheked | change |
| select | value | change |
記述サンプル
V-bindとV-onの場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
<title>サンプル</title>
</head>
<body>
<div id="app">
<input :value="sample" @input="sample = $event.target.value"> {{ sample }} <br>
</div>
<script>
let app = new Vue({
el: '#app',
data() {
return {
sample: 'テスト',
}
},
})
</script>
</body>
</html>
V-modelの場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
<title>サンプル</title>
</head>
<body>
<div id="app">
<input type="text" v-model="sample"> {{ sample }} <br>
</div>
<script>
let app = new Vue({
el: '#app',
data() {
return {
sample: 'テスト',
}
},
})
</script>
</body>
</html>
それぞれの特徴
V-bindとV-on
複雑な内容を設定できる。
細かく設定を行いたい場合に最適。
V-model
シンプルな記述で機能を実装できる。
修飾子が使用できる。
修飾子とは
追加で設定できる機能のこと。
修飾子 .lazy
リアルタイムに値を反映せず、フォーカスが外れた際に値を反映させる。
記述サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
<title>サンプル</title>
</head>
<body>
<div id="app">
<input type="text" v-model.lazy="sample"> {{ sample }} <br>
</div>
<script>
let app = new Vue({
el: '#app',
data() {
return {
sample: 'テスト',
}
},
})
</script>
</body>
</html>
修飾子 .numbar
値をを文字列ではなく、数値として変換してくれる。
inputに入る値は基本文字列として扱われるが、電話番号等数値として扱いたい場合にこれを付けると、文字列型を数値型に変換してくれる。
ただし、数値を全角で入力した場合は文字列として扱われ、数値型にならない。必ず半角で入力させる必要がある。
修飾子 .trim
入力された値から不要な空白(スペース)を取り除く。
入力値に不要な空白があるさいに、自動的に取り除いてくれる。