Vue表单指令, 条件指令, 循环指令, 成员

目录

• 习题详解
• 表单指令
• 条件指令
  • v-if家族
  • 斗篷指令
• 循环指令
  • 循环指令案例todolist + 前端数据库
• 分隔符成员
• 过滤器成员
• 计算属性成员
• 监听属性成员

习题详解

'''
    <style>
        .box {
             200px;
            height: 200px;
        }
    </style>
    
    <button @click="bClick('red')">红色</button>
    <button @click="bClick('blue')">蓝色</button>
    <button @click="bClick('green')">绿色</button>
    <div class="box" :style="{backgroundColor: bgc}"></div>
    
    new Vue({
        el: '#app',
        data: {
            bgc: 'black',
        },
        methods: {
            bClick(color) {
                this.bgc = color;  // 在Vue实例内部访问变量要使用this, 在标签属性内部可以直接拿到变量
            },
        },
    })
'''

'''
    <style>
        .box {
             200px;
            height: 200px;
            color: white;
            font: bold 50px/200px 'STSong';
            user-select: none;
            cursor: pointer;  # 光标样式
            text-align: center;
        }
    </style>
    
    <div class="box" @click="dClick" :style="{backgroundColor: bgc}">{{count}}</div>
    
    new Vue({
        el: '#app',
        data: {
            count: 0,
            bgc: 'black',
            colorArr: ['pink', 'green', 'blue']
        },
        methods: {
            dClick() {
                this.count++;
                this.bgc = this.colorArr[this.count % 3]
            },
        },
    }) 
'''

'''
<style>
        #d1 {
            border: 3px solid pink;
             200px;
            height: 200px;
            border-radius: 50%;
            overflow: hidden; /*在父标签中设置, 将子标签溢出的内容隐藏*/
            margin: 50px auto 0; /*距上空白50px, 左右居中*/
        }

        .c1 {
            /*
            1. 浮动元素会生成一个块级框,
            2. 如果一行之上供可浮动元素的空间不够，那么这个元素会跳至下一行,
            3. 这个过程会持续到某一行拥有足够的空间为止
            */
            float: left;
        }
    </style>
 
<div id="app">
    <div id="d1" @click="dClick">
        <div class="c1" :style="{ w, height: h, backgroundColor: bgc1}"></div>
        <div class="c1" :style="{ w, height: h, backgroundColor: bgc2}"></div>
    </div>
</div>

new Vue({
    el: '#app',
    data: {
        w: '100px',
        h: '200px',
        bgc1: 'red',
        bgc2: 'green',
        count: 0,
    },
    methods: {
        dClick() {
            this.count++;
            if (this.count % 2 === 1) {
                this.w = '200px';
                this.h = '100px';
            }
            else {
                this.w = '100px';
                this.h = '200px';
            }
            if (this.count % 4 >= 2) {
                this.bgc1 = 'green';
                this.bgc2 = 'red';
            }
            else {
                this.bgc1 = 'red';
                this.bgc2 = 'green';
            }

        },
    },
})
'''

表单指令

表单指令: v-model="变量", 变量值与表单标签的value相关

'''
<input type="text" name="user1" id="id_user1" :value="v1" placeholder="">
    {{v1}}  <!--普通属性操作只能将v1的值给value, 而value的值不能反过来给v1-->

    <input type="text" name="user2" id="id_user2" v-model="v2" placeholder="">
    {{v2}}  <!--数据双向绑定, 变量值可以影响表单类标签的value, 反之表单类标签的value也可以影响变量值-->
   
    new Vue({
        el: '#app',
        data: {
            v1:123,
            v2:456,
        },
        methods: {},
    })
'''

'''
    <form action="">
        <!--
        radio单选框:
            1. 布尔类型属性, 属性名与属性值相同, 通常省略multiple, selected
            2. button标签及表单类标签都要在form标签中才能提交, http://...?gender=male#
        -->
        男: <input type="radio" name="gender" value='male' v-model="v2">
        女: <input type="radio" name="gender" value='female' v-model="v2">

        <p>{{v2}}</p>  <!--male-->

        <!--
        checkbox单一复选框:
            1. 有name属性才能提交, http://...?gender=male&agree=on
        -->
        卖身契: 同意 <input type="checkbox" name="agree" v-model="v3">
        <p>{{v3}}</p>  <!--true/false-->

        <!--
        checkbox多复选框:
            1. 有name属性才能提交, http://...?gender=male&agree=on
        -->
        爱好: <br>
        网游: <input type="checkbox" name="hobby" value="game" v-model="v4">
        篮球: <input type="checkbox" name="hobby" value="basketball" v-model="v4">
        {{v4}}  <!--[], [ "basketball", "game" ]-->

        <p>
            <button type="submit">提交</button>
        </p>
    </form>
    
    new Vue({
        el: '#app',
        data: {
            v2: 'male',  // radio默认选中男性
            v3: true,  // checkbox单一复选框默认选中
            v4: ['basketball'],  // checkbox多复选框默认选中
        },
        methods: {},
    })
'''

