草庐IT

Vue的data,components,methods,computed,mounted,activated,deactivated,beforeCreate,created的含义及用法

枕边话 2023-03-28 原文

1、data

Vue 会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)

data () {
	return {
		dataForm: {
			xxx: ‘’,
			xxx: 数字 //这里的数字会固定XXX的选项
		},
		xxx: [],
		xxx: false,
		xxx: 数字,
		xxx: {}
	}
}

2、components

调用其他组件

<template>
	<div class="mod-config">
		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
	</div>
</template>

<script>
	import AddOrUpdate from './bareapointinfo-add-or-update'

	export default {
		components: {
	  		AddOrUpdate
	 	}
	}

</script>

3、methods

用来定义方法

methods: {
	getDataList () {
	    this.dataListLoading = true
	    this.$http({
	      url: this.$http.adornUrl('/area/bareapointinfo/list'),
	      method: 'get',
	      params: this.$http.adornParams({
	        'page': this.pageIndex,
	        'limit': this.pageSize,
	        'pointName': this.dataForm.key
	      })
	    }).then(({data}) => {
	      if (data && data.code === 0) {
	        this.dataList = data.page.list
	        this.totalPage = data.page.totalCount
	      } else {
	        this.dataList = []
	        this.totalPage = 0
	        this.$message.error(data.msg)
	      }
	      this.dataListLoading = false
	    })
	}
}

4、computed

当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值。可以理解为为便签设置属性时调用

<div class="truckGpsScreen" ref="truckGpsScreen" :style="{height:mainHeight + 'px'}">
</div>

computed: {
    mainHeight: {
      get () {
        return this.$store.state.common.documentClientHeight - 50 - 40 - 32
      }
    }
}

5、mounted

进入页面便开始调用，从页面产生到消亡只会执行一次，可以用来加载初始化数据

mounted () {
  if (screenfull.enabled) {
    screenfull.on('change', this.onScreenFullChange)
  }
  this.initMap()
}

6、activated

keep-alive组件激活时调用（你可以理解为生命周期钩子函数），只要切回到该页面便调用一次

activated () {
  this.timer = setInterval(this.getDataList, 3000)
}

7、deactivated

keep-alive组件停用时调用，只要切到别的页面便调用一次

deactivated () {
  clearInterval(this.timer)
}

8、beforeCreate

创建前的数据

9、created

创建完成的数据

本文转自 https://blog.csdn.net/qq_38639813/article/details/121011091，如有侵权，请联系删除。

beforeCreate用法this12101109138639813Vue

