Vue-2-计算属性、侦听器、过滤器、样式绑定

一、计算属性

???不能用()=>{} 保持疑问，lambda不加this,mes2无定义；加this，undefined

computed:{
    // caption:function () {
    //     return this.mes2.toUpperCase()
    // }
    caption:()=>{ return this.mes2.toUpperCase() } // ??? 不能lambda嘛？？？？
},

1. 与方法比较

    <div id="div1">
        <p>{{fullName()}}</p>
        <p>{{com_fullName}}</p>
    </div>
    
    <script>
        var app=new Vue({
            el:'#div1',
            data:{
                firstName: 'Tom',
                lastName:' Smith'
            },
            methods:{
                fullName:function () {
                    return this.firstName+this.lastName
                }
            },
            computed:{
                com_fullName:function () {
                    return this.firstName+this.lastName
                }
            }
        });
    </script>
   

   计算属性：与数据依赖绑定，只有数据变时才重新计算；有缓存
   函数：事件发生时就调用
   计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

2. 下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

    computed: {
      now: function () {
        return Date.now()
      }
    }
   

3. 使用方式

   1. 无get和set

       computed:{
           com_fullName:function () {
               return this.firstName+this.lastName
           }
       }
      

   2. get 和 set

       <div id="div1">
           <p>{{fullName()}}</p>
           <p>{{com_fullName}}</p>
           <button v-on:click="onclick_func">改变名字</button>
       </div>
       
       <script>
           var app=new Vue({
               el:'#div1',
               data:{
                   firstName: 'Tom',
                   lastName:'Smith'
               },
               methods:{
                   fullName:function () {
                       return this.firstName+this.lastName
                   },
                   onclick_func(){
                       this.com_fullName = 'Sher Lock'
                   }
               },
               computed:{
                   com_fullName:{
                       get:function () {
                           return this.firstName+this.lastName
                       },
                       set:function(newValue){
                           var names = newValue.split(' ');
                           this.firstName = names[0];
                           this.lastName = names[names.length - 1]
                       }
                   }
               }
           });
       </script>
      

二、侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

1. 普通侦听

    <div id="div1">
        <input type="text" v-model="mes1">
        <select v-model="sort">
            <option value="movie">movie</option>
            <option value="play">play</option>
            <option value="music">music</option>
        </select>
    </div>
    
    <script>
        var app=new Vue({
            el:'#div1',
            data:{
                mes1:'this is...',
                sort:'movie',
            },
            watch:{
                mes1:function (newVal) {
                    console.log(newVal)
                },
                sort:function (newVal) {
                    console.log(newVal)
                }
            }
        });
    </script>
   

2. 深度侦听

   改变[{},{}]类型等内部信息时

    tags:{
        halder:function (newVal) {
            console.log(newVal)
        },
        deep:true
    }
   

三、过滤器

加参数 more(name)

<div id="div1">
    <h1>{{mes1 | more}}</h1>
    <ul>
        <li v-for="item in tag">{{item | more2}}</li>
    </ul>

</div>

<script>
    var app=new Vue({
        el:'#div1',
        data:{
            mes1:'this is hello world...',
            tag:[10,20,30,40,50,60,70,80]
        },
        filters:{
            more: (data) => {
                if(data)
                    return data.length>5?data.slice(0,5)+'...':data;
                else return null
            },
            more2:(data)=>{
                if (data>50) return data
            }
        }
    });
</script>

全局过滤：放在Vue实例之前

Vue.filter('more',(data) => {
    if(data)
        return data.length>5?data.slice(0,5)+'...':data;
    else return null
});

计算属性实现搜索，过滤器好像不行？？？

<div id="div1">
    <h1>{{condition}}</h1>
    <input type="text" v-model="condition">
    <ul>
        <li v-for="item in filtered_goods">{{item.name}}</li>
    </ul>
</div>

<script>
    var app=new Vue({
        el:'#div1',
        data:{
            condition:'i',
            goods:[
                {"name":"Iphone","price":9000},
                {"name":"ViVo","price":8000},
                {"name":"oppo","price":7000},
            ],
        },
        computed:{
            filtered_goods:function () {
                return this.goods.filter(k=>{return k.name.toUpperCase().indexOf(this.condition.toUpperCase())!=-1})
            },
        }
    });
</script>

四、样式 class 和 style 绑定

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .btn{
            width: 200px;
            height: 200px;
        }
        .active{
            background-color: lightskyblue;
        }
    </style>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>

<div id="div1">
    <button class="btn" :class="{active:isActive }" @click="change">按钮</button>
</div>
<script>
    var app=new Vue({
        el:'#div1',
        data:{
            isActive:true
        },
        methods:{
            change:function () {
                this.isActive=!this.isActive
            }
        }
    });
</script>

1. vue样式-导航条

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            ul{
                list-style: none;
                width: 500px;
                display: flex;
                justify-content: space-between;
            }
            li{
                width: auto;
                padding: 10px 10px;
                background-color: lightskyblue;
            }
            .active{
                background-color: pink;
            }
            li:not([class=active]):hover{
                cursor: pointer;
                background-color: #71acd1;
            }
        </style>
        <script src="../node_modules/vue/dist/vue.js"></script>
    </head>
    <body>
    
    <div id="div1">
        <ul>
            <li v-for="item in sets" :class="{active:item==select_index}" @click="select_index=item">{{item}}</li>
        </ul>
    </div>
    <script>
        var app=new Vue({
            el:'#div1',
            data:{
                sets:['福尔摩斯探案集','阿加莎','东野圭吾','柯南'],
                select_index:'福尔摩斯探案集',
            }
        });
    </script>