1_1_2_VueJS的基础操作续

最新推荐文章于 2025-10-30 17:17:07 发布

原创最新推荐文章于 2025-10-30 17:17:07 发布 · 182 阅读

0 ·

CC 4.0 BY-SA版权

VueJS快速入门专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨Vue.js的高级特性，包括计算属性、监听器、v-model的拓展用法及过渡动画，通过实例演示如何优化代码，提升用户体验。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!--导包-->		
	</head>
	<body>
<!--计算属性-->		
		<div id="demo_1">
		<!--
			一般写法：每次都计算一遍
			计算属性：计算一遍后保存起来，只有返回中的依赖的变量变化时才会修改
			如果只是使用一次的话两者不会有太大差别，但是如果要修改多次的haul，推荐使用计算属性			
		-->
		<!--两字符串拼接-->
			一般写法：<h1>{{ firstName_1+lastName_1 }}</h1>
			计算属性：<h1>{{ allName }}</h1>
		<!--逆序显示-->
			一般写法：<h1>{{ word_1.split("").reverse().join("") }}</h1>
			计算属性：<h1>{{ reverseWord }}</h1>
		<!--实际上compute应该细分set和get方法，虽然不常用-->
		</div>
		<script>
			var app_1 = new Vue({
				el:"#demo_1",
				data:{
					firstName_1:"王",
					lastName_1:"老五",
					word_1:"music"
				},
				computed:{
					allName:function(){
						return this.firstName_1+this.lastName_1
					},
					reverseWord:function(){
						return this.word_1.split("").reverse().join("")
					}
				}
			})
		</script>
		
		
		
		
	
<!--监听器--><br /><br /><br /><br /><br />
		<div id="demo_2">
			{{ message_2 }}
			<input type="button" @click="fun_2" />
		</div>
		<script>
			var app_2 = new Vue({
				el:"#demo_2",
				data:{
					message_2:"count:"
				},
				methods:{
					fun_2:function(){
						this.message_2 = this.message_2+"1";
					}
				},
				watch:{//监听函数
					//监听message_2的数据变化,在数据变化前触发这个函数
					//监听器也可以用于数组和对象属性，增删改数据的内容前都会触发监听函数
					message_2:function(value){//参数可填也可不填，参数可以获取修改后的数据
						alert("修改后的数据为："+value);
					}
				}
			})
		</script>
		
				
				
				
			
<!--v-model的拓展，此外的很多修饰符就自己去看文档了--><br /><br /><br /><br /><br />
		<div id="demo_3">
			用于复选框-{{message_3_1}}
			<div v-for="item in fruits">
				{{item}}<input type="checkbox" :value="item" v-model="message_3_1" />
			</div>
			用于单选框-{{message_3_2}}
			<div v-for="item in fruits">
				{{item}}<input type="radio" :value="item" v-model="message_3_2" />
			</div>
			用于选项框-{{message_3_3}}
			<select v-model="message_3_3">
				<option disabled="">选择你喜欢的水果</option>
				<option  v-for="item in fruits" :value="item">{{item}}</option>
			</select>
			
		</div>
		<script>
			var app_3 = new Vue({
				el:"#demo_3",
				data:{
					fruits:["苹果","香蕉","西瓜","梨"],
					message_3_1:[],
					message_3_2:"",
					message_3_3:""
				}
			})
		</script>
		
				
				
				
			
<!--过渡动画--><br /><br /><br /><br /><br />
		<style type="text/css">
			.fade-enter-active, .fade-leave-active {
			  transition: opacity 5s;
			}
			.fade-enter, .fade-leave-to  {
			  opacity: 0;
			}
		</style>
		<div id="demo_4">
		  <input type="button" value="显示和隐藏" @click="show = !show">
		  <transition name="fade">
		    <p v-show="show">
				如果使用了transition，然后这个标签的显示和隐藏(v-if和v-show)时候，
				就会自动去添加/删除css的类
				例如这个案例的类名参数是fade，那这个标签显示的时候就是添加类名，然后结束后就删除这两个类名
				具体什么时候添加什么时候结束官方文档有一个过滤的类名解释，还有自定义类名什么，官方文档很详细
			</p>
		  </transition>
		</div>
		<script>
			new Vue({
			  el: '#demo_4',
			  data: {
			    show: true
			  }
			})
		</script>

		
	</body>
</html>

在这里插入图片描述