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属性里面的数据,当这个数据发生变化时,将自动执行这个函数。

    主要用来 监听某些特定数据的变化,从而进行某些业务逻辑的操作; 可以看做是computedmethods的结合体;(场景:监听路由地址)

注意点

    • 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的更多相关文章

  1. ch4-计算属性(表达式计算 computed methods watchers)

    1 计算属性 1.1 模板内的表达式是非常便利的,但是它们实际上只用于简单的运算. 在模板中放入太多的逻辑会让模板过重且难以维护. <div id="test1"> { ...

  2. [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 ...

  3. vue-learning:0 - 目录

    Vue-learning vue.js学习路径 Vue的API地图 点击查看vue的API地图 视图层 点击可直接到达详情页面 指令 {{ }} / v-html v-if / v-else / v- ...

  4. Vue快速认识

    1.Vue入门初识 1.1 Vue.js是什么? 一位华裔前Google工程师(尤雨溪)开发的前端js库 作用: 动态构建用户界面 特点: 遵循MVVM模式 编码简洁, 体积小, 运行效率高, 移动/ ...

  5. Vuejs中关于computed、methods、watch,mounted的区别

    1.computed是在HTML DOM加载后马上执行的,如赋值: 2.methods则必须要有一定的触发条件才能执行,如点击事件: 3.watch呢?它用于观察Vue实例上的数据变动.对应一个对象, ...

  6. vue computed和methods 计算属性和侦听器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. Vue 基础自查——watch、computed和methods的区别

    1 前言 创建一个Vue实例时,可以传入一个选项对象 const vm = new Vue({ data: { msg: 'hello' }, computed: {}, methods: {}, w ...

  8. [转]ASP.NET Core Exception Filters and Resource Filters

    本文转自:https://damienbod.com/2015/09/30/asp-net-5-exception-filters-and-resource-filters/ This article ...

  9. jQ1.5源码注释以及解读RE

    jQ作为javascript的库( ▼-▼ ), 尽善尽美, 代码优美,  值得学习.  这一周平常上班没啥事也看jQ1.5的代码, 今天周六差不多看完了(Sizzle部分还没看), 重新看了一下, ...

  10. 立即执行函数(IIFE)的理解与运用

    作为JavaScript的常用语法,立即执行函数IIFE(Immediately-Invoked Function Expression)是值得我们认真去学习探究的. 一.创建函数的两种方式 我们先从 ...

随机推荐

  1. P2P 下载入门

    基本概念 直链下载: https://file-examples.com/wp-content/storage/2017/04/file_example_MP4_480_1_5MG.mp4 直链就是一 ...

  2. 【YashanDB知识库】v$instance视图中实例角色含义不明确

    [标题]v$instance视图中实例角色含义不明确 [问题分类]文档问题 [关键词]YashanDB, v$instance, 实例角色 [问题描述]v$instance视图中实例角色(如MASTE ...

  3. NOIP 考前板子复习

    点双 注意两个点,特判单点,是 son = 0 且 fa = 0,因为自环,还有弹栈弹到儿子节点处,因为点双不一定由割点弹出. code void dfs(int u, int la) { int s ...

  4. CSS & JS Effect – Textarea Autoresize

    前言 这是一个很普遍的体验, 而且实现起来也很简单哦 参考 YouTube – How to Auto Resize Textarea using HTML CSS & JavaScript ...

  5. 3.1 gradio的基本使用详解

    ·gr.Text:用于文本输入,适用于自然语言处理任务的模型. gr.Image:用于图像上传,适用于图像处理或计算机视觉模型. ·gr.Audio:用于音频输入,适用于语音识别或音频处理模型. im ...

  6. 智慧高校IT智能运维方案

    当前高校网络已成为每个学校必备的信息基础设施,也成了学校提高教学.科研及管理水平的重要途径和手段.随着信息化发展,高校网络建设逐步走向数字化.智慧化,传统的人力巡检.运维逐渐难以支撑高校校园稳定运行. ...

  7. 完美转发(模板)--T&&

    在C++模板编程中,完美转发(Perfect Forwarding)是一种技术,旨在保留函数参数的值类别,即在将参数传递到另一个函数时,无论参数是左值还是右值,都能够保持它的原始性质,而不会因为转发丢 ...

  8. linux 挂载硬盘报错 "mount: unknown filesystem type 'ntfs'"

    这个错误是说,系统无法识别ntfs格式的硬盘.所以不能直接挂载. 解决这个问题的思路有两个: 格式化磁盘为linux可以识别的格式. 通过工具使linux可以识别ntfs格式. 如果是第一次挂载硬盘可 ...

  9. MQ核心作用异步&削峰&解耦使用场景详解

    说在前面 在如今的高并发互联网应用中,如何确保系统在巨大的流量冲击下还能稳稳当当运转,是每个技术团队都会遇到的挑战.说到这,消息队列(MQ) 就是背后的"大功臣"了. 无论是异步处 ...

  10. 2023年2月中国数据库排行榜:OTO新格局持续三月,人大金仓、AnalyticDB排名创新高

    玉兔迎春至,榜单焕新颜. 2023年2月,兔年开年的 墨天轮中国数据库流行度排行 火热出炉,本月共有259个数据库参与排名,排行榜样式去掉了较上月和半年前得分差的数据显示,更加聚焦各产品之间的排名变化 ...