Vue基础知识_一条可有可无的咸鱼-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44962939/article/details/117686532

本文详细介绍了Vue.js中的核心概念，包括侦听器的使用，如何通过计算属性处理数据转换，事件修饰符的运用如阻止冒泡和默认行为，属性绑定实现动态样式和内容，以及如何利用v-for进行循环渲染数据。通过实例代码展示了Vue.js在实际开发中的常见操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、侦听器使用方法


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>侦听器</title>
	</head>
	<body>
		<div id="app">
			<!-- 1.监听器学习 如果需要自动触发则使用监听器 -->
			姓: <input type="text" v-model.lazy="firstName" /> <br>
			名称: <input type="text" v-model.lazy="lastName" /> <br>
			全名: {{fullName}}
			
			<hr />
			<!-- 过滤器 如果对数据的格式进行修改 小写转大写 日期格式转换... -->
			用户名: <input type="text" v-model="username"/>
			{{username |lower|upper}}
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			//1.定义过滤器  全部大写
			Vue.filter("upper",function(value){
				
				return value.toUpperCase()
			})
			
			//2.箭头函数用法 全部小写  
			//注意事项: 如果没有参数()不能省略
			Vue.filter("lower",(value) => {
				
				return value.toLowerCase()
			})
			
			const app = new Vue({
				el: "#app",
				data: {
					firstName: '',
					lastName: '',
					fullName: '',
					username: ''
				},
				methods: {
					
				},
				//定义监听器
				watch:	{
					//当数据发生变化时则会传递数据到监听器中
					firstName(value){
						this.fullName = value + this.lastName
					},
					lastName(value){
						this.fullName = this.firstName + value
					}
				}
			})
		</script>
	</body>
</html>

2、计算属性语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
	</head>
	<body>
		<div id="app">
			<!-- 要求: 将用户输入的内容进行反转
				abc   cba
			 -->
			计算: <input type="text" v-model="msg"/><br>
			<!--
				1.将字符串拆分为数组 abc   [a,b,c]
				2.reverse() 将数组进行反转 [c,b,a]
				3.将数组拼接为字符串.join('连接符')
			 -->
			{{msg.split('').reverse().join('')}}   <br>
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					msg: ''
				},
				methods: {
					reverseA(){
						console.log("我是方法调用")
						return this.msg.split('').reverse().join('')
					}
				},
				//定义计算属性
				computed: {
					//必须有返回值
					reverseStr(){
						console.log("我是计算属性")
						return this.msg.split('').reverse().join('')
					}
				}
			})
		</script>
	</body>
</html>

3、按键修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件修饰符</title>
	</head>
	<body>
		<div id="app">
			
			<!-- 事件冒泡:
				如果事件有嵌套关系, 执行完成内部事件之后,执行
				外部事件.这种现象称之为事件冒泡.
				
				1.阻止事件冒泡:
				语法:
					1.v-on:click.stop="xxx"
					2.@click.stop
			 -->
			<div @click="addNum2">
				<h3>{{num}}</h3>
				<button @click.stop="addNum">增1</button>
			</div>
			
			<hr />
			<!-- 2.阻止默认行为 
				如果需要阻止标签的默认的行为 则添加 @click.prevent
			 -->
			<div>
				<h3>阻止默认行为</h3>
				<a href="http://www.baidu.com" @click.prevent="baidu">百度</a>
			</div>
			
			<hr />
			
			<div>
				<h3>特殊按键字符说明</h3>
				<!-- 
					需求:要求用户按回车键出发 事件函数 
					.enter   .tab .delete (捕获“删除”和“退格”键)
					.esc   .space  .up  .down .left  .right
				-->
				回车键触发: <input  name="username" type="text" 
				v-on:keyup.enter="handler"/>  <br>
				删除键触发: <input  name="age" type="text"
				v-on:keyup.delete="handler"/> <br>
				space键触发: <input  name="sex" type="text"
				@keyup.space="handler"/>  <br>
				<!-- tab有效 使用keydown操作 -->
				tab键触发: <input  name="sex" type="text"
				@keydown.tab="handler"/>
			</div>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					num: 1
				},
				methods: {
					addNum(){
						this.num++
					},
					addNum2(){
						this.num = this.num + 2
					},
					baidu(){
						console.log("点击百度的按钮")
					},
					handler(){
						console.log("函数被执行")
					}
				}
			})
		</script>
	</body>
