首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >前端基础-计算属性与侦听器

前端基础-计算属性与侦听器

作者头像
cwl_java
发布于 2020-03-26 08:24:39
发布于 2020-03-26 08:24:39
85400
代码可运行
举报
文章被收录于专栏:cwl_Javacwl_Java
运行总次数:0
代码可运行

第6章 知识点汇总

6.1 计算属性与侦听器

6.1.1 计算属性
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="div">
    <input type="text" v-model="xing">
    <input type="text" v-model="ming">
    {{xing + ming}}
</div>

<script>
    var app = new Vue({
        el: '#div',
        data: {
            xing:'',
            ming:'',
        }
    })
</script>

模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。因此我们可以使用方法,来进行运算并返回数据:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="div">
    <input type="text" v-model="xing">
    <input type="text" v-model="ming">
    {{ fullname() }} 
    <!-- 一百次调用,观察时间结果-->
    {{ fullname() }} 
</div>

<script>
    var app = new Vue({
        el: '#div',
        data: {
            xing:'',
            ming:'',
        },
        methods:{
            fullname(){
                return this.xing+this.ming+Date.now();
            }
        }
    })
</script>

注意,每次在模板中使用 {{ fullname() }} fullname方法就会被调用执行一次;所以,对于任何复杂逻辑,你都应当使用计算属性 ,因为计算属性,会自动缓存数据:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="div">
    <input type="text" v-model="xing">
    <input type="text" v-model="ming">
    <br>
    {{fulln}}
    <!-- 一百次调用 -->
    {{fulln}}
</div>

<script>
    var app = new Vue({
        el: '#div',
        data: {
            xing:'',
            ming:'',
        },
        computed:{
            fulln(){
                return this.xing+this.ming+Date.now();
            }
        }
    })
</script>

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值;多次调用,计算属性会立即返回之前的计算结果,而不必再次执行函数。

6.1.2 利用计算属性获取未完成任务个数
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<span class="todo-count"><strong>{{getNu}}</strong> item left</span>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
computed: {
    // 未完成任务个数
    getNu() {
        return (this.list_data.filter((v) => !v.stat)).length;
    }
}
6.1.3 使用侦听器
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="div">
    <input type="text" v-model="xing">
    <input type="text" v-model="ming">
    {{ fullname }}
</div>
<script>
    var app = new Vue({
        el: '#div',
        data: {
            xing: '',
            ming: '',
            fullname:''
        },
        // 设置侦听器
        watch: {
            // 侦听器中的方法名和要真挺的数据属性名必须一致
            // xing 发生变化,侦听器就会被执行,且将变化后的值和变化前的值传入
            xing:function(newVal,old_val){
                this.fullname = newVal+this.ming;
            },
            ming:function(newVal,oldVal){
                this.fullname = this.xing+newVal;
            }
        }
    })
</script>

通过上面的案例,我们基本掌握了侦听器的使用,但是我们也发现,与计算属性相比,侦听器并没有优势;也不见得好用,直观上反而比计算属性的使用更繁琐;

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="div">
    <input type="text" v-model="xing">
    <input type="text" v-model="ming">
    {{ fullname }}
</div>
<script src="./jq.js"></script>
<script>
    var app = new Vue({
        el: '#div',
        data: {
            xing: '',
            ming: '',
            fullname:''
        },
        // 设置侦听器
        watch: {
            // 侦听器中的方法名和要真挺的数据属性名必须一致
            // xing 发生变化,侦听器就会被执行,且将变化后的值和变化前的值传入
            xing:function(newVal,old_val){
                // this.fullname = newVal+this.ming;
                var t = this;
                // 在侦听器中执行异步网络请求
                $.get('./xx.php',(d)=>{
                    t.fullname = d;
                })
            },
        }
    })
</script>

6.2 使用ref操作DOM

在学习 jq 时,我们首要任务就是学习选择的使用,因为选择可以极其方便帮助我们获取节点查找dom,因为我们要通过dom展示处理数据。而在Vue中,我们的编程理念发生了变化,变为了数据驱动dom;但有时我们因为某些情况不得不脱离数据操作dom,因此vue为我们提供了 ref 属性获取dom节点;

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="app">
    <input type="button" @click='click' value="按钮"> <br>
    <p ref="pv">123</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            click: function () {
                // 使用原生JS获取dom数据
                // var p = document.getElementsByTagName('p')[0].innerHTML;
                // console.log(p);

                // 使用vue ref 属性获取dom数据
                var d = this.$refs.pv.innerHTML;
                console.log(d);
            }
        }
    })
    console.log(app.$refs);
</script>

但是在项目开发中,尽可能不要这样做,因为从一定程度上,ref 违背的mvvm设计原则;

