Help us understand the problem. What is going on with this article?

Vue.js + JavaScript 双方向データバインディング

はじめに

初めましての方は初めまして。
豚野郎です。

最近Vue.jsを勉強し始めた為、投稿してみました。
始めて行きます。

双方向データバインディングとは何か?

双方向データバインディングのお話をしていきます。

難しい説明をしようとすると自分もわからないので、自分が理解している範囲だと
・データを更新すればUIが更新
・UIを更新すればデータが更新
以上の2点が特徴です。

例を出すと、下記のように入力したと同時に画面にも文字が出てきます。

スクリーンショット 2020-03-26 23.19.01.png

解説

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: 'ばなな'
        }

スクリーンショット 2020-03-26 23.58.58.png

以上です。
ありがとうございました。

最後に

Markdownの書き方がわからなかった為、下記を参考にさせて頂きました。
https://qiita.com/shizuma/items/8616bbe3ebe8ab0b6ca1
感謝です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした