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、监听方法有两个回调参数：一个是当前值一个是上次值

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