はじめに
初めましての方は初めまして。
豚野郎です。
最近Vue.jsを勉強し始めた為、投稿してみました。
始めて行きます。
双方向データバインディングとは何か？
双方向データバインディングのお話をしていきます。
難しい説明をしようとすると自分もわからないので、自分が理解している範囲だと
・データを更新すればUIが更新
・UIを更新すればデータが更新
以上の2点が特徴です。
例を出すと、下記のように入力したと同時に画面にも文字が出てきます。
解説
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>双方向データバインディング</title>
</head>
<body>
<!-- データからUIに反映 -->
<div id="app">
<p>{{ message }}</p>
<!-- UIからデータに反映 -->
<p><input type="text" v-model="message"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
{{ message }}部分に入力された文字が表示されます。
テキストボックスでv-modelを使うと、
input要素やselect要素に入力した値を使うことができます。
次がJSです。
js/main.js
(function() {
'use strict';
new Vue({
el: '#app',
// モデルにデータを保持
data: {
message: ''
}
})
})();
Vueインスタンス(new Vue)を作成すればVue.jsは動きます。
elはelementsの略で、今回idを指定しました。
dataには先ほどv-modelで指定したmessageを書いていきます。
もし最初からデータを保持させたい場合(例.ばなな)、下記を追記します。
// モデルにデータを保持
data: {
message: 'ばなな'
}
以上です。
ありがとうございました。
最後に
Markdownの書き方がわからなかった為、下記を参考にさせて頂きました。
https://qiita.com/shizuma/items/8616bbe3ebe8ab0b6ca1
感謝です。