ディレクトリ

フォーム指令V-モデル

定義によって指示書は、フォームの形態で使用されます
その使用は：v-model="变量"これは、v-model入力タグに相当しvalue、属性が、彼らはお互いに影響を与えることができます
==値を結合双方向のデータを達成することができ、変数は、次に、formタグの値も変数の値に影響を与えることができる、formタグの値に影響を与えることができる==

Copy<body>
<div id="d1">
    <form action="">
        <!--变量的值可以影响标签的值, 标签的值也可以影响变量的值-->
        用户名:<input type="text" name="username" v-model="v1" placeholder="请输入用户名">
        <!--上面输入什么, 这里就展示什么-->
        <input type="text" v-model="v1">
        {{ v1 }}
        <hr>

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

        <!--2.单一复选框, true|false-->
        卖身抵债: 同意 <input type="checkbox" name="agree" v-model="v3">
        {{ v3 }}
        <hr>

        <!--3.复选框-->
        爱好: <br>
        男:<input type="checkbox" name="hobby" value="male" v-model="v4">
        女:<input type="checkbox" name="hobby" value="female" v-model="v4">
        其他:<input type="checkbox" name="hobby" value="other" v-model="v4">
        {{ v4 }}
        <hr>

        <button type="submit">提交</button>
        
    </form>
</div>


<script src="vue/vue.js"></script>
<script>
    new Vue({
        el: '#d1',
        data: {
            v1: 'username',
            v2: 'male',
            v3: false,
            v4: ['female', 'male']
        }
    })
</script>

V-IF条件付き命令

条件付き命令は、このページに表示されていないエンドでユーザーコントロールのタグです
v-show="条件" 隠された場合には、いずれかの条件は、ディスプレイの使用偽です：何もレンダリングしません
v-if="条件" 隠されたときは、どちらかの条件が表示されない、偽で、右検査は、関連するコードを見つけることができませんでした
v-if="条件" | v-else-if="条件" | v-else

Copy<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件指令</title>
    <style>
        .box {
            height: 200px;
            width: 200px;
        }

        .r {
            background-color: red;
        }

        .g {
            background-color: green;
        }

        .b {
            background-color: blue;
        }
        .active {
            background-color: yellow;
        }
    </style>

</head>
<body>
<div id="d1">
    <!--当is_show为false时, display:none-->
    <div class="box r" v-show="is_show"></div>
    <!--当is_show为false时, 直接不渲染, 右键检查找不到代码-->
    <div class="box g" v-if="is_show"></div>
    <hr>

    <!--点击相应按钮显示对应颜色的box,且该按钮高亮-->
    <div class="wrap">
        <button @click="boxColor='r'" :class="{active: boxColor === 'r'}">红</button>
        <button @click="boxColor='g'" :class="{active: boxColor === 'g'}">绿</button>
        <button @click="boxColor='b'" :class="{active: boxColor === 'b'}">蓝</button>

        <div class="box r" v-if="boxColor === 'r'"></div>
        <div class="box g" v-else-if="boxColor === 'g'"></div>
        <div class="box b" v-else></div>

    </div>
</div>

<script src="vue/vue.js"></script>
<script>
    new Vue({
        el: '#d1',
        data: {
            is_show: false,
            boxColor: 'r'
        }
    })
</script>
</body>
</html>

V-用ループ命令

v-for="v in string|array|obj
v-for="(v, i ) in string|array
v-for="(v, k, i) in dict

Copy<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环指令</title>

</head>
<body>
<div id="d1">
    <p>{{ msg }}</p>
    <span v-for="v in msg">{{ v }} </span>
    <br>
    <!--i:索引-->
    <span v-for="(v, i) in msg">{{ i }}:{{ v }} </span>
    <hr>
    <!--对字典进行for循环拿到的是值-->
    <div v-for="v in infoDic">{{ v }}</div>
    <!--k:键, i:索引-->
    <div v-for="(v, k, i) in infoDic">{{ i }}-{{ k }}:{{ v }}</div>
    <hr>
    
</div>

<script src="vue/vue.js"></script>
<script>
    new Vue({
        el: '#d1',
        data: {
            msg: 'easy come easy go',
            infoDic: {
                name: 'bigb',
                age: '18',
                gender: 'male'
            },
        }
    })
</script>
</body>
</html>

区切り区切り文字

区切り文字は、Djangoのテンプレート構文として、紛争の文法を解決するために、シンボル間の差の発現を変更するために、属性：{{ }}Vueののシンボルと表現して下さい：{{ }}
delimiters: [ "[{" "}]" ] 違いは、式がシンボルになったということですヴュー [{ }]

