08.vue.js实战笔记（计算属性、v-bind及class和style的绑定、内置指令、方法与事件）

最新推荐文章于 2023-11-21 09:41:16 发布

我在在啦我让让啦

最新推荐文章于 2023-11-21 09:41:16 发布

阅读量511

点赞数 2

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/Annexiaobin/article/details/103028310

版权

Vue 专栏收录该内容

56 篇文章 6 订阅

订阅专栏

1.计算属性

所有的计算属性都以函数的形式写在vue实例的computed选项内，最终返回计算后的结果

<!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>Document</title>
</head>
<body>
    <div id="app">
        <div>总价：{{prices}}</div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                package1:[
                    {
                        name:'huawei p30',
                        price:3499,
                        count:2
                    },
                    {
                        name:'OPPO reno2',
                        price:4599,
                        count:4
                    }
                ],
                package2:[
                    {
                        name:'apple',
                        price:3,
                        count:5
                    },
                    {
                        name:'banana',
                        price:2,
                        count:10
                    }
                ]
            },
            computed:{
                prices(){
                    var prices = 0
                    for(var i=0;i<this.package1.length;i++){
                        prices += this.package1[i].price*this.package1[i].count
                    }
                    for(var i=0;i<this.package2.length;i++){
                        prices += this.package2[i].price*this.package2[i].count
                    } 
                    return prices
                }
            }
        })
    </script>
</body>
</html>

每个计算属性都有一个getter和setter；计算属性不仅依赖当前实例的数据，还依赖其他实例的数据

计算属性缓存：

计算属性是基于它的依赖缓存的，一个计算属性所依赖的数据发生变化时，才会重新取值；但methods不一样，只要重新渲染，就会被调用，函数也会被执行

2.v-bind及class和style的绑定

v-bind：动态更新HTML元素上的属性。元素的样式名称class和内联样式style也是HTML的属性，也可以用v-bind指令。

绑定class的几种方式：

（1）对象语法

<div :class="{'active':idActive}"></div>

类名active依赖于数据isActive，当其为true时，div会拥有类名active，否则没有。

对象中也可以传入多个属性，动态切换class；：class可以和普通class共存：

<div :class="{'active':idActive,'error':isError}" class="action"></div>

（2）数组语法

当需要应用多个class时，可使用数组语法

<div :class="[activeCls,errorCls]"></div>

data:{
    activeCls:'active',
    errorCls:'error'
}

（3）在组件上使用

如果直接在自定义组件上使用class或：class，样式规则会直接应用到这个组件的根元素上：

声明一个组件：

Vue.component('my-component',{
   template:'<p class="article">一些文本</p>'
})

在调用这个组件时，应用对象语法给组件绑定class：

<my-component :class="{'active':isActive}"></my-component>

 data:{  isActive:true  }

最后渲染的结果为：

<p class="article active">一些文本</p>

这种用法仅适用于自定义组件的最外层是一个根元素，否则会无效。

绑定内联样式：

使用:style给元素绑定内联样式，也有对象语法和数组语法

<div :style="{'color':color,'fontSize':fontSize + 'px'}">文本</div>

data:{
    color:'red',
    fontSize:14
}

但一般不直接将样式全放在元素上，会写在data里：

<div :style="styles">文本</div>

data:{
    styles:{
        color:'red',
        fontSize:14 + 'px'
    }
}

3.内置指令

（1）v-cloak

解决初始化慢导致页面闪动问题，和display:none配合使用；

当网速较慢，vue.js文件还没加载完时，页面会显示{{message}}字样，直到vue创建实例编译模板时，DOM才会被替换，

这个过程屏幕有闪动，加一句css就可以解决问题：

[v-cloak]{
    display:none
}

（2）v-once

定义它的元素或组件只渲染一次，包括元素或组件的所有子节点

首次渲染后，不再随数据的变化重新渲染，将被视为静态内容

（3）条件渲染指令

v-if v-else-if v-else

（4）v-show

v-if 与 v-show 的区别：

v-if是真正的条件渲染，会根据表达式适当的销毁或重建元素及绑定的事件或子组件，只有在条件第一次变为真时才开始编译；

v-show是简单的css属性切换，无论条件真与否，都会被编译。

v-if适用于条件不经常改变的场景，v-show适用于频繁切换条件

（5）列表渲染指令v-for

<div id="app">
    <ul>
        <li v-for="book in books">{{book.name}}</li>
    </ul>
</div>

也可以用v-for=“book of books” ；也可以加索引： v-for= “（book，index）in books ”

v-if 和 v-for 都可以用在内置标签<template></template>上

数组和对象都可以使用v-for 进行遍历；遍历对象时有两个可选参数：key index

v-for还可以迭代整数：

<span v-for="n in 10">{{n}}</span>

数组更新：

vue的核心是数据与视图的双向绑定；

数组方法：

会改变原数组： push( ) 、pop（）、shift（）、unshift（）、splice（）、sort（）、reverse（）

不会改变原数组：filter（）、concat（）、slice（）

过滤与排序：

当不想改变原数组，只是通过数组的副本做过滤或排序的显示时，可以使用计算属性来返回过滤或排序后的数组：

<!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>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <template v-for="book in filterBooks">
                <li>书名：{{book.name}}</li>
                <li>作者：{{book.author}}</li>
            </template>
        </ul>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                books:[
                    {
                        name:'《vue.js实战》',
                        author:'梁灏'
                    },
                    {
                        name:'《JavaScript语言精粹》',
                        author:'DC'
                    },
                    {
                        name:'《JavaScript高级程序设计》',
                        author:'NC'
                    }
                ]
            },
            computed:{
                filterBooks(){
                    return this.books.filter((book) => {
                        return book.name.match(/JavaScript/)
                    })
                }
            }
        })
    </script>
</body>
</html>

上边代码是将书名中包含JavaScript关键词的数据过滤出来，计算属性filterBooks依赖books，但不会修改books

实现排序也类似：

computed:{
    sortBooks(){
        return this.books.sort((a,b) => {
            return a.name.length<b.name.length
        })
    }
}

4.方法与事件

v-on 事件处理

<button @click="counter ++">+1</button>

<button @click="handleAdd()">+1</button>

<button @click="handleAdd(10)">+10</button>

对于handleAdd（）方法传参：

handleAdd(count){
    count = count || 1
    this.counter += count
}

vue提供一个特殊的变量$event，用于访问原生DOM事件：

<a href="http://www.apple.com" @click="handleClick('禁止打开',$event)">打开链接</a>

handleClick(message,event){
    event.preventDefault()
    window.alert(message)
}

修饰符：

event.preventDefault( ) 也可以用vue修饰符实现，在@绑定的事件后加小圆点“.” ，跟后缀使用修饰符

（1）.stop @click.stop="handle" 阻止单击事件冒泡

（2）.prevent @submit.prevent="handle" 提交事件不再重载页面

（3）.capture @click.capture="handle" 添加事件侦听器时使用事件捕获模式

（4）.self @click.self="handle" 只当事件在该元素本身（而不是子元素）触发时触发回调

（5）.once @click.once="handle" 只触发一次

我在在啦我让让啦

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
08.vue.js实战笔记（计算属性、v-bind及class和style的绑定、内置指令、方法与事件）

1.计算属性所有的计算属性都以函数的形式写在vue实例的computed选项内，最终返回计算后的结果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid...
复制链接

扫一扫

专栏目录