Vue-指令补充、过滤器、计数器属性、监听属性

vue实例成员：
el | template
|data | methods
 watch 监听事件| computed 计数属性使用
| filters过滤器 | props 父传子
 components渲染template中标签

一、表单指令(重要)：

表单指令 v-model='变量'，变量值与表单标签的value相关

v-model可以实现数据的双向绑定：v-model绑定的变量值可以影响表单标签的值，

反过表单标签的值也可以影响变量的值。

<div id="app">
    <form action="">
        <input type="text" name="user" id="user" placeholder="请输入账号" v-model="v1">
        <input type="text" v-model="v1">
        {{v1}}
        <hr>
        <!--单选框-->
        男：<input type="radio" name="sex" value="male" v-model="v2">
        女：<input type="radio" name="sex" value="female" v-model="v2">
        {{v2}}
        <hr>
        <!--单一复选框-->
        卖身契：同意 <input type="checkbox" name="agree" v-model="v3">
        {{v3}}
        <hr>
        <!--多复选框-->
        爱好：<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}}
    </form>
</div>

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

二、条件指令

条件指令：

v-show='变量'，隐藏的时候，采用的是display：none进行渲染

v-if='布尔变量'，隐藏时，不再页面中渲染（保证不渲染的数据泄露）

三种形式：v-if | v-else-if | v-else

利用一个点击转换并且点击的按钮高亮的例子来渲染条件指令

<style>
    [v-cloak] {display: none}
    .box{
        width: 200px;
        height: 200px;
    }
    .r{
        background-color: red;
    }
    .b{
        background-color: blue;
    }
    .g{
        background-color: green;
    }
    .active{
        background-color: sandybrown;
    }
</style>

<div id="app" v-cloak>
    <div class="box r" v-show="is_show"> </div>
    <div class="box b" v-if="is_show"> </div>
    <div class="warp">
        <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>

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

三、循环指令

循环指令：v-for="ele in string|array|obj"

<div id="app">
    <span>{{info}}</span>
    <hr>
    <!--对字符串循环-->
    <p v-for="(c,i) in info">{{i}}:{{c}}</p>
    <hr>
    <!--对数组循环-->
    <div v-for=" e in stus">{{e}}</div>
    <div v-for="(e,i) in stus ">{{i}}:{{e}}</div>
    <hr>
    <!--对对象也就是字典循环-->
    <!--这里v是值，i是变量，z是索引值-->
    <div v-for="(v,i,z) in people">{{v}}{{i}}{{z}}</div>
    <div v-for="teat in teats">
    <span v-for="(v,k,i) in teat "><span v-if="i !==0">|</span>{{k}}{{v}}</span>
    </div>
</div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            info:'good good study',
            stus:['A','B','C'],
            people:{
                name:'猴子',
                age:37,
                sex:'女',
            },
            teats:[
                {
                    name: 'jason',
                    age: 73,
                    sex: '男',
                },
                {
                    name: 'egon',
                    age: 74,
                    sex: '男',
                },
                {
                    name: 'owen',
                    age: 17.5,
                    sex: '男',
                }
            ]
        }
    })
</script>

循环留言板案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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: '',
            //localStorage前端的存储，下面的式子是个三元表达式
            //意思是如果有数据就用json转一下存起来，没有值就是空
            msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],
        },
        methods: {
            send_msg() {
                //将comment添加到msgs数组中：unshift push首尾增加；shift pop首尾删
                //this.msgs.push(this.comment);
                //数组操作最全的方法：splice(begin_index,count,...args)
                //this.msgs.splice(0,2);
                if (!this.comment) {
                    return false;
                }
                this.msgs.push(this.comment);
                this.comment = '';
                localStorage.msgs = JSON.stringify(this.msgs);
            },
            //删除数据
            delete_msg(index){
                //splice是从什么地方开始操作多少位操作什么！
                //下面的意思从index开始，操作一位，操作的值为空，也就是什么都没有
                this.msgs.splice(index,1);
                localStorage.msgs=JSON.stringify(this.msgs);
            }
        }
    })
</script>
</html>

四、过滤器

<div id="app">
    <p>{{ num | f1 }}</p>
    <p>{{ a, b | f2(30, 40) | f3 }}</p>
</div>

<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>

总结：1、在filters成员中定义过滤器方法；2、可以对多个值进行过滤，过滤时还可以额外传输辅助参数；3、过滤的结果可以再进行下一次过滤（过滤串联）

五、计数属性

<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>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            n1: '',
            n2: '',
            // result: 0,
        },
        computed: {
            result () {
                console.log('被调用了');
                n1 = +this.n1;
                n2 = +this.n2;
                //this前面加个+号，是将字符串类型转换成数字类型加减乘除
                return n1 + n2;
            }
        }
    })
</script>

总结：

1、computed计数属性可以声明方法属性（方法属性一定不能在data中重复声明）

2、方法属性必须在页面中渲染，才会启用绑定的方法，方法属性的值就是绑定方法的返回值

3、绑定的方法中出现的所有变量都会被监听，任何一个变化发生值更新都会重新出发绑定方法，从而更新方法属性值

一般用来解决的问题：一个变量值依赖于多个变量。

六、监听属性

<div id="app">
    <p>姓名：<input type="text" v-model="full_name"></p>
    <p>姓：{{ first_name }}</p>
    <p>名：{{ last_name }}</p>
</div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            full_name: '',
            first_name: '未知',
            last_name: '未知',
        },
        watch: {
        	 // n是监听的属性当前值，o是其上一次的值，监听的属性值每次更新都会回调监听方法
            full_name(n, o) {
                name_arr = n.split('');
                this.first_name = name_arr[0];
                this.last_name = name_arr[1];
            },
        }
    })
</script>

总结：

1、监听的属性需要在data中声明，监听方法不需要返回值

2、监听的方法名就在监听的属性名，该属性值发生更新时就会回调监听方法

3、监听方法有两个回调参数：一个是当前值一个是上次值

解决的问题：多个变量值依赖于一个变量值