生命周期

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Vue生命周期</title>

	<script src="js/vue.js"></script>

	<script>

		window.onload=function(){

			let vm=new Vue({

				el:'#itany',

				data:{

					msg:'welcome to itany'

				},

				methods:{

					update(){

						this.msg='欢迎来到南京网博！';

					},

					destroy(){

						// this.$destroy();

						vm.$destroy();

					}

				},

				beforeCreate(){

					alert('组件实例刚刚创建，还未进行数据观测和事件配置');

				},

				created(){  //常用！！！

					alert('实例已经创建完成，并且已经进行数据观测和事件配置');

				},

				beforeMount(){

					alert('模板编译之前，还没挂载');

				},

				mounted(){ //常用！！！

					alert('模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示');

				},

				beforeUpdate(){

					alert('组件更新之前');

				},

				updated(){

					alert('组件更新之后');

				},

				beforeDestroy(){

					alert('组件销毁之前');

				},

				destroyed(){

					alert('组件销毁之后');

				}

			});

		}

	</script>

</head>

<body>

	<div id="itany">

		{{msg}}

		<br>

		<button @click="update">更新数据</button>

		<button @click="destroy">销毁组件</button>

	</div>

</body>

</html>

计算属性

计算属性也是用来存储数据，但具有以下几个特点：

    a.数据可以进行逻辑处理操作

    b.对计算属性中的数据进行监视

vue计算属性和vue实力的属性和方法的更多相关文章

  1. Vue计算属性

    github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...

  2. 【Vue】浅谈Vue(一)：从模板语法数据绑定、指令到计算属性

    写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者.社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓 ...

  3. 在做vue计算属性，v-for处理数组时遇到的一个bug

    bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...

  4. vue笔记-模板,计算属性,class与style,data属性

    数据和方法 1:只有当实例被创建时 data 中存在的属性才是响应式的,也可以预定义一些空的属性,唯一的意外就是Object.freeze(obj),这会阻止修改现有的属性;也就是说一个数据在放到根实 ...

  5. vue计算属性和侦听器

    一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...

  6. vue教程2-03 vue计算属性的使用 computed

    vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...

  7. 温故vue对vue计算属性computed的分析

    vue 复习笔记(1)一段时间没有看过vue的官方文档了,温故而知新,所以我决定将vue的文档在看一遍 1计算属性computed在vue的computed中声明的是计算属性,可以使用箭头函数来进行定 ...

  8. vue 计算属性 实例选项 生命周期

    vue 计算属性: computed:{} 写在new vue()的属性,只要参与运算,数据不发生变化时,次计算只会执行一次,结果缓存,之后的计算会直接从缓存里去结果.如果其中的值发生变化(不管几个) ...

  9. vue生命周期以及vue的计算属性

    一.Vue生命周期(vue实例从创建到销毁的过程,称为生命周期,共有八个阶段) 1.beforeCreate :在实例初始化之后,数据观测 (data observer) 和 event/watche ...

  10. vue——计算属性和侦听器

    一.计算属性(data中的相关数据) 侦听多个属性时——计算属性 comuted. 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: & ...

随机推荐

  1. 深入理解读写锁ReentrantReadWriteLock

    1.读写锁的介绍 在并发场景中用于解决线程安全的问题,我们几乎会提供高频率的使用到独占式锁,通常使用java提供的关键字synchronized(关于synchronized可以看这篇文章)或者con ...

  2. Magic Number (zoj3622)

    Magic Number (zoj3622) Time Limit : 4000/2000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Oth ...

  3. Java - HashCode源码解析

    Java提高篇(二六)-----hashCode hashCode的作用 要想了解一个方法的内在原理,我们首先需要明白它是干什么的,也就是这个方法的作用.在讲解数组时(java提高篇(十八)----- ...

  4. Android - AsyncTask你知道多少？

    http://www.cnblogs.com/qlky/p/5658070.html 为什么asyncTask最好在主线程初始化?在子线程怎么办? AsyncTask四个方法的执行顺序? mWorke ...

  5. Android8自定义广播无法收到消息

    在Android 8之前,如果要发送自定义的静态广播,做好其他配置后,只需实例化一个Intent对象intent,然后将其作为参数传入sendBroadcast()方法中即可,例如 Intent in ...

  6. linux系统编程：cp的另外一种实现方式

    之前,这篇文章:linux系统编程:自己动手写一个cp命令 已经实现过一个版本. 这里再来一个版本,涉及知识点: linux系统编程:open常用参数详解 Linux系统编程:简单文件IO操作 /*= ...

  7. JSON.parse()与JSON.stringify()高级用法

    JSON.parse()与JSON.stringify是将JSON对象与字符串互相转换的方法,它们还有一些参数可以让我们在实际应用中更加方便,现在介绍一下它们的高级用法 JSON.parse() JS ...

  8. Js利用Canvas实现图片压缩

    最近做的APP项目涉及到手机拍照上传图片,因为手机拍照的图片通常都比较大,所以上传的时候就会很慢.为此,需要对图片进行压缩处理来优化上传功能.以下是具体实现: /* * 图片压缩 * img 原始图片 ...

  9. ubuntu16.04安装matlab2016b

    一.matlab2016b版本下载 在ubuntu下安装matlab2016b,需要三个文件,分别是:Matlab+2016b+Linux64+Crack.rar .R2016b_glnxa64_dv ...

  10. [基础知识]在PeopleSoft中SMTP设置不生效如何查找问题

    在PeopleSoft中如果配置了工作流邮件或者标准页面的通知,都是可以发送出邮件的,这些邮件都是由SMTP服务器发送.SMTP需要在APP服务器和PRCS服务器中配置. 如果无法从PeopleSof ...