Vue（1）

最新推荐文章于 2023-03-20 09:45:21 发布

@D-zy

最新推荐文章于 2023-03-20 09:45:21 发布

阅读量80

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_44224029/article/details/100834495

版权

Vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

Vue

一、vue概况

在这里插入图片描述

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。

实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作
挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情...
当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿
当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom
当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等
组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以

Vue实例
每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的

   <!-- 指定vue管理内容区域，通常我们也把它叫做边界，这意味着我们接下来的改动全部在指定的div内，div外部不受影响 -->     
   <div id="d1">{{message}}</div>
 
   var vm = new Vue({
     el：'#ID'         // DOM 元素，挂载视图模型，
     data：{},         // 定义属性，并设置初始值
     methods：{}       // 定义方法，用于事件交互时使用的函数  
   });

注1：data在组件开发中的写法必须是一个函数
注2：vue指令：指的是是带有“v-”前缀的特殊属性
注3：用v-on:click指令绑定单击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>Vue</title>
	</head>
	<body>
		<!-- vue所管理的边界 -->
		<div id="app">
			{{title}}
		</div>
		
		<script>
			//通过vue实例渲染vue所管理的边界
			new Vue({
				el:"#app",
				data(){
					return {
						title:'hello vue!!!'
					}
				}
			})
			
		</script>
		
	</body>
</html>

显示结果：

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>双向数据绑定</title>
	</head>
	<body>
		<!-- vue所管理的边界 -->
		<div id="app">
		{{title}}<br>
			<input v-model="title"/><br>
			{{title}}<br>
			<input v-model="title"/>
		</div>
		
		<script>
			//通过vue实例渲染vue所管理的边界
			new Vue({
				el:"#app",
				data(){
					return {
						title:''
					}
				}
			})
			
		</script>
		
	</body>
</html>

显示结果：根据输入框控制所有的值。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>v-on指令</title>
	</head>
	<body>
		<!-- vue所管理的边界 -->
		<div id="app">
			
			<input v-model="title"/><br>
			<button v-on:click="getData">获取文本框中的值</button>
			
		</div>
		
		<script>
			//通过vue实例渲染vue所管理的边界 es6写法
			new Vue({
				el:"#app",
				data(){
					return {
						title:''
					}
				},
				methods:{
					getData(){
						alert(this.title);
					}
				}
			})
			
		</script>
		
	</body>
</html>

显示结果：
在这里插入图片描述
弹框：

@D-zy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue（1）

Vue一、vue概况Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。实例、组件通过new Vue() 创建出来之后会初始化事件和...
复制链接

扫一扫

专栏目录