ディレクトリ

まず、命令書
第二に、条件付き命令
- ケース条件付き命令（強調）
第三に、ループ命令
- ケースの命令サイクル：
第四に、区切り文字
ファイブフィルタ
第六に、計算物性
七、モニタープロパティ
八、バブルソート
九、岬命令

まず、命令書

構文：Vモデル=「可変」は、可変Vモデルバインドされた制御値がフォーム要素の値です。

共通フォーム要素：V-モデル値との直接バインド変数の制御値。

シングルボックス：グループ名、ラジオボタンの値の値を結合しました。

シングルボックス：真または偽のVモデルバインディング値。

チェックボックスの複数：格納された値のVモデルの結合値のアレイ。

<body>
<div id="app">

<!-- v-model可以实现数据的双向绑定：v-model绑定的变量值可以影响表单标签的值，反过来单标签的值也可以影响变量的值-->
    <form action="">
        <input type="text" name="usr" id="usr" placeholder="请输入账号" v-model="v1">
        <input type="text" v-model="v1">
        {{ v1 }}

        <hr>

        <!--1.单选框-->
        男：<input type="radio" name="sex" value="male" v-model="v2">
        女：<input type="radio" name="sex" value="female" v-model="v2">
        {{ v2 }}

        <hr>
        
        <!--2.单一复选框-->
        卖身契：同意 <input type="checkbox" name="agree" v-model="v3">
        {{ v3 }}

        <hr>

        <!--3.多复选框-->
        爱好：<br>
        男：<input type="checkbox" name="hobbies" value="male" v-model="v4">
        女：<input type="checkbox" name="hobbies" value="female" v-model="v4">
        哇塞：<input type="checkbox" name="hobbies" value="other" v-model="v4">
        {{ v4 }}
        <hr>

        <button type="submit">提交</button>
    </form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            v1: '123',
            v2: 'male',
            v3: false,
            v4: ['male', 'female']
        }
    })
</script>
</html>

第二に、条件付き命令

条件付き命令：

V-IF =「真|偽」：真ディスプレイ; falseで、ページにレンダリングしない、あなたはラベルに情報を隠すことができます
V-ショー=「真|偽」：;：彼らは表示されませんが、どれもレンダリングが、それでもページ構造本当のディスプレイは、ディスプレイを使用してページfalseです。

V-あれば家族は次のとおりです。

V-IF
V-ELSE-IF
V-ELSE

ブランチは次の分岐がシールドされ、設立されました。それ以外のブランチは偽であるだけですべての分岐に表示され、条件を必要としません。

ケース条件付き命令（強調）

<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
        }
        .r {background-color: red}
        .b {background-color: blue}
        .g {background-color: green}

        .active {
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <!--条件指令：
            v-show="布尔变量"   隐藏时，采用display:none进行渲染
            v-if="布尔变量"     隐藏时，不再页面中渲染(保证不渲染的数据泄露)
        -->
        <div class="wrap">
            <div>
                <button @click="page='r_page'" :class="{active: page === 'r_page'}">红</button>
                <button @click="page='b_page'" :class="{active: page === 'b_page'}">蓝</button>
                <button @click="page='g_page'" :class="{active: page === 'g_page'}">绿</button>
            </div>
            <div class="box r" v-if="page === 'r_page'"></div>
            <div class="box b" v-else-if="page === 'b_page'"></div>
            <div class="box g" v-else></div>
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            page: 'r_page'
        }
    })
</script>
</html>

第三に、ループ命令

V-用= "" 構文：V-用= "コンテナ内のメンバー"

ケースの命令サイクル：

<head>
    <style>
        li:hover {
            color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="comment">
        <button type="button" @click="send_msg">留言</button>
        <ul>
            <li v-for="(msg, i) in msgs" @click="delete_msg(i)">{{ msg }}</li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            comment: '',
            msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],

        },
        methods: {
            send_msg() {
                if (!this.comment) {
                    alert('请输入内容');
                    return false;
                }
                this.msgs.push(this.comment);
                this.comment = '';

                localStorage.msgs = JSON.stringify(this.msgs);
            },
            delete_msg(index) {
                this.msgs.splice(index, 1);
                localStorage.msgs = JSON.stringify(this.msgs);
            }
        }
    })