有关Vue的data,components,methods,computed,mounted,activated,deactivated,beforeCreate,created的含义及用法的更多相关文章

  1. ruby - 难道Lua没有和Ruby的method_missing相媲美的东西吗？ - 2

    我好像记得Lua有类似Ruby的method_missing的东西。还是我记错了？ 最佳答案 表的metatable的__index和__newindex可以用于与Ruby的method_missing相同的效果。 关于ruby-难道Lua没有和Ruby的method_missing相媲美的东西吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/7732154/

  2. ruby-on-rails - active_admin 目录中的常量警告重新声明 - 2

    我正在使用active_admin，我在Rails3应用程序的应用程序中有一个目录管理，其中包含模型和页面的声明。时不时地我也有一个类，当那个类有一个常量时，就像这样:classFooBAR="bar"end然后，我在每个必须在我的Rails应用程序中重新加载一些代码的请求中收到此警告:/Users/pupeno/helloworld/app/admin/billing.rb:12:warning:alreadyinitializedconstantBAR知道发生了什么以及如何避免这些警告吗？ 最佳答案 在纯Ruby中:classA

  3. Ruby 元类 : why three when defined singleton methods? - 2

    让我们计算MRI范围内的类别:defcount_classesObjectSpace.count_objects[:T_CLASS]endk=count_classes用类方法定义类:classAdefself.foonilendend然后运行:putscount_classes-k#=>3请解释一下，为什么是三个？ 最佳答案 查看MRI代码，每次你创建一个Class时，在Ruby中它是Class类型的对象，ruby会自动为这个新类创建“元类”类，这是另一个单例类型的Class对象。C函数调用(class.c)是:rb_define

  4. ruby-on-rails - Rails 中的 NoMethodError::MailersController#preview undefined method `activation_token=' for nil:NilClass - 2

    似乎无法为此找到有效的答案。我正在阅读Rails教程的第10章第10.1.2节，但似乎无法使邮件程序预览正常工作。我发现处理错误的所有答案都与教程的不同部分相关，我假设我犯的错误正盯着我的脸。我已经完成并将教程中的代码复制/粘贴到相关文件中，但到目前为止，我还看不出我输入的内容与教程中的内容有什么区别。到目前为止，建议是在函数定义中添加或删除参数user，但这并没有解决问题。触发错误的url是http://localhost:3000/rails/mailers/user_mailer/account_activation.http://localhost:3000/rails/mai

  5. ruby-on-rails - Rails 5 Active Record 记录无效错误 - 2

    我有两个Rails模型，即Invoice和Invoice_details。一个Invoice_details属于Invoice，一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa

  6. ruby - 怎么来的(a_method || :other) returns :other only when assigning to a var called a_method? - 2

    给定以下方法:defsome_method:valueend以下语句按我的预期工作:some_method||:other#=>:valuex=some_method||:other#=>:value但是下面语句的行为让我感到困惑:some_method=some_method||:other#=>:other它按预期创建了一个名为some_method的局部变量，随后对some_method的调用返回该局部变量的值。但为什么它分配:other而不是:value呢？我知道这可能不是一件明智的事情，并且可以看出它可能有多么模棱两可，但我认为应该在考虑作业之前评估作业的右侧...我已经在R

  7. spring.profiles.active和spring.profiles.include的使用及区别说明 - 2

    转自:spring.profiles.active和spring.profiles.include的使用及区别说明下文笔者讲述spring.profiles.active和spring.profiles.include的区别简介说明,如下所示我们都知道，在日常开发中,开发|测试|生产环境都拥有不同的配置信息如：jdbc地址、ip、端口等此时为了避免每次都修改全部信息，我们则可以采用以上的属性处理此类异常spring.profiles.active属性例：配置文件,可使用以下方式定义application-${profile}.properties开发环境配置文件:application-dev

  8. ruby - 使用 rbenv 和 ruby​​-build 构建 ruby​​ 失败，出现 undefined symbol : SSLv2_method - 2

    我正在尝试在配备ARMv7处理器的SynologyDS215j上安装ruby​​2.2.4或2.3.0。我用了optware-ng安装gcc、make、openssl、openssl-dev和zlib。我根据README中的说明安装了rbenv(版本1.0.0-19-g29b4da7)和ruby​​-build插件。.这些是随optware-ng安装的软件包及其版本binutils-2.25.1-1gcc-5.3.0-6gconv-modules-2.21-3glibc-opt-2.21-4libc-dev-2.21-1libgmp-6.0.0a-1libmpc-1.0.2-1libm

  9. ruby-on-rails - ActiveRecord 的 find_or_create* 方法是否存在根本性缺陷？ - 2

    有几种方法:first_or_create_by、find_or_create_by等，它们的工作原理是:与数据库对话以尝试找到我们想要的东西如果我们找不到，就自己做保存到数据库显然，并发调用这些方法可能会使两个线程都找不到它们想要的东西，并且在第3步中一个线程会意外失败。似乎更好的解决方案是，创建或查找即:提前在您的数据库中创建合理的唯一性约束。如果你想保存一些东西，就保存它如果有效，那就太好了。如果它因为RecordNotUnique异常而无法工作，它已经存在，太好了，加载它那么在什么情况下我想使用Rails内置的东西而不是我自己的(看起来更可靠)create_or_find？

  10. ruby - "undefined method"用于 rails 模型 - 2

    我正在使用带有Rails的Devise，我想添加一个方法“getAllComments”，所以我这样写:classUser在我的Controller中:defdashboard@user=current_user@comments=@user.getAllComments();end当我访问我的url时，我得到了undefinedmethod`getAllComments'for#我做错了什么？谢谢 最佳答案 因为getAllComments是一个类方法，而您正试图将其作为实例方法访问。您要么需要访问它:User.getAllCom

随机推荐