Vue页面组成及常用属性

一、Vue页面组成

目前的项目中,Vue页面都是采用组件套娃的形式,由一个一个的组件拼接而成整个页面。一个组件就是一个.vue文件。组件通常由template和script两部分组成:

在这里插入图片描述
template部分:页面展示的具体元素内容,比如文字、文本框、按钮、图片等。
script部分:页面涉及的具体方法函数、交互等代码。

template内容举例如下:

在这里插入图片描述

二、script内容

2.1 data()

定义页面上各个文本框的值,实现数据双向绑定并自动装填进data:

在这里插入图片描述

2.2 mounted()、methods

mounted里面主要定义在页面数据加载完成后执行的方法:比如你的页面已经加载完了,然后通过操作可以生成一个二维码图片,页面上需要在某个区域展示这个二维码,那么展示二维码这个方法的代码就写在mounted里面。

method里面主要定义对页面执行的所有操作,操作对应的方法函数都写在method里面:

在这里插入图片描述

2.3 created()

页面元素内容加载前需要执行的方法,都放在created()下面。

比如你要获取当前的时间戳,然后把时间戳赋值给页面上的某个文本框作为该文本框的初始值,那么获取当前时间戳的方法调用就要写在created()下面:

在这里插入图片描述

2.4 watch()

watch主要用于侦听vue实例响应数据的变化,通常用于处理一些需要动态变化的值:比如下图所示,监听activityId值的变化,并将变化后的值和merchantNo的值合并起来,作为couponCode的值:

在这里插入图片描述

此外watch只能监听一层,因为我们是要处理在form下的数据,一层是监听不到的,所以需要使用deep:true做深度监听。immediate:true 表示初始化的时候就监听,设为false则初始化不监听,只有数据有变化时才监听。

2.5 computed()

computed主要用于复杂的计算,并且由于有缓存机制,性能开销比较小。使用方法如下图所示:

在这里插入图片描述
其实简单的计算,使用methods也能达到同样的效果。但由于computed有缓存机制,只要数据层值不改变,computed就不会重新去计算一次,而methods里的函数在每次调用时都要执行,因此复杂计算时,建议使用computed:

在这里插入图片描述
此外在调用时,computed定义的成员像属性一样访问,methods定义的成员必须以函数形式调用。比如上图所示,调用computed直接用:{{fullName}},而调用methods则必须以函数的方式调用:{{Names()}}。

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值