24. watch

18979 ワード
vue.js テキストリンク
隊長の板橋張基孝のVue.js入門インフラストラクチャコースを聞いて内容を整理した.
毎日20分ちょっとVuejs頑張れ.
IDE: Visual Studio Code
クロムビュー開発者ツール:Vue.js devtools

時計とは何ですか。


特定の論理のビューインスタンスのプロパティは、データの変化に基づいて実行できます.
実習を通して了解する.

1.ボタンを押して数字を増やす。


「追加」ボタンを押すとnumデータが増加します.
ひげカッコを使ってスクリーンに直接噴き出します.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
       <button v-on:click="addNum">increase</button>
       {{ num }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                num : 10
            },
            methods: {
                addNum: function(){
                    this.num = this.num + 1;
                }
            }
        })
    </script>
</body>
</html>

2.数字が増加した場合、logを出力しようとします。


出力logの関数logTextを作成し、メソッドに追加します.
            methods: {
                addNum: function(){
                    this.num = this.num + 1;
                },
                logText: function(){
                    console.log('changed');
                }
            }
watchは、ターゲット変数名と関数を作成します.
            watch: {
                num : function(){
                    this.logText();
                }
            },
watchという属性は、基本的にデータに宣言された変数に対して使用されます.
numが増加するたびに、コンソールにログが表示されます.

3.数字が12の場合、文字列を画面に出力


dataに文字列変数numTextを作成します.
            data: {
                num : 10,
                numText : ""
            },
12の場合、logText関数にif文を追加してnumTextを出力します.
            methods: {
                addNum: function(){
                    this.num = this.num + 1;
                },
                logText: function(){
                    console.log('changed');
                    if(this.num == 12 ){
                        this.numText = "num is 12"
                    }
                }
            }
画面に{{}ヒゲカッコを使用してnumTextを出力する場所に書きます.
    <div id="app">
        {{ numText }}
       <button v-on:click="addNum">increase</button>
       {{ num }}
    </div>
ボタンを押すと数字が12の場合、「num is 12」文字列が出力されます.

実践の完全なコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        {{ numText }}
       <button v-on:click="addNum">increase</button>
       {{ num }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                num : 10,
                numText : ""
            },
            watch: {
                num : function(){
                    this.logText();
                }
            },
            methods: {
                addNum: function(){
                    this.num = this.num + 1;
                },
                logText: function(){
                    console.log('changed');
                    if(this.num == 12 ){
                        this.numText = "num is 12"
                    }
                }
            }
        })
    </script>
</body>
</html>
次のレッスンではwatchプロパティとcomputedプロパティを比較します.
Go web 1. Web Handler, JSON
Blackberryリード蜂地図開発例:アドレス逆符号化