</html>

4、属性绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性绑定案例</title>
		
		<!-- 定义样式 -->
		<style>
			.red {
				background-color: chocolate;
				color: red;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h3>v-bind学习</h3>
			<!-- 1.入门案例 -->
			<a href="http://www.baidu.com">百度</a><br>
			<!-- 属性绑定语法  -->
			<a v-bind:href="url">百度-vue1</a><br>
			<!-- 简化操作  -->
			<a :href="url">百度-vue2</a>
			
			<hr />
			
			<h3>类型绑定</h3>
			<!-- 需求: 控制red是否展现 -->
			<div class="red">aaaaaa</div>
			<!-- vue的语法: {red类型名称: 布尔类型数据}
				 {red: true} red样式展现
				 {red: false} red样式不展现
			 -->
			<div :class="{red: flag}">bbbbb</div>
			<!-- 在vue中可以进行简单的数据计算 -->
			<button @click="flag = !flag">切换</button>
			
			<!-- 小结:  v-on 事件处理 函数定义
						v-bind 事件绑定 class style
			 -->
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					url: "http://www.baidu.com",
					flag: true
				},
				methods: {
					
				}
			})
		</script>
	</body>
</html>

5、循环结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
	</head>
	<body>
		<div id="app">
			<!-- vue中的循环 v-for
				1.循环获取数据的内容
				2.可以循环复制标签
				参数说明:
					item: 变量名称  名称任意
					in:	  关键字   固定写法
					array: 要遍历的数据
			 -->
			<h1 v-for="item in array">{{item}}</h1>
			
			<hr />
			<!-- v-for语法2:  获取数据/下标  -->
			<h1 v-for="(item,index) in array">{{item}}++++++{{index}}</h1>
			
			<hr />
			<!-- 循环遍历集合信息 -->
			<div v-for="item in userList">
				<p>ID号:{{item.id}}</p>
				<p>名称:{{item.name}}</p>
			</div>
			<hr />
			<!-- 如果直接遍历对象,则输出的value值 
				参数说明:  1.value 对象的值   2.对象的key  3.数据的下标
			-->
			<div v-for="(value,key,index) in user">
					<span v-text="key"></span>
					---
					<span v-text="value"></span>
					---
					<span v-text="index"></span>
			</div>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					array: ["安琪拉","孙悟空","诸葛亮"],
					userList: [{
						id: 100,
						name: "鲁班七号"
					},{
						id: 200,
						name: "铠"
					},{
						id: 300,
						name: "瑶"
					}],
					//定义user对象
					user: {
						id: 200,
						name: "貂蝉",
						age: 18
					}
				},
				methods: {
				}
			})
		</script>
	</body>
</html>

6、表单数据提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单数据</title>
	</head>
	<body>
		<div id="app">
			<!-- 1.定义表单 练习form标签与vue对象形成数据绑定-->
			<form action="http://www.baidu.com">
				用户名: <input type="text" v-model="user.username"/><br>
				用户详情: <textarea v-model="user.info"></textarea><br>
				
				<!-- 定义下拉框 -->
				<select name="book" v-model="user.book">
					<option value="java编程思想">java编程思想</option>
					<option value="java疯狂讲义">java疯狂讲义</option>
					<option value="java技术卷">java技术卷</option>
				</select><br>
				
				<!-- 单选框练习 name名称相同 -->
				性别: <input type="radio" value="男" name="gender" 
						v-model="user.gender"/> 男
					  <input type="radio" value="女" name="gender"
						v-model="user.gender"/> 女
				<br>
				<!-- 多选框练习 值有多个 数组接收 -->
				爱好: 
					<input  type="checkbox" name="hobby" value="吃"
						v-model="user.hobby"/>吃
					<input  type="checkbox" name="hobby" value="喝"
					    v-model="user.hobby" />喝
				
				<!-- 阻止标签的默认行为 采用其他方式提交 -->
				<input type="submit" value="提交" @click.prevent="addForm"/>
			</form>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					user: {
						username: '',
						info: '',
						book: 'java技术卷',
						gender: '女',
						hobby:	["吃"]
					}
				},
				methods: {
					addForm(){
						console.log("input标签:"+this.user.username)
						console.log("文本域标签:"+this.user.info)
					}
				}
			})
		</script>
	</body>
</html>