15、Vue-组件的生命周期

15、Vue-组件的生命周期


<html>
	<head>
		<meta charset="utf-8">
		<title>行找的皮卡丘title>
	head>
	<body>
		<div id='app'>
			<App>App>
		div>
	body>
	<script type="text/javascript" src="js/vue.min.js">

	script>
	<script type="text/javascript">
		/*
		生命周期钩子(函数)
		beforeCreate
		created
		beforeMount
		mounted
		beforeUpdate
		updated
		activated
		deactivated
		beforeDestroy
		destroyed
		errorCaptured
		*/


		Vue.component("Test", {
			data() {
				return {
					msg: 'hello',
				}
			},
			template: `
				
{{msg}}
`
, methods: { changerHandeler() { this.msg = this.msg + '' } }, beforeCreate: function() { // 组件创建之前 console.log(this.msg); }, created: function() { // 组件创建之后 // 在created这个方法中可以操作后端的数据 数据驱动试图 // 应用:发起Ajax请求 console.log(this.msg); }, beforeMount: function() { // 挂在数据到DOM之前会调用此方法 console.log(document.getElementById("app")); }, mounted: function() { // 挂在数据到DOM之后会调用此方法 // 应用:操作DOM console.log(document.getElementById("app")); }, beforeUpdate: function() { // 在更新DOM之前调用 应用:可以获取原始DOM console.log(document.getElementById("app").innerHTML); // 查看DOM结构 }, updated: function() { // 在更新DOM之后调用 应用:可以获取最新的DOM console.log(document.getElementById("app").innerHTML); // 查看DOM结构 }, beforeDestroy: function() { // 组件销毁之前 console.log("创建组件之前") }, destroyed: function() { // 组件销毁之后 console.log("销毁组件之后") }, activated: function() { // 组件被激活了 console.log("组件被激活了") }, deactivated: function() { // 组件被停用了 console.log("组件被停用了") }, }) var App = { data() { return { isShow: true } }, // Vue内置组件 // 缓存机制:能在组件的切换过程中将所有状态保存在内存中,防止重复渲染DOM template: `
`
, } new Vue({ el: '#app', data() { return { } }, components: { App }, });
script> html>

你可能感兴趣的:(Vue学习基础)