Vue 常用属性

news2024/11/9 4:53:52

数据属性


  • 组件的 data 选项是一个函数(data里面是有return的)。Vue 会在创建新组件实例的过程中调用此函数(将里面定义的变量都放到实例里面去,你就可以使用this点出来,包括HTML里面就能够使用这些变量的)。
  • 它应该返 回一个对象,然后 Vue 会通过响应性系统将其包裹起来,并以 $data 的形式存储在组件实例中。
  • 为方便起见,该对象的任何顶级“属性也会直接通过组件实例暴露出来。(本来是使用this.$data.msg点出来,现在this.msg就可以出来了)

 vm.$data.msg其实和vm.msg就是同一个东西,就像一个语法糖。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">

    </style>
</head>

<body>    
    <div id="vue">
        <!--引入并且使用变量-->
      msg:{{ msg }}
    </div>

    <script type="text/javascript">
        const HelloVueApp = {
            data(){
                return{
                    msg: "hello"
                }
            }
        } 
    //创建vm实例,vm是实例的名称
    const vm = Vue.createApp(HelloVueApp).mount("#vue")
    //将vue实例挂载到对应的选择器上面去,干了两件事情,第一初始化实例,其次是挂载 
     // 'Hello Vue!'
    console.log(msg)   // 'Hello Vue!'
    vm.msg = "hello world"
    console.log(vm.$data.msg) 

    
    </script>

</body>

</html>

 

 

 

方法


方法(methods):处理数据的函数,在methods选项中定义的函数称为方法。

methods 选项中定义的方法与 data 选项中的数据一样,可以在组件的模板中使用(挂载到html中某个dom上面)。 在模板中,它们通常被当做事件监听使用。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">
    </style>
</head>

<body>    
    <div id="hello-vue">
       <button type="button" @click="increment()">增加</button>
       <p>count:{{ count }}</p> 
    </div>
         
    <script type="text/javascript">
      const HelloVueApp = {
        data(){
            return{
                count: 0
            }
        },
        methods:{
            increment(){
                this.count++
            }
        }
      }
      Vue.createApp(HelloVueApp).mount("#hello-vue")
    </script>

</body>

</html>

 

计算属性


计算属性(computed):根据所依赖的数据动态显示新的计算结果。

示例 : 需要在 {{}} 里添加计算再展示数据,例如统计分数,数值计算一般用法:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">
    </style>
</head>

<body>    
    <div id="hello-vue">
       <button type="button" @click="increment()">增加</button>
       <p>总分:{{ chinese + math + english }}</p> 
    </div>
         
    <script type="text/javascript">
      const HelloVueApp = {
        data(){
            return{
                chinese: 10,
                math: 20,
                english: 30
            }
        }
      }
      const vm = Vue.createApp(HelloVueApp).mount("#hello-vue")
    </script>

</body>

</html>

computed 计算属性用法:
小结: 计算属性一般就是用来通过其他的数据算出一个新数据,而且它有一个好处就是, 它把新的数据缓存下来了,当其他的依赖数据没有发生改变,它调用的是缓存的数据,这就极大的提高了我 们程序的性能。
而如果写在methods里,数据根本没有缓存的概念,所 以每次都会重新计算。这也是为什么不用methods 的原因 !
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">
    </style>
</head>

<body>    
    <div id="hello-vue">
       <p>总分:{{ sum }}</p> 
    </div>
         
    <script type="text/javascript">
      const HelloVueApp = {
        data(){
            return{
                chinese: 10,
                math: 20,
                english: 30
            }
        },
        computed:{
            sum: function(){
              let a = this.math + this.chinese + this.english
              return a 
            }
        }
      }
      const vm = Vue.createApp(HelloVueApp).mount("#hello-vue")
    </script>

</body>

</html>

你要的数据名不需要在data里面去定义,但是数据还是需要的,你的数据都是从data里面拿到的。

 

监听属性


监听属性(watch):是一个观察动作,监听data数 据变化后触发对应函数,函数有newValue(变化之后结果)oldValue(变化之前结果)两个参数。 当需要在数据变化时执行异步或开销较大的操作时, 这个方式是最有用的。

 某些值在变化了被监听到之后,获取数据,展示出来。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">

    </style>
</head>

