衡山 22/11/6 vue1

京屿大人

已于 2022-11-13 11:37:14 修改

阅读量139

点赞数

分类专栏： # 衡山文章标签： vue.js

于 2022-11-06 16:52:40 首次发布

本文链接：https://blog.csdn.net/ninoninoni/article/details/127713058

版权

衡山专栏收录该内容

11 篇文章 0 订阅

订阅专栏

mulu

- - vue介绍

vue介绍

在这里插入图片描述

模板

导入vue模板写入插件

控制台检查输出
在这里插入图片描述

在这里插入图片描述

目前不支持出现三个大括号

指令

属性绑定 v-bind 绑定辩护的属性

在这里插入图片描述
当不指定用v-bind指定时，访问出现404

手动绑定

v-bind与：等价
在这里插入图片描述

v on 事件绑定绑定监听事件

v-on与@效果一样在这里插入图片描述

无参数

无传参默认event
需要就接收，不需要就不用接
在这里插入图片描述

在这里插入图片描述

无传参默认event

第一种是没有明显传参的，但是下面对应的内容可以接收到默认参数

去控制台检查

穿了整个对象过去

接收默认参数，并进行修改

带有传参性质

在这里插入图片描述

事件修饰符

stop停止事件冒泡
在这里插入图片描述

小的div事件执行，外面的事件也执行，这叫做冒泡
绑定事件
停止事件冒泡

按键修饰符

在这里插入图片描述

列表渲染

v-for绑定的是数组
变异方法可以修改数据，同时更新到网页
在这里插入图片描述

在这里插入图片描述

条件渲染

v-if/v-else成对出现
根据条件判断，如果为真就显示，如果是假的就不显示
在这里插入图片描述

v-show 指定形式为真的时候出现
在这里插入图片描述

数据表单的输入绑定

v-model 双向绑定
在这里插入图片描述

在这里插入图片描述

复选框：

下拉框：
在这里插入图片描述

在这里插入图片描述
作业

老师的只有添加按钮

先把index获取一下

在这里插入图片描述

vue数组元素添加

push

在这里插入图片描述

pop

在这里插入图片描述

shift

在这里插入图片描述

unshift

在这里插入图片描述

splice

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目
在这里插入图片描述

替换数组
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

concat() 方法用于连接两个或多个数组。

slice() 方法可从已有的数组中返回选定的元素。

其他
split() 方法用于把一个字符串分割成字符串数组。

作业代码增加一个删除按钮

<!DOCTYPE html>
<html>
	<head>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<form>
				姓名：<input type="text" v-model="username"/></br>
				年龄：<input type="text" v-model="userage" /></br>
				爱好：<input  type="text" v-model="hobby" /></br>					
			</form>
			<p><button @click="updata">添加</button> </p>
			<table>	
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>爱好</th>
			</tr>																			
			<tr v-for="p in studata">
				<th>{{p.name}}</th>
				<th>{{p.age}}</th>
				<th>{{p.hobby}}</th>
				<th><button @click='delp(index)'>删除</button></th>
			</tr>		
						
			</table>
			
		</div>	
		<script>
			new Vue({
				el: "#app",
				data: {
					studata: [],
					username:"",
					userage:"",
					hobby:""
				},
				methods: {
					updata() {
						this.studata.push({
							name:this.username,
							age:this.userage,
							hobby:this.hobby
							})
						console.log(this.studata)
						this.username=""
						this.userage=""
						this.hobby=""
										
					},
					delp(index){
						this.studata.splice(index,1)
					}
										
				}
			})
		</script>
	</body>
</html>