Vue 快速入门(四)

前面已经介绍Vue常用指令的基本应用，这篇介绍Vue的一些特殊属性的使用。

01 - 计算属性Computed

计算属性关键词：Computed。

计算属性在处理一些复杂逻辑时是很有用的。

普通的写法

比如字符串反转普通写法，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
            {{ message.split('').reverse().join('')}}
    </div>

</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Python!'
        }
    })
</script>
</html>

计算属性的写法

接下来我们看看使用了计算属性的实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
            {{ message.split('').reverse().join('')}}
            <p>计算后反转字符串: {{ reserseMsg }}</p>
    </div>

</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    var msg = new Vue({
        el: '#app',
        data: {
            message: 'Python!'
        },
        computed: {
             // 计算属性的 getter
            reserseMsg: function(){
                // `this` 指向 msg 实例
                return this.message.split('').reverse().join('')
            }
        }
    })
</script>
</html>

上图中声明了一个计算属性 reserseMsg。

提供的函数将用作属性 msg.reserseMsg 的 getter 。

msg.reserseMsg依赖于 msg.message，在 msg.message 发生改变时，msg.reserseMsg也会更新。

计算属性与方法

上面示例如果不用计算属性，也可以用函数。我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
            {{ message.split('').reverse().join('')}}
            <p>计算后反转字符串: {{ reserseMsg }}</p>
            <p>计算后反转字符串: {{ reserseMsg2() }}</p>
    </div>

</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    var msg = new Vue({
        el: '#app',
        data: {
            message: 'Python!'
        },
        computed: {
             // 计算属性的 getter
            reserseMsg: function(){
                // `this` 指向 msg 实例
                return this.message.split('').reverse().join('')
            }
        },
        methods: {
            reserseMsg2: function(){
                // `this` 指向 msg 实例
                return this.message.split('').reverse().join('')
            }
        },
    })
</script>
</html>

可以看出，方法和计算属性的区别：

声明发生不一样，调用不一样方法要用(), 计算属性调用不要加()

第二个区别：

计算属性: 当方法中使用的数据发生改变，方法会自动调用。
methods : 当方法中使用的数据发生改变，方法会自动调用。

如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算属性和侦听器</title>
</head>

<body>
    <div id="app">
        <!-- 实现一个购物车功能
        1. 数据初始化处理
        2.计算商品总价
        3.选择商品数量：当商品数量超过库存做提示
        -->
        <ul>
            <li v-for="(item, index) in car" >
            {{item.pname}} --- 商品价格：{{item.price}} --- 库存：{{item.stock}}
            数量：<input type="number" v-model="item.num" style="width: 30px;" />
            </li>
            <li><strong>总价:</strong>{{calcSum}}</li>
            <li v-html="message"></li>
            <li v-html="warn()"></li>
        </ul>

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data:{
                car:[
                    {pname:'Iphone 12',price:7999,stock:10,num:1},
                    {pname:'小米11',price:3599,stock:3,num:4},
                ],
                message:"",
            },
            // methods : 当方法中使用的数据发生改变，方法会自动调用
            methods: {
                // calcSum(){
                //     let sum=0;
                //     this.car.forEach(item => {
                //         sum+=item.price*item.num;
                //     });
                //     return sum;
                // }
                warn(){
                    let message="";
                    this.car.forEach(item => {
                        if(item.num>item.stock){
                            message+=`${item.pname}的库存超出限制<br/>`
                        }
                    });
                    return message;
                }
            },
            // 计算属性: 当方法中使用的数据发生改变，方法会自动调用
            computed:{
                 calcSum(){
                    let sum=0;
                    this.car.forEach(item => {
                        sum+=item.price*item.num;
                    });
                    return sum;
                }
            }
        });


        /*
        方法和计算属性的区别：
            声明发生不一样，调用不一样方法要用(), 计算属性调用不要加()
        */


    </script>

</body>

</html>

可以拷贝代码自己动手试试，就明白了。

总结一下：

计算属性 VS 方法

如果不使用计算属性，在 methods 里定义了一个方法，也可以实现相同的效果，甚至该方法还可以接受参数，使用起来更灵活。
既然 methods 同样可以解决模板中复杂逻辑计算的问题，那么为什么还需要使用计算属性呢?

原因就是：计算属性是基于它的依赖缓存的。前面我们介绍过，计算属性的改变取决于其所依赖数据的变化；
所以只要依赖数据不发生改变，计算属性就不会更新。当我们重复获取计算属性时它也不会重复计算，只会获取缓存的值。

而我们每次调用 methods 都会重新计算一遍，这样将会消耗一部分性能。当然，如何你不希望对数据进行缓存，那么可以用方法来代替。

02 - 监听器Watch

侦听器

通过侦听器来监听数据的变化，进行相应的逻辑处理。

如何监听对象类型数据的某个属性进行侦听。

先看一下基础用法，如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue </title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <p style="font-size:25px;">计数器: {{ counter }}</p>
        <button @click="counter++" style="font-size:25px;">点我</button>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                counter: 1
            },
            watch: {
                // 写法1: 基础类型的侦听， 将侦听数据作为函数就可以了  
                counter(newvalue, oldvalue) {
                    console.info('计数器值的变化 :' + oldvalue + ' 变为 ' + newvalue + '!')
                }
            }
        })
 // 写法2：       