<body>    
    <div id="hello-vue">
      <p>旧值:{{ oldmsg }}</p>
      <p>新值:{{ watchnewmsg }}</p>
      <button type="button" @click="btn()">按钮</button>
    </div>
         
    <script type="text/javascript">
      const HelloVueApp = {
        data(){
            return{
                oldmsg: "Hello Vue!",
                watchnewmsg: '111'
            }
        },
        methods:{
            btn(){
               this.oldmsg = 'Hello xxxx'
            }
        },
        watch: {
            oldmsg: {
                handler(newValue, oldValue) {
                console.log(newValue, oldValue)
                this.watchnewmsg = newValue
            }
        }
     }
        //立即处理,进入页面就触发
        immediate: true
    }
      Vue.createApp(HelloVueApp).mount("#hello-vue")
    </script>

</body>

</html>

 可以看到老的值是hello vue,新的值是hello china。函数里面只定义了oldmsg的变化,并没有定义watchnewmsg的变化。在watch里面监听到了之后,它才发生了watch msg的变化。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/671734.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LabVIEW开发航空航天器风洞的数据采集系统

LabVIEW开发航空航天器风洞的数据采集系统 空气动力及其系数的评估是航空航天器设计中的一项基本任务&#xff0c;对于考虑制造高效飞行器非常重要。航空航天器的效率是根据其稳定性、最小阻力和更高的机动性来定义的。在风洞中使用航空航天飞行器模型进行测试&#xff0c;而不…

【Leetcode】11.盛最多水的容器

一、题目 1、题目描述 给定一个长度为 n 的整数数组 height 。有 n 条垂线,第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线,使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明:你不能倾斜容器。 示例1: 输…

Nautilus Chain:模块化Layer3的先行者

“模块化特性的 Nautilus Chain 正在成为 Layer3 的早期定义者之一&#xff0c;并有望进一步推动区块链更广泛的应用与实践 ” 自以太坊创始人 Vitalik Buterin 在去年提出 Layer3 的概念后&#xff0c;行业始终对“Layer3”进行讨论&#xff0c;并期望推动该概念&#xff0c;从…

mysql版本5.5.*升级为5.7.*,遇到的问题和解决方法都来看看吧,最终升级成功~

背景&#xff1a;由于项目比较老&#xff0c;用的数据库版本也是相当低&#xff0c;现在业务需求需要做数据同步&#xff0c;使用FlinkCDC的时候报数据库版本低&#xff0c;查询FlinkCDC要求的最低版本后果断升级mysql~ FlinkCDC对mysql最低版要求如下图&#xff1a; &#x…

excel导出百万数据与进度条展示

前言 需求&#xff1a;用户在UI界面上选择想要导出的列&#xff0c;然后点击导出按钮&#xff0c;就能导出用户想要的数据。 效果展示 可能会产生的问题 1.如果同步到数据&#xff0c;接口很容易造成超时。 2.如果把数据一次性装载到内存里&#xff0c;很容易造成OOM与GC。 3…

【计算机网络自顶向下】简答题习题总结(二)

目录 第二章 应用层 HTTP FTP文件传输协议 电子邮件 域名系统DNS 内容分发网络CDN 常考问题 题目 第二章 应用层 HTTP 网页&#xff08;Web页&#xff0c;或称文档&#xff09;由许多对象组成&#xff0c;每个对象被一个URL(Uniform Resource Locator统一资源定位符)寻…

帅呆!接口开发不用写Controller、Service、Dao、Mapper、XML、VO,全自动生成

今天给小伙伴们介绍一个Java接口快速开发框架-magic-api 简介 magic-api 是一个基于 Java 的接口快速开发框架&#xff0c;编写接口将通过 magic-api 提供的 UI 界面完成&#xff0c;自动映射为 HTTP 接口&#xff0c;无需定义 Controller、Service、Dao、Mapper、XML、VO 等…

MySQL连环炮,你抗的住嘛?

最近后台好多小伙伴发私信咨询阿Q&#xff0c;问马上就是金九银十的面试黄金期了&#xff0c;该如何在三个月内突击一下&#xff0c;以便更好地通过面试呢&#xff1f; 有想赚点外块|技术交流的朋友&#xff0c;欢迎来撩 阿Q的想法就是需要对自己掌握的知识进行归纳整理&#x…

云原生应用交付平台Orbit设计理念与价值主张

本文作者&#xff1a;何文强——腾讯云 CODING 高级架构师。 负责 CODING DevOps产品解决方案架构设计和技术产品布道以及 CODING 云原生技术研究与落地实践。在多个技术大会担任演讲嘉宾&#xff0c;腾讯云 CODING DevOps 课程认证出品人&#xff0c;腾讯云云原生训练营核心初…

论文解读:DETRs Beat YOLOs on Real-time Object Detection

