computed methods watch filters
computed(计算属性)
计算属性该属性里面的方法必须要有return返回值,这个返回值就是(value值)。
有几个关键点
- 1) 计算后属性不需要在data中重复定义
- 2) 计算后属性必须渲染后,绑定的方法才会生效
这里指就是定义后的变量名在上面html中显示
- 3) 计算后属性绑定的方法中的任意变量值更新,方法都会被调用
比如说方法中一个变量A,变量A变了函数会重新调用
- 4) 计算后属性为只读属性(不可写)
计算后属性为只读属性
- 5) 属性的结果会被缓存, 除非依赖的响应式属性变化才会重新计算, 主要 当做属性来使用;(虽然是个方法,但是当做属性使用)(场景:引用一些经过操作的数据)
1 computed: {
2 function () {
3 return this.firstName + this.lastName
4
5 }
6 }
methods(方法)
表示一个具体的操作, 主要写 业务逻辑;(场景:方法的调用)
methods属性里面的方法会在数据发生变化的时候你,只要引用了此里面分方法,方法就会自动执行。这个属性没有依赖缓存
watch(监听器)
这个监听的是data属性里面的数据,当这个数据发生变化时,将自动执行这个函数。
主要用来 监听某些特定数据的变化,从而进行某些业务逻辑的操作; 可以看做是computed
和methods
的结合体;(场景:监听路由地址)
注意点
- 1) 监听绑定的属性,该属性可以get、set
- 2) 监听的属性一旦发生值更新,绑定的方法就会被调用
- 3) 监听的属性是已定于的属性
必须在data中定义
1 watch: {
2 firstName: function (val) {
3 this.fullName = val + ' ' + this.lastName
4 },
5 lastName: function (val) {
6 this.fullName = this.firstName + ' ' + val
7 }
8
9 }
filter(过滤器)
内容格式化,将输入的数据,按照某种规则进行输出,从这一层讲,感觉叫 formatter 可能更合适;
与methods中定义的一个方法使用方法差不多
computed methods watch filters的更多相关文章
- ch4-计算属性(表达式计算 computed methods watchers)
1 计算属性 1.1 模板内的表达式是非常便利的,但是它们实际上只用于简单的运算. 在模板中放入太多的逻辑会让模板过重且难以维护. <div id="test1"> { ...
- [AngularJS] Extract predicate methods into filters for ng-if and ng-show
Leaking logic in controllers is not an option, filters are a way to refactor your code and are compa ...
- vue-learning:0 - 目录
Vue-learning vue.js学习路径 Vue的API地图 点击查看vue的API地图 视图层 点击可直接到达详情页面 指令 {{ }} / v-html v-if / v-else / v- ...
- Vue快速认识
1.Vue入门初识 1.1 Vue.js是什么? 一位华裔前Google工程师(尤雨溪)开发的前端js库 作用: 动态构建用户界面 特点: 遵循MVVM模式 编码简洁, 体积小, 运行效率高, 移动/ ...
- Vuejs中关于computed、methods、watch,mounted的区别
1.computed是在HTML DOM加载后马上执行的,如赋值: 2.methods则必须要有一定的触发条件才能执行,如点击事件: 3.watch呢?它用于观察Vue实例上的数据变动.对应一个对象, ...
- vue computed和methods 计算属性和侦听器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue 基础自查——watch、computed和methods的区别
1 前言 创建一个Vue实例时,可以传入一个选项对象 const vm = new Vue({ data: { msg: 'hello' }, computed: {}, methods: {}, w ...
- [转]ASP.NET Core Exception Filters and Resource Filters
本文转自:https://damienbod.com/2015/09/30/asp-net-5-exception-filters-and-resource-filters/ This article ...
- jQ1.5源码注释以及解读RE
jQ作为javascript的库( ▼-▼ ), 尽善尽美, 代码优美, 值得学习. 这一周平常上班没啥事也看jQ1.5的代码, 今天周六差不多看完了(Sizzle部分还没看), 重新看了一下, ...
- 立即执行函数(IIFE)的理解与运用
作为JavaScript的常用语法,立即执行函数IIFE(Immediately-Invoked Function Expression)是值得我们认真去学习探究的. 一.创建函数的两种方式 我们先从 ...
随机推荐
- STL 改造红黑树 模拟封装set和map
改造红黑树 目录 改造红黑树 适配STL迭代器的红黑树 基本结构 RBTreeNode __RBTree_iterator RBTree 完整代码 封装的set 封装的map 在初次看STL中实现红黑 ...
- 【Docker教程系列】Docker学习5-Docker镜像理解
通过前面几篇文章的学习,我们已经安装好了Docker,也学会使用一些常用的命令.比如启动命令.镜像命令.容器命令.常用命令分类后的第二个就是镜像命令.那么镜像是什么?拉取镜像的时候为什么是一层一层的? ...
- sicp每日一题[2.3]
Exercise 2.3 Implement a representation for rectangles in a plane. (Hint: You may want to make use o ...
- LinkedHashMap原理详解—从LRU缓存机制说起
写在前面 从一道Leetcode题目说起 首先,来看一下Leetcode里面的一道经典题目:146.LRU缓存机制,题目描述如下: 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结 ...
- 编写自己的简易版网络协议栈(1)--arp协议,使用wireshark抓包分析
实验环境: 略. 实验背景:已编写好基于以太网接口的输入处理,能够解析到以太网数据包内的帧类型. 1. 协议栈底层采用轮询方式,即轮询以太网数据包. 2. 若收到数据,则交由以太网输入处理模块进行解析 ...
- Python版Mysql爆破小脚本
本文给大家分享的是使用Python制作的MySQL在线用户密码的暴力破解脚本,非常的好用,有需要的小伙伴可以参考下 Mysql Python版本爆破小脚本,需要安装Python插件MySQL-py ...
- SuperMap iServer&iPortal&iEdge结合CAS 5.3服务器实现单点登录
2023-10-19 更新,由于阿里云maven镜像仓库里缺失了很多CAS5.3 依赖,如果缺少可以用附件里的同步到本地仓库 链接:https://pan.baidu.com/s/14DhRci_Am ...
- USB协议详解第4讲(USB描述符-标准配置描述符)
1.USB描述符 USB描述符有设备描述符.标准配置描述符.接口描述符.端点描述符.字符串描述符,HID设备有HID描述符.报告描述符和物理描述符.今天主要是学习USB标准配置描述符的组成. 2.标准 ...
- linux中backport printk和front printk的区别
在Linux内核中,"backport printk"和"front printk"都是用于记录内核消息和调试信息的机制,但它们的工作方式和使用场景有一些区别. ...
- 我对CMD 和 AMD 的理解 ?
都是模块规范,和 CommonJs 一样都是社区规范,ES-module 才是官方规范,而且官方规范是趋势 : AMD:Asynchronous Module Definition 异步模块定义,即 ...