6.3 过滤器的使用

6.3.1 私有(局部)过滤器

定义过滤器

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var app = new Vue({
    el: '#app',
    data:{msg:'UP'},
    //定义过滤器
    filters:{
        // 过滤器的名称及方法
        myFilters:function(val){
            return val.toLowerCase();
        }
    }
})

过滤器的使用:

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化转义等操作。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器要被添加到操作值得后面,使用 管道符 | 分割;vue会自动将操作值,以实参的形式传入过滤器的方法中;

{{msg|myFilters}}

过滤敏感词汇

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="app">
    <input type="text" v-model="msg"> <br>
    {{msg|myFilters|get3}}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            msg:''
        },
        //定义过滤器
        filters:{
            // 过滤器的名称及方法
            myFilters:function(val){
                return val.toLowerCase();
            },
            get3:function(val){
                // 遇到数字替换为 0 
                // var reg = /\d/g;
                // return val.replace(reg,0);

                return val.replace('苍井空','***');
            }
        }
    })
</script>
6.3.2 全局过滤器

上面的代码中,myFiltersget3 两个过滤器,仅在当前 vue 实例中可用;如果在代码 再次 var app2 = new Vue() 得到变量为 app2 的 vue 实例,则两个过滤器在 app2中都不可用;如果需要过滤器在所有实例对象中可用,我们需要声明 全局过滤器

Vue.filter(名称,处理器)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="app">
    <input type="text" v-model="msg"> <br>
    {{msg|myFilters}}
</div>
<!-- 定义两个DOM节点 -->
<div id="app2">
    <input type="text" v-model="msg"> <br>
    {{msg|myFilters|get3}}
</div>
<script>
    Vue.filter('myFilters', function (val) {
        return val.toLowerCase();
    })
    // 定义两个全局过滤器
    Vue.filter('get3', function (val) {
        return val.replace('苍井空','***');
    })


    // 两个Vue 实例
    var app = new Vue({
        el: '#app',
        data: {
            msg: ''
        }
    })
    var app2 = new Vue({
        el: '#app2',
        data: {
            msg: ''
        }
    })
</script>

6.4 自定义指令

前面我们学过 v-on 、v-model、v-show 等指令,在操作 dom 时使用了 ref 属性,其实之前学过的指令也是操作dom 的一种方式,但有时,这些指令并不能满足我们的需求,因此 vue 允许我们自定义指令来操作 dom

6.4.1 全局自定义指令
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="app">
    <p v-setcolor>自定义指令的使用</p>
</div>
<script>
    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('setcolor', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
            // 聚焦元素
            el.style.color = 'red';
        }
    })
    var app = new Vue({
        el: '#app',
    })
</script>
6.4.2 私有(局部)自定义指令
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="app">
    <p v-setcolor>自定义指令的使用</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        // 注册 局部(私有)指令
        directives: {
            // 定义指令名称
            setcolor: {
                // 当被绑定的元素插入到 DOM 中时……
                inserted: function (el) {
                    // 聚焦元素
                    el.style.color = 'red';
                }
            }
        }
    })
</script>
6.4.3 利用自定义指令使TodoList获取焦点
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<input @keyup.enter="addTodo" v-getfocus class="new-todo" placeholder="请输入" >
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 注册 局部(私有)指令
directives: {
    // 定义指令名称
    getfocus: {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        }
    }
},
6.4.4 为自定义指令传值

之前学习的指令中,有的指令可以传值,有的则没有,而我们自定的指令中是没有值的,如果想为自定义指令赋值,如下即可:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="app">
    <p v-setcolor='colors'>自定义指令的使用</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            colors:'yellow'
        },
        // 注册 局部(私有)指令
        directives: {
            // 定义指令名称
            setcolor: {
                // 自定义指令可以接受第二个参数
                inserted: function (el,val) {
                    // 第二个参数中包含了指令名称、挂载名称及数据键值
                    console.log(val);
                    // 聚焦元素
                    el.style.color = val.value;
                }
            }
        }
    })
</script>

6.5 过度及动画

我们可以使用v-if或者v-show控制dom元素的显示和隐藏

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="app">
    <button @click="go">显示/隐藏</button>
    <p v-show="is">pppppp1111</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isShow: true,
        },
        methods: {
            go() {
                this.isShow = !this.isShow;
            }
        }
    })
</script>

而在显示和隐藏的过程中,我们加入一些动画效果:

在进入/离开的过渡中,会有 6 个 class 切换。

  1. v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
  2. v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
  3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
  4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
  5. v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
  6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。

