vue学习总结

最新推荐文章于 2026-01-04 13:29:59 发布

原创最新推荐文章于 2026-01-04 13:29:59 发布 · 670 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Vue.js的基础概念，包括变量、模板、事件绑定、动态属性、条件渲染（v-if/v-show）、循环（v-for）及key的作用。同时，深入探讨了Vue实例的生命周期，展示了各个阶段的钩子函数及其在组件创建、更新和销毁过程中的应用。此外，还提及了计算属性、侦听器（watch）以及如何改变样式。通过实例演示，揭示了Vue.js在实际开发中的关键功能和使用技巧。

一、变量

<div id="app">
	<span>{{msg}}</span>
<div>
<script src="vue.js></script>
<script>
	var vm = new Vue({
	el:"#app",
	data:{
		msg:"123"
		}
	})
</script>

在这里插入图片描述

二、识别标签

在这里插入图片描述

三、绑定事件

在这里插入图片描述

四、动态绑定属性

在这里插入图片描述

五、v-if

在这里插入图片描述

六、v-show

在这里插入图片描述

七、v-for循环谁在谁身上

在这里插入图片描述

八、key

没有加key之前：
在这里插入图片描述

点击切换的时候，输入框里面输入的值还是存在的

输入key值以后：
在这里插入图片描述

点击切换的时候，这个输入框也跟着切换过来了重置了。

九、双重绑定

在这里插入图片描述

十、改变样式

第一种方式：
在这里插入图片描述

第二种方式：

十一、生命周期

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>你是{{msg}}</h1>
			<button @click="updateFn">更新</button>
			<button @click="destroyFn">销毁</button>
		</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					msg: "生命周期钩子函数",
				},
				methods:{
					updateFn(){
						this.msg = "二傻子";
					},
					destroyFn(){
						this.$destroy();
					}
				},
				beforeCreate: function(){
					console.log("-------- 初始化前beforeCreate --------")
					console.log(this.$el);	
					console.log(this.msg);
				},
				created(){
				    console.log("-------- 初始化后created --------")
					console.log(this.$el);	
					console.log(this.msg);
				},
				beforeMount:function(){
					console.log("-------- 挂载前beforeMount --------")
					console.log(this.$el);	
					console.log(this.msg);
				},
				mounted: function(){
					console.log("-------- 挂载后mounted --------");
					console.log(this.$el);	
					console.log(this.msg);
				},
				beforeUpdate: function(){
				    // 更新后的数据可以获取，，但是没有渲染到页面上
					// debugger;
					console.log("-------- 数据更新前beforeUpdate --------")
					console.log(this.$el);	
					console.log(this.msg);
				},
				updated: function(){
				    // 更新后的数据已经渲染到页面上
					// debugger;
					console.log("-------- 数据更新后updated --------")
					console.log(this.$el);
					console.log(this.msg);
				},
				beforeDestroy: function(){
					
					console.log("-------- 销毁前berforeDestroy --------")
					console.log(this.$el);	
					console.log(this.msg);
				},
				destroyed: function (){
					console.log("-------- 销毁后destroyed --------")
					console.log(this.$el);	
					console.log(this.msg);
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述
这个是还没有触发点击事件之前，下面那几个函数输出的东西。