例

エル：例

new Vue({
    el: '#app'
})
// 实例与页面挂载点一一对应
// 一个页面中可以出现多个实例对应多个挂载点
// 实例只操作挂载点内部内容

データ：データ

補間変数の発現のためのデータを提供します

データ内のデータは、VUEの例を介して直接的または間接的であってもよいです。

新しいVueのメソッドセット括弧内（{}）

方法：方法

結合事象は、V-にイベント

イベントのための方法を提供する方法

区切り文字：セパレータ

ときのVUE {{}}テンプレート構文と時間の競合、設定を変更することができます

new Vue({
    el: '#app',
    data: {\},
    delimiters: ['[{', '}]'],  // 修改插值表达式符号})

デリミタはダイアディックアレイ、左側の最初の要素、第二要素の右側です。

フィルタ：フィルタ

フィルタフィルタのメンバーで定義された方法
複数の値は、フィルタが追加受信補助パラメータを有することができ、濾過されてもよいです
フィルタリングされた結果は再び下で濾過を行うことができる（フィルタリングは、直列に実行されてもよいです）

<body>
    <div id="app">
        <!--
        总结：
        1、在filters成员中定义过滤器方法
        2、可以对多个值进行过滤，过滤时还可以额外传入辅助参数
        3、过滤的结果可以再进行下一次过滤(过滤的串联)
        -->
        <p>{{ num | f1 }}</p>
        <p>{{ a, b | f2(30, 40) | f3 }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 10,
            a: 10,
            b: 20,
        },
        filters: {
            // 传入所有要过滤的条件，返回值就是过滤的结果
            f1 (num) {
                console.log(num);
                return num * 10;
            },
            f2 (a, b, c, d) {
                console.log(a, b, c, d);
                return a + b + c + d;
            },
            f3 (num) {
                return num * num;
            }
        }
    })
</script>

計算：コンピューティング

計算された属性は、（そうでない場合、エラーが繰り返し文が報告され、データに宣言することはできませんどのプロパティ）を計算プロパティにメソッドを宣言することができます
method属性がページをレンダリングする必要があり、結合方法の属性値を開始します方法（結果）は、戻り値の結合方法（結果）です。
監視されますバインドされた方法で表示されるすべての変数は、再更新の値の変化は、プロパティメソッドの値を更新するために、コールバックメソッドを結ぶだろう
複数の変数の問題に従属変数値を：一般的に解決するために使用

<body>
    <div id="app">
        <input type="number" min="0" max="100" v-model="n1">
        +
        <input type="number" min="0" max="100" v-model="n2">
        =
        <button>{{ result }}</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            n1: '',
            n2: '',
            // result: 0,
        },
        /**
         * 总结：
         * 1、computed计算属性可以声明 方法属性（方法属性一定不能在data中重复声明）
         * 2、方法属性 必须在页面中渲染，才会启用绑定的方法，方法属性的值就是绑定
         * 方法的返回值
         * 3、绑定的方法中出现的所有变量都会被监听，任何一个变化发生值更新都会
         * 重新出发绑定方法，从而更新方法属性的值
         *
         * 一般用来解决的问题：一个变量值依赖于多个变量
         */
        computed: {
            result () {
                console.log('被调用了');
                n1 = +this.n1;
                n2 = +this.n2;
                return n1 + n2;
            }
        }
    })
</script>

時計：モニター

リスナーのプロパティがデータ内で宣言する必要があり、この方法は、リスナーの戻り値を必要としません。
リスニング）（メソッド名属性名を聞いています
前の値：;：N：O現在の値2つのリスナーのコールバックがあります。
解決済み：この問題は、変数のいくつかの変数に依存
更新メソッドが呼び出されたプロパティ

<body>
    <div id="app">
        <p>姓名：<input type="text" v-model="full_name"></p>
        <p>姓：{{ first_name }}</p>
        <p>名：{{ last_name }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            full_name: '',
            first_name: '未知',
            last_name: '未知',
        },
        watch: {
            // n是监听的属性当前值，o是其上一次的值，监听的属性值每次更新都会回调监听方法

            /**
             * 总结：
             * 1、监听的属性需要在data中声明，监听方法不需要返回值
             * 2、监听的方法名就是监听的属性名，该属性值发生更新时就会回调监听方法
             * 3、监听方法有两个回调参数：当前值，上一次值
             *
             * 解决的问题：多个变量值依赖于一个变量值
             */
            full_name(n, o) {
                name_arr = n.split('');
                this.first_name = name_arr[0];
                this.last_name = name_arr[1];
            },
        }
    })
</script>

テンプレート：テンプレート

テンプレートのルートコンポーネントは、マウントポイントのテンプレートを置き換えることです

ローカルまたはグローバルテンプレートコンポーネントは、マウントポイントのテンプレートを置き換えることです

小道具：

サブアセンブリ小道具カスタムコンポーネント属性（文字列を埋めるために、リフレクションを使用するが、時間変数として直接使用することができる）によって

コンポーネント：登録コンポーネント

ローカルサブアセンブリを使用してサインアップし、一時的なプレースホルダを作成することと同じではマウント実行した後、テンプレートのポイントに置き換えられます

メンバーの例

例