5.vue文档API（3），created的初始化阶段与mounted挂载阶段以及渲染相关

最新推荐文章于 2024-05-07 09:13:55 发布

「已注销」

最新推荐文章于 2024-05-07 09:13:55 发布

阅读量960

点赞数

分类专栏： vue简介文章标签： vue

本文链接：https://blog.csdn.net/weixin_47870554/article/details/107191304

版权

简介：

created阶段就是将对象传入，mounted就是将new好的vue实例对象挂载到dom节点上，实现dom节点和数据的结合，进行渲染。

初始化：

vue的初始化有两种方式，一种是直接new Vue({})，另一种就是使用Vue.extend( options )，代码如下：

new：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vueTest</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<p>{
  {message}}</p>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;
		app = new Vue({
			data: function() {
				return {
					message: 'new Vue( options )'
				}
			},
			beforeCreate: function(){
				console.log('创建之前');
			},
			created: function(){
				console.log('创建');
			},
			beforeMount: function(){
				console.log('挂载之前');
			},
			mounted: function(){
				console.log('挂载');
			},
		});
		console.log("Vue",Vue);
		console.log("new",app);
	</script>
</body>
</html>

Vue.extend：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.extend</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<p>{
  {message}}</p>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;
		var app = Vue.extend({
			// el: '#app',
			data: function(){
				return {
					message: 'Vue.extend!',
				}
			},
			methods: {
				update: function(e){
					this.message = 'update!';
				}
			},
			beforeCreate: function(){
				console.log('创建之前');
			},
			created: function(){
				console.log('创建');
			},
			beforeMount: function(){
				console.log('挂载之前');
			},
			mounted: function(){
				console.log('挂载');
			},
		}),
		newApp = new app();
		console.log("extend",app);
		console.log("new",newApp);
	</script>
</body>
</html>