条件指令

条件指令:

v-show="布尔变量", 布尔变量值为false时, 标签以 display:none 渲染, 侧重于动态效果

v-if="布尔变量", 布尔变量值为false时, 标签不渲染, 侧重于数据安全方面

v-if | v-else-if | v-else

'''
    <div class="box r" v-show="is_true"></div>  <!--<div class="box r" style="display: none;"></div>-->
    <div class="box b" v-if="is_true"></div>
    
    new Vue({
        el: '#app',
        data: {
            is_true: false
        },
        methods: {},
    })
'''

v-if家族

'''
	# 在html页面的标签中, 可以直接通过vue变量名操作变量
    <style>
        [v-cloak] {
            display: none;
        }

        .box {
             300px;
            height: 200px;
            border: 3px solid aqua;
        }

        .r {
            background-color: red;
        }

        .g {
            background-color: green;
        }

        .b {
            background-color: blue;
        }

        .active {
            background-color: pink;
        }
    </style>
</head>

<body>
<div id="app" v-cloak>
    <button @click="show_what_page='r_page'" :class="{active: show_what_page === 'r_page'}">红</button>
    <button @click="show_what_page='g_page'" :class="{active: show_what_page === 'g_page'}">绿</button>
    <button @click="show_what_page='b_page'" :class="{active: show_what_page === 'b_page'}">蓝</button>

    <div class="box r" v-if="show_what_page === 'r_page'">{{info}}</div>
    <div class="box g" v-else-if="show_what_page === 'g_page'"></div>
    <div class="box b" v-else=></div>
</div>
</body>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            show_what_page: null,
        },
        methods: {},
    })
</script>
'''

斗篷指令

1. 在网络不好或加载数据过大的情况下，页面在渲染的过程会闪烁
2. 使用斗篷指令 + display: none 使vue实例准备完毕再渲染页面

'''
...
    <style>
        [v-cloak] {display: none;}
        ...
    </style>

</head>

<body>
<div id="app" v-cloak>
    ...
</div>
</body>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
       ...
    })
</script>
'''

循环指令

循环指令: v-for="ele in string|array|object"

'''
<div id="app" v-cloak>
    <p>{{info}}</p>  <!--good study-->
    <p v-for="(ele, index) in info">第{{index + 1}}个字符为:{{ele}}</p>  <!--每次循环会包含标签, 第1个字符为:g-->

    <!--字典无序, 存储效率高, 读取效率低, 优化: 将key有序化, 结果: 1-age: 36.7-->
    <p v-for="(v, k, i) in user">{{i}}-{{k}}: {{v}}</p>

    <!--循环嵌套-->
    <p v-for="teacher in teachers">
        <span v-for="(v, k, i) in teacher">
            <span v-if="i !== 0">|</span> {{k}}: {{v}}  <!--name: jason | age: 50 | gender: 男-->
        </span>
    </p>
</div>

    new Vue({
        el: '#app',
        data: {
            info: 'good study',
            user: {
                name: '小猴老师',
                age: 36.7
            },
            teachers: [
                {
                    name: 'jason',
                    age: 50,
                    gender: '男',
                },
                {
                    name: 'tank',
                    age: 18,
                    gender: '女',
                }
            ]
        },
        methods: {},
    })
'''

循环指令案例todolist + 前端数据库

前端数据库

• localStorage: 永久存储, 归属于标签页, 对应标签页关闭后重新打开任然存在
• sessionStorage: 临时存储, 所属标签页表被关闭时被清除
• 查看: f12-->Application-->Local Storage|Session Storage