对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 <transition>,则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">,那么 v-enter 会替换为 my-transition-enter

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style>
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 1s;
    }

    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }

    .man-enter-active,
    .man-leave-active {
        transition: opacity 4s;
    }

    .man-enter,
    .man-leave-to {
        opacity: 0;
    }
</style>

<div id="app">
    <button @click="go">显示/隐藏</button>
    <transition name="fade">
        <p v-show="isShow">pppppp1111</p>
    </transition>

    <transition name="man">
        <p v-show="isShow">pppppp222</p>
    </transition>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isShow: true,
        },
        methods: {
            go() {
                this.isShow = !this.isShow;
            }
        }
    })
</script>

这就是Vue中动画及过渡的基本使用方式,因为这些动画效果都需要我们自己写CSS样式,相对比较麻烦,在项目中,大多情况下,我们会借助第三方 CSS 动画库来实现,如:Animate.css ;后面项目中具体使用时,我们在进一步学习第三方 CSS 动画库的使用;

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
3 条评论
热度
最新
这里还有个问题,就是客户端密钥得保存是个问题。这个应该也是会有泄露的风险
这里还有个问题,就是客户端密钥得保存是个问题。这个应该也是会有泄露的风险
回复回复1举报
timestamp 重放攻击 ,《如果在60s之后进行重放攻击》 这句话是错的,应该是在60s之内进行重放攻击,而不是60s之后
timestamp 重放攻击 ,《如果在60s之后进行重放攻击》 这句话是错的,应该是在60s之内进行重放攻击,而不是60s之后
111举报
确实,博主应该是笔误了
确实,博主应该是笔误了
回复回复点赞举报
推荐阅读
公司来了个大神,三方接口调用方案设计的真优雅~~
在为第三方系统提供接口的时候,肯定要考虑接口数据的安全问题,比如数据是否被篡改,数据是否已经过时,数据是否可以重复提交等问题。
程序员蜗牛
2024/04/22
2.9K0
公司来了个大神,三方接口调用方案设计的真优雅~~
电商系统中API接口防止参数篡改和重放攻击(小程序/APP)
来源:https://www.cnblogs.com/jurendage/p/12886352.html
良月柒
2021/01/25
1.4K0
电商系统中API接口防止参数篡改和重放攻击(小程序/APP)
企业API接口设计(token、timestamp、sign)之具体实现
Token:访问令牌access token, 用于接口中, 用于标识接口调用者的身份、凭证,减少用户名和密码的传输次数。一般情况下客户端(接口调用方)需要先向服务器端申请一个接口调用的账号,服务器会给出一个appId和一个key, key用于参数签名使用,注意key保存到客户端,需要做一些安全处理,防止泄露。
lyb-geek
2019/11/30
3.1K0
大厂案例 - 通用的三方接口调用方案设计(上)
在为第三方系统提供接口时,关键是确保数据的完整性、安全性和防止重复提交。以下是一个基于API密钥(Access Key/Secret Key)和回调机制的设计方案,具有多层次的安全保障。
小小工匠
2024/05/26
4.9K0
大厂案例 - 通用的三方接口调用方案设计(上)
如何保证API接口安全?
在实际的业务开发过程中,我们常常会碰到需要与第三方互联网公司进行技术对接,例如支付宝支付对接、微信支付对接、高德地图查询对接等等服务,如果你是一个创业型互联网,大部分可能都是对接别的公司api接口。
纯洁的微笑
2021/07/01
1.7K0
如何保证API接口安全?
三方接口调用设计方案
为保障三方接口的安全性,可采取多方面措施,包括使用 HTTPS 协议确保数据传输安全,利用 AK 和签名进行身份验证以及对请求验签来防止非法请求与重放攻击,还有对敏感数据进行加密传输等。不过具体实现细节会因项目需求而存在差异,并且在实际开发中,还需兼顾错误处理、异常情况处理以及日志记录等方面内容。
用户1142828
2024/12/08
2930
标准API接口设计规范
在设计和实现API接口时,我们经常需要处理一些敏感数据,例如用户的登录密码、银行卡号、身份证号码等。这些信息若以明文形式在网络上传输,将面临极大的安全风险,容易受到恶意监听和数据泄露的威胁。
Tinywan
2024/06/04
4780
标准API接口设计规范
SpringBoot 如何保证接口安全?老鸟们都是这么玩的!
对于互联网来说,只要你系统的接口暴露在外网,就避免不了接口安全问题。 如果你的接口在外网裸奔,只要让黑客知道接口的地址和参数就可以调用,那简直就是灾难。
闻说社
2023/03/13
1.6K0
这才叫 API 接口设计!
大家好,我是鱼皮,前段时间在 星球 里看到了一位小伙伴分享的文章《API 接口设计最佳实践》,我也读了一遍,写的确实好,给大家分享一下,相信对后端开发的小伙伴会很有帮助。
程序员鱼皮
2022/04/08
2.9K0
这才叫 API 接口设计!
如何保证API接口安全?
在实际的业务开发过程中,我们常常会碰到需要与第三方互联网公司进行技术对接,例如支付宝支付对接、微信支付对接、高德地图查询对接等等服务,如果你是一个创业型互联网,大部分可能都是对接别的公司api接口。当你的公司体量上来了时候,这个时候可能有一些公司开始找你进行技术对接了,转变成由你来提供api接口,那这个时候,我们应该如何设计并保证API接口安全呢?
老K博客
2024/12/10
3040
如何保证API接口安全?
拒绝接口裸奔!开放API接口签名验证!
为开发者分配AccessKey(开发者标识,确保唯一)和SecretKey(用于接口加密,确保不易被穷举,生成算法不易被猜测)。
架构师修炼
2020/09/30
1.4K0
安全|API接口安全性设计(防篡改和重复调用)
API接口的安全性主要是为了保证数据不会被篡改和重复调用,实现方案主要围绕Token、时间戳和Sign三个机制展开设计。
黄小怪
2018/12/07
10.5K0
探讨三方接口调用方案设计
三方接口设计是实现系统功能的关键环节。设计一个安全、高效且易于维护的接口调用方案,对于保障系统稳定性、数据安全性和用户体验至关重要。
公众号:码到三十五
2024/11/25
3220
前后端分离 , 如何保证接口安全性 ?
用户使用用户名密码登录后服务器给客户端返回一个Token(通常是UUID),并将Token-UserId以键值对的形式存放在缓存服务器中。服务端接收到请求后进行Token验证,如果Token不存在,说明请求无效。
Jensen_97
2023/07/20
2.8K0
前后端分离 , 如何保证接口安全性 ?
SpringBoot接口设计防篡改和防重放攻击
由于提供给第三方服务调用的 API 接口需要暴露在外网中,并且接口上提供了具体的请求地址和请求参数,那么,接口就有可能被人抓包拦截并对请求参数进行修改后再次发起请求 ,这样一来可能会被盗取信息,二来服务器可能会受到攻击。
程序员皮皮林
2024/11/15
6750
SpringBoot接口设计防篡改和防重放攻击
拒绝接口裸奔!开放API接口签名验证!
为开发者分配AccessKey(开发者标识,确保唯一)和SecretKey(用于接口加密,确保不易被穷举,生成算法不易被猜测)。
java思维导图
2020/09/30
2K0
拒绝接口裸奔!开放API接口签名验证!
十种接口安全方案!!!
日常开发中,如何保证接口数据的安全性呢?接口数据安全的保证过程,主要体现在这几个方面:一个就是数据传输过程中的安全,还有就是数据到达服务端,如何识别数据,最后一点就是数据存储的安全性。介绍下保证接口数据安全的10个方案。
绿毛龟
2024/01/19
1.1K0
十种接口安全方案!!!
API 接口的安全设计验证,我是这么做的!
与前端对接的API接口,如果被第三方抓包并进行恶意篡改参数,可能会导致数据泄露,甚至会被篡改数据,我主要围绕时间戳,token,签名三个部分来保证API接口的安全性
架构师修炼
2021/05/17
1K0
API 接口的安全设计验证,我是这么做的!
Spring Cloud微服务,如何保证对外接口的安全?
通常来说,要将暴露在外网的 API 接口视为安全接口,需要实现防篡改和防重放的功能。
码猿技术专栏
2023/12/31
5540
Spring Cloud微服务,如何保证对外接口的安全?
API接口签名验证,你学废了吗
为开发者分配AccessKey(开发者标识,确保唯一)和SecretKey(用于接口加密,确保不易被穷举,生成算法不易被猜测)。
Java技术精选
2021/08/16
2.8K0
相关推荐
公司来了个大神,三方接口调用方案设计的真优雅~~
更多 >
LV.1
这个人很懒,什么都没有留下~
目录
  • 第6章 知识点汇总
    • 6.1 计算属性与侦听器
      • 6.1.1 计算属性
      • 6.1.2 利用计算属性获取未完成任务个数
      • 6.1.3 使用侦听器
    • 6.2 使用ref操作DOM
    • 6.3 过滤器的使用
      • 6.3.1 私有(局部)过滤器
      • 6.3.2 全局过滤器
    • 6.4 自定义指令
      • 6.4.1 全局自定义指令
      • 6.4.2 私有(局部)自定义指令
      • 6.4.3 利用自定义指令使TodoList获取焦点
      • 6.4.4 为自定义指令传值
    • 6.5 过度及动画
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档