发表时间&#xff1a;2023 论文地址&#xff1a;https://arxiv.org/abs/2304.08069 项目地址&#xff1a;https://github.com/PaddlePaddle/PaddleDetection/tree/develop/configs/rtdetr 【官方】 或 https://github.com/ultralytics/ultralytics/tree/main/ultralytics/vit/r…

大数据云计算运维之HA高可用服务搭建

HA高可用服务搭建 1、HA Cluster高可用集群 HA是High Available缩写。 HA Cluster是指高可用性集群&#xff0c;是保证业务连续性的有效解决方案&#xff0c;一般 有两个或两个以上的节点&#xff0c;且分为活动节点及备用节点。 FailOver&#xff1a;故障自动切换&#xff…

前端后端交互-ElementUI(日期选择器)

日期选择器 页面效果 页面效果 组件源码 <!-- daterange: 范围选择类型format: 绑定后表单中显示的格式value-format: 传递时显示的格式--> <template><el-date-picker v-model"rangeTime" type"daterange" range-separator"至" …

RabbitMQ使用延迟插件,代码量直接减少一半!

今天介绍一下使用RabbitMQ的延迟插件方便实现延迟消息的方案。 RabbitMQ 是一个由 Erlang 语言开发的 AMQP(高级消息队列协议) 的开源实现。 RabbitMQ 是轻量级且易于部署的&#xff0c;能支持多种消息协议。 RabbitMQ 可以部署在分布式和联合配置中&#xff0c;以满足高规模…

【立体视觉(四)】之极线校正与双目视觉

【立体视觉&#xff08;四&#xff09;】之极线校正与双目视觉 一、极线校正一&#xff09;Fusiello校正法1. 转换矩阵计算1&#xff09;计算旋转矩阵 R n R_n Rn​2&#xff09;计算内参矩阵 K n K_n Kn​3&#xff09;计算转换矩阵 T T T 2. 核线影像生成 二、双目视觉 此…

css基础知识五:CSS中,有哪些方式可以隐藏页面元素?区别?

一、前言 在平常的样式排版中&#xff0c;我们经常遇到将某个模块隐藏的场景 通过css隐藏元素的方法有很多种&#xff0c;它们看起来实现的效果是一致的 但实际上每一种方法都有一丝轻微的不同&#xff0c;这些不同决定了在一些特定场合下使用哪一种方法 二、实现方式 通过…

【IC设计】ICC1 workshop lab guide 学习笔记——Lab 2 Design Planning Task1-4

文章目录 Lab 2 Design Planning2.1 Load the Design2.2 Initialize the Floorplan2.3 Preplace the Macros Connected to I/O Pads2.4 Perform Virtual Flat Placement Lab 2 Design Planning 2.1 Load the Design 进入lab2_dp目录并打开icc_shell&#xff0c;打开orca_lib.…

雪花去噪算法学习记录(一)之基础知识

在进行实验过程中&#xff0c;需要完成对雪天图像的处理&#xff0c;其中一个主要操作为去雪。相较于去雾&#xff0c;去雨模型&#xff0c;去雪模型相对较少&#xff0c;因此在研究时所能够借鉴的资料有限&#xff0c;这对我们的研究造成了一定困扰。 模型算法 DesnowNet网络…

[VPN]华为SecoClient客户端Linux使用

准备 安装环境&#xff1a;CentOS 下载安装包&#xff1a; # wget http://www.corem.com.cn/sites/default/files/tools/secoclient/secoclient-linux-64-7.0.2.26.run 安装 在root用户下&#xff0c;执行&#xff1a; # chmod x secoclient-linux-64-7.0.2.26.run # ./secoc…

瞎搞!你真的懂什么是ERP、中台、低代码吗?

企业数字化领域从来都不缺新概念 从制造资源计划到中台&#xff0c;企业MRP报表数字还没对齐&#xff0c;就要忙着“去烟囱”化&#xff1b; 从中台到低代码&#xff0c;企业“数据孤岛”还没打通&#xff0c;又要忙着“赋能数字化能力”给业务人员了。 这一来二去&#xff0c;…

已有仓库,上传代码,如果你是先写代码,想上传git上你可以这样操作

已有仓库,上传代码&#xff0c;如果你是先写代码&#xff0c;想上传git上你可以这样操作 第一步&#xff1a;初始化 git git init 第二步&#xff1a;添加文件 git add * 第三步&#xff1a;提交文件 git commit -m "完整项目可直接下载使用" 第四步&#xff1a;配置…