'''
<div id="app">
    <input type="text" v-model="content">
    <button type="button" @click="send_content">留言</button>  <!--写button标签要明确type, 默认为submit-->
    <ul>
        <!--给每个li设定点击事件: 删除该li, 每次循环时将对应li的index传给事件函数-->
        <li v-for="(msg, index) in msgs"><span @click="delete_content(index)">{{msg}}</span></li>
    </ul>
</div>


    new Vue({
        el: '#app',
        data: {
            // 三元表达式, 条件 ? code1 : code2, 条件成立执行?后的code1, 否则执行:后的code2
            msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],  // 数据使用前端数据库存取, 页面刷新不会清空留言
            content: '',
        },
        methods: {
            send_content() {
                if (!this.content) {
                    alert('请输入内容!');
                }
                else {
                    this.msgs.push(this.content);  // 首增|首删: unshift|shift, 尾增|尾删: push|pop
                    this.content = '';  // 留言后情况输入框

                    localStorage.msgs = JSON.stringify((this.msgs))
                }
                // 第一个元素的最左端开始计算索引, 从第一个参数往后截切的元素数量, 将第三个参数内容拼接到被剪切的位置
                // this.msgs.splice(0, 1)  // 可以对容器类数据的进行增删改操作
            },
            delete_content(index) {
                this.msgs.splice(index, 1);  // 点击对应的留言则删除
                localStorage.msgs = JSON.stringify((this.msgs))
            },
        },
    })
    
    // localStorage.arr = [1, 2, 3];  // 按字符串格式存储
    // console.log(localStorage.arr[3])  // ,
    // localStorage.arr = JSON.stringify([1, 2, 3]);
    // console.log(JSON.parse(localStorage.arr))  // [1, 2, 3]
	// localStorage.clear()  // 清空前端数据库
'''

分隔符成员

'''
<div id="app">
    [{info}]  <!--信息]-->
</div>

    new Vue({
        el: '#app',
        data: {
            info: '信息',
        },
        methods: {},
        delimiters: ['[{', '}']  // 例如vue语法的插值表达式与django模板语法冲突时, 可以用delimiter更改分隔符
    })
'''

过滤器成员

1. 过滤器需在filter成员中定义,
2. 可以对多个数据进行过滤, 还可以再给过滤器传入额外的参数
3. 过滤的结果可以再进行下一次过滤
4. 需要根据不同条件多次获取数据, 使用前端过滤器, 只需要获取一次数据, 后端直接返回

'''
<div id="app">
    {{num|f1}}  <!--676-->
    {{a, b|f2(40, 50)|f1}} <!--716-->
</div>

    new Vue({
        el: '#app',
        data: {
            num: 10,
            a: 20,
            b: 30,
        },
        methods: {},
        filters: {  // 传入数据, 返回过滤后的结果
            f1(a, b) {
                console.log(a, b);  // 10 undefined; 50 undefined
                return a + 666;
            },
            f2(a, b, c, d) {
                console.log(a, b, c, d);  // 20 30 40 50
                return a + b  // 50
            },
        },
    })
'''

计算属性成员

1. 计算属性成员中可以声明方法属性, 方法属性不能再在data中重复声明
2. 方法属性必须在页面中渲染才会, 才会调用绑定的方法
3. 方法属性的值就是绑定方法的返回值
4. 绑定的方法中出现的所有变量都会被监听, 任何一个被监听的变量值发生改变, 都会重新触发绑定方法, 从而更新方法属性的值
5. 通常用来处理一个变量的值依赖于多个变量值的问题

'''
<div id="app">
    <!--js为弱语言, 不同类型数据运算会自动进行类型转换, 且字符串运算优先于数字运算-->
    <p>{{5 + '2'}}</p>  <!--"52"-->
    <p>{{5 - 2}}</p>  <!--3-->

    <input type="number" v-model="n1">
    +
    <input type="number" v-model="n2">
    =
    <button>{{+n1 + +n2}}</button>  <!--字符串前面加"+"变成数字-->
    <p><button>{{res}}</button></p>
</div>

    new Vue({
        el: '#app',
        data: {
            n1: null,
            n2: null,
        },
        methods: {},
        computed: {
            res() {
                n1 = +this.n1;
                n2 = +this.n2;
                return n1 + n2
            },
        }

    })
'''

监听属性成员

1. 被监听的变量需要在data属性成员中声明, 监听方法不需要返回值
2. 监听方法名就是被监听的变量名, 该变量值更新时就会回调监听方法
3. 监听方法有两个回调参数, 第一个为被监听变量的当前值, 第二个为被监听变量的上次值
4. 通常用来处理多个变量依赖于一个变量值的问题

'''
<div id="app">
    <p>姓名: <input type="text" v-model="full_name"></p>
    <p>姓: {{first_name}}</p>
    <p>名: {{last_name}}</p>
    <p>{{$data}}</p>  <!--$可以选择成员属性, { "full_name": "", "first_name": "未知", "last_name": "未知" }-->
</div>

    new Vue({
        el: '#app',
        data: {
            full_name: '',
            first_name: '未知',
            last_name: '未知',
        },
        methods: {},
        watch: {
            // n为被监听变量的当前值, o为被监听变量的上次值, 被监听对象每次更新值都会回调监听方法
            full_name(n, o) {
                // console.log(n, o)
                this.first_name = n[0];  // 张
                this.last_name = n.replace(n[0], '')  // 三丰
            },
        },
    })
'''