// 外面调用  $watch 是一个实例方法
 vm.$watch('counter', function(nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
 });

    </script>
</body>

</html>

常规用法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算属性和侦听器</title>
</head>

<body>
    <div id="app">
        <!-- 实现一个购物车功能
        1. 数据初始化处理
        2.计算商品总价
        3.选择商品数量：当商品数量超过库存做提示
        -->
        <ul>
            <li v-for="(item, index) in car" >
            {{item.pname}} --- 商品价格：{{item.price}} --- 库存：{{item.stock}}
            数量：<input type="number" v-model="item.num" style="width: 30px;" />
            </li>
            <!-- <li><strong>总价:</strong>{{calcSum}}</li> -->
            <li v-html="message"></li>
            <li v-html="warn()"></li>
        </ul>

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data:{
                car:[
                    {pname:'Iphone 12',price:7999,stock:10,num:1},
                    {pname:'小米11',price:3599,stock:3,num:4},
                ],
                message:"",
            },
            // methods : 当方法中使用的数据发生改变，方法会自动调用
            // methods : 页面初始化时，会调用warn()方法。
            methods: {
                warn(){
                    let message="";
                    this.car.forEach(item => {
                        if(item.num>item.stock){
                            message+=`${item.pname}的库存超出限制<br/>`
                        }
                    });
                    return message;
                }
            },

            // 侦听器 专门用于侦听数据的变化，当数据发生变化会自动调用方法
            watch:{
                // 要侦听的数据: 数组
                car:{
                    handler(newvalue,oldvalue){ 
                        this.message="";
                        this.car.forEach(item => {
                            if(item.num>item.stock){
                                this.message+=`${item.pname}的库存超出限制<br/>`
                            }
                        });
                    },
                    deep:true   //深度侦听器
                },
                // 基础类型的侦听， 将侦听数据作为函数就可以了  
                // message(newvalue,oldvalue){
                //     console.info(newvalue,oldvalue)
                // }
            }
        });

    </script>

</body>

</html>

这里需要注意，方法和侦听器的区别：

方法：

方法中任意数据发生了改变就会自动调用方法
可以调用，进行返回值
页面初始化的时候就调用一次了

侦听器：

需要指定具体的侦听数据，只有被具体指定的侦听数据发生了改变才会触发
不能像方法那样去调用，而是靠vue自动触发

03 - 过滤器Watch

最后一个常用的器：过滤器，这个在第三章模板语言里已经讲过了，这里就过一下。

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
示例如下：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>过滤器</title>
</head>

<body> 
    <div id="app">
        <ul>
            <div v-bind:id="idtag | filterGender">这里v-bind写法：{{ idtag | changeid  }}</div>
        </ul>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>

    <script> 
        let vm = new Vue({
            el: "#app",
            data: {
                idtag:'id001',
            },
            // 专门针对数据过滤
            filters:{
                changeid(idtag){
                    var numReg = /^[0-9]*$/
                    var numRe = new RegExp(numReg)
                    if(!numRe.test(idtag)){
                        return '错误的id'
                    }else{
                        return idtag
                    }

                }
            }
        })
    </script>
</body>

</html>

这是使用v-bind属性指令来演示filters，下面看个常规的，如下代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>过滤器</title>
</head>

<body> 
    <div id="app">
        <ul>
            <li v-for="user in userList">
                姓名:{{user.name}}；性别:{{formateGender(user.gender)}}
                {{user.gender | filterGender}}
            </li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script> 
        let vm = new Vue({
            el: "#app",
            data: {
                userList: [
                    { id: 1, name: 'xushu', gender: 1 },
                    { id: 2, name: 'zhuge', gender: 0 }
                ]
            },
            methods: {
                formateGender(gender){
                    if(gender==1){
                        return "~男"
                    }else{
                        return "~女"
                    }
                }
            },
            // 专门针对数据过滤
            filters:{
                filterGender(gender){
                    if(gender==1){
                        return "!男"
                    }else{
                        return "!女"
                    }
                }
            }
        })
    </script>
</body>

</html>

动手试试，一目了然。

04 - 常用指令缩写

Vue最为常用指令缩写有两个，如下：

v-bind 缩写

<!--完整语法-->
<a v-bind:href="url">测试</a>
<!--缩写-->
<a :href="url">测试</a>

v-on 缩写

<!--完整语法-->
<a v-on:click="doSomething">修改</a>
<!--缩写-->
<a @click="doSomething">修改</a>

其中属性绑定指令的应用需要注意：

插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中!
在 vue 中，可以使用 v-bind: 指令，为元素的属性动态绑定值;
简写是英文的:
在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，

例如:

<div :title="'box'+ index">这是一个 div</div>

本节主要介绍Vue常用三大法器：计算器、监听器和过滤器，感兴趣可以研究一下更多内置法器。

posted @ 2023-01-23 01:05 全栈测试开发日记阅读(34) 评论(0) 编辑收藏举报

刷新页面返回顶部

全栈测试开发日记

像蚂蚁一样工作，像蝴蝶一样生活