Copy<body>
<div id="d1">
    <p>{{ msg }}</p>
    <p>[{ msg }]</p>

</div>

<script src="vue/vue.js"></script>
<script>
    new Vue({
        el: '#d1',
        data: {
            msg: 'easy come easy go',
            },
        // 将Vue的差值表达式符号变成 [{ }]
        delimiters: [ '[{',  '}]' ],
    })
</script>
</body>

フィルターフィルター

オブジェクト属性フィルタで定義されたVUE濾過法
濾過は、濾過方法を渡すことができる複数のパラメータのための複数の値のいずれであってもよく、また、追加の補助パラメータを渡すことができ
==フィルタは、直列の複数であってもよく、結果が再度濾過することができるフィルタ==

Copy<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>

</head>
<body>
<div id="d1">
    <p>{{ a|f1 }}</p>
    <!--可以对多个值进行过滤, 也可以传辅助参数-->
    <p>{{ a, b, c|f2(40)}}</p>
    <!--可以对过滤的结果进行再过滤-->
    <p>{{ a, b, c|f2(40)|f3}}</p>

</div>

<script src="vue/vue.js"></script>
<script>
    new Vue({
        el: '#d1',
        data: {
            a: 10,
            b: 20,
            c: 30,
            },
        filters: {
            // 传入需要过滤的值, 返回过滤结果
            f1(arg) {
                return arg * 10
            },
            f2(arg1, arg2, arg3, arg4) {
                return arg1 + arg2 + arg3 + arg4
            },
            f3(arg) {
                return arg * arg
            }
        }
    })
</script>
</body>
</html>

計算されたプロパティを計算します

計算VUE算出方法定義されたオブジェクトのプロパティ
戻り値は、属性の計算方法の値であり、
このメソッドをトリガーする変更を送信するために表示されるすべての変数==計算方法==

Copy<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
</head>
<body>
<div id="d1">
    <input type="number" min="0" max="100" v-model="n1">
    +
    <input type="number" min="0" max="100" v-model="n2">
    =
    <!--调用在computed中定义的result方法, 并渲染出返回值-->
    <button>{{ result }}</button>

</div>

<script src="vue/vue.js"></script>
<script>
    new Vue({
        el: '#d1',
        data: {
            n1: '',
            n2: '',
        },
        computed: {
            result() {
                // 计算方法中出现的任何变量的值发生变化, 都会触发该方法
                n1 = +this.n1;
                n2 = +this.n2;
                return n1 + n2
            }
        }
    })
</script>
</body>
</html>

リスナーのプロパティ時計

リスナーが変数の値をリッスンしているかどうかは、変更がリスナーメソッドいったんトリガされ、変更されました
時計のVueオブジェクトのプロパティをリスニングで定義された方法は、方法==名と同じ変数名が監視されている==
リスナーメソッドは値を返しません。
リスナーの方法は、2つのパラメータ、変数の現在の値を渡すことができる、N、O変数の値であります

Copy<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监听属性</title>
</head>
<body>

<div id="d1">
    <p>姓名:<input type="text" v-model="fullName"></p>
    <p>姓:<input type="text" v-model="lastName"></p>
    <p>名:<input type="text" v-model="firstName"></p>
</div>

<script src="vue/vue.js"></script>
<script>
    new Vue({
        el: '#d1',
        data: {
            fullName: '',
            firstName: '',
            lastName: '',
        },
        watch: {
            // 对fullName进行监听
            fullName(n, o) {
                // n表示变量的当前值, o表示变量的上一次的值
                this.firstName = n.slice(1);
                this.lastName = n.slice(0, 1);
            }
        }
    })
</script>
</body>
</html>

フロントエンドデータベース

localStorage：永続的なストレージ
sessionStorage：一時保管した後、タグが閉じられているページは、空

Copy// 存
localStorage.n1 = 10;
sessionStorage.n2 = 20;


// 取
let a = localStorage.n1
let b = sessionStorage.n2

// 存取数组等数据类型需要进行序列化和反序列化
localStorage.arr = JSON.stringify([1, 2, 3])
let arr = JSON.parse(localStorage.arr)

// 清空数据库
localStorage.clear()

ビューday02

フォーム指令V-モデル

V-IF条件付き命令

V-用ループ命令

区切り区切り文字

フィルターフィルター

計算されたプロパティを計算します

リスナーのプロパティ時計

フロントエンドデータベース

おすすめ