</script>
</html>

第四に、区切り文字

補間は他の文法との競合を避けるために、表現の記号を変更するために使用されます

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>分隔符</title>
</head>
<body>
    <div id="app">
        <p>{{ num }}</p>
        <p>[{ num }]</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 100
        },
        // 用来修改插值表达式符号
        delimiters: ['[{', '}]'],
    })
</script>
</html>

ファイブフィルタ

フィルタインスタンスメンバーフィルタによって提供されるフィルタの|補間可変式{} {}

メソッド定義されたフィルタのフィルタ部材1、

図2に示すように、複数の値は、フィルタが追加の補助パラメータが渡されていることができ、濾過されてもよいです

図3に示すように、フィルタリングされた結果は再び（濾過一連の）濾過を行うことができます

<body>
    <div id="app">
        <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>
</html>

第六に、計算物性

図1に示すように、計算されたメソッド属性が、定義された属性データに定義され、定義（データではなく）を繰り返す必要はありません

図2に示すように、この方法は、結合方法からvalue属性の値を返す方法を結合する方法属性の戻り値であります

3、ページをレンダリングする必要がありますmethod属性、メソッド・バインディングが有効になります（コール）

図4は、監視されることになる方法で表示されるすべての変数は、任意の変数の値を再更新するプロパティの値メソッドの外観を拘束一度updateメソッドが呼び出されますが発生します

複数の変数に従属変数値：5、方法は、手動でプロパティ値を設定することができない、結合の手段によって解決すべき一般的な問題を設定しなければなりません

<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: '',
        },
        computed: {
            result () {
                console.log('被调用了');
                n1 = +this.n1;
                n2 = +this.n2;
                return n1 + n2;
            }
        }
    })
</script>
</html>

七、モニタープロパティ

1は、プロパティがデータ内で宣言する必要が監視し、リスナーは、戻り値、プロパティをインターセプトするための従来の方法で時計を必要としません。

2、リスナーが属性名のメソッド名を聞いている、それがリスナーメソッドをコールバックしますプロパティの値が更新されたとき

電流値、前回値：3、モニターのコールバックメソッドは、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: {
            full_name(n, o) {
                name_arr = n.split('');
                this.first_name = name_arr[0];
                this.last_name = name_arr[1];
            },
        }
    })
</script>
</html>

八、バブルソート

<script>

    let arr = [3, 2, 5, 4, 1];
    console.log(arr);
    for (let i = 0; i < arr.length - 1; i++) {  // 外层循环控制趟数
        for (let j = 0; j < arr.length - 1 - i; j++) {  // 内存循环控制比较次数
            if (arr[j] > arr[j + 1]) {
                let temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    console.log(arr);


    stus = [
        {
            name: 'Bob',
            grade: 98
        },
        {
            name: 'Tom',
            grade: 87
        },
        {
            name: 'Jerry',
            grade: 92
        },
    ];
    // 按照分数进行排名
    for (let i=0; i<stus.length-1; i++) {
        for (let j=0; j<stus.length-1-i; j++) {
            // 处理条件即可
            if (stus[j].grade > stus[j + 1].grade) {
                let temp = stus[j];
                stus[j] = stus[j + 1];
                stus[j + 1] = temp;
            }
        }
    }

    console.log(stus);
</script>
</html>

九、岬命令

VUE環境で、VUE環境をロードするために、ページのちらつきを回避するため、このV-マント属性が解決されます

<head>
    <style>
        [v-cloak] {  /*属性选择器*/
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <p>{{ msg }}</p>
        <p>{{ msg }}</p>
        <p>{{ msg }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 12345
        }
    })
</script>
</html>

1217クラスの概要