衡山 22/11/3 vue2

已于 2022-11-27 11:17:49 修改
阅读量99 收藏
点赞数
分类专栏： # 衡山 文章标签： vue.js javascript 前端
于 2022-11-13 16:36:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ninoninoni/article/details/127828579
版权

目录

ui框架 bootstrap

https://v3.bootcss.com/getting-started/
class内部绑定了css样式表，不要去修改class
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
	</head>
	<body>
		<div id="app">
			<form class="form-horizontal">
			  <div class="form-group form-group-lg">
				<label class="col-sm-2 control-label" for="formGroupInputLarge">用户名：</label>
				<div class="col-sm-10">
				  <input class="form-control" type="text" id="formGroupInputLarge" placeholder="username" v-model="username" />
				</div>
			  </div>
			  <div class="form-group form-group-lg">
				<label class="col-sm-2 control-label" for="formGroupInputLarge">年龄：</label>
				<div class="col-sm-10">
				  <input class="form-control" type="text" id="formGroupInputLarge" placeholder="age" v-model="age" />
				</div>
			  </div>
			 <div class="form-group form-group-lg">
			   <label class="col-sm-2 control-label" for="formGroupInputLarge">爱好：</label>
			   <div class="col-sm-10">
				 <input class="form-control" type="text" id="formGroupInputLarge" placeholder="hobby" v-model="hobby" />
			   </div>
			 </div>
			</form>
			
			<button type="button" class="btn btn-primary btn-lg btn-block" @click="updata">添加信息</button>
			
			<hr>
			
			<table class="table table-striped">
			  <thead>
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>爱好</th>
					<th>操作</th>
				</tr>
				</thead>
				<tbody>
					<tr v-for="(p,index) in stuData" :key="index">
						<td>{{p.name}}</td>
						<td>{{p.nianling}}</td>
						<td>{{p.aihao}}</td>
						<td><button type="button" class="btn btn-danger" @click="delp(index)">删除</button></td>
					
					</tr>
				</tbody>
			</table>
		</div>
		
		<script>
			new Vue({
				el : "#app",
				data: {
					stuData: [],
					username: "",
					age: "",
					hobby: "",
				},
					
				methods: {
					updata (){
						this.stuData.push({name:this.username, nianling:this.age, aihao:this.hobby}),
						console.log(this.$data),
						this.username="",
						this.age="",
						this.hobby="",
						console.log("添加成功")
					},
					
					delp (index){
						this.stuData.splice(index,1),
						console.log("删除成功")
					}
				}
			})
		</script>
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
		  Launch demo modal
		</button>
		
		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
		      </div>
		      <div class="modal-body">
		        ...
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		        <button type="button" class="btn btn-primary">Save changes</button>
		      </div>
		    </div>
		  </div>
		</div>
	</body>
</html>

图标的使用

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

弹窗的使用

在这里插入图片描述


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
	</head>
	<body>
		<div id="app">
			<form class="form-horizontal">
			  <div class="form-group form-group-lg">
				<label class="col-sm-2 control-label" for="formGroupInputLarge">用户名：</label>
				<div class="col-sm-10">
				  <input class="form-control" type="text" id="formGroupInputLarge" placeholder="username" v-model="username" />
				</div>
			  </div>
			  <div class="form-group form-group-lg">
				<label class="col-sm-2 control-label" for="formGroupInputLarge">年龄：</label>
				<div class="col-sm-10">
				  <input class="form-control" type="text" id="formGroupInputLarge" placeholder="age" v-model="age" />
				</div>
			  </div>
			 <div class="form-group form-group-lg">
			   <label class="col-sm-2 control-label" for="formGroupInputLarge">爱好：</label>
			   <div class="col-sm-10">
				 <input class="form-control" type="text" id="formGroupInputLarge" placeholder="hobby" v-model="hobby" />
			   </div>
			 </div>
			</form>
			
			<button type="button" class="btn btn-primary btn-lg btn-block" @click="updata">添加信息</button>
			
			<hr>
			
			<table class="table table-striped">
			  <thead>
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>爱好</th>
					<th>操作</th>
				</tr>
				</thead>
				<tbody>
					<tr v-for="(p,index) in stuData" :key="index">
						<td>{{p.name}}</td>
						<td>{{p.nianling}}</td>
						<td>{{p.aihao}}</td>
						<td><button type="button" class="btn btn-danger" @click="delp(index)">删除</button></td>
					
					</tr>
				</tbody>
			</table>
		</div>
		
		<script>
			new Vue({
				el : "#app",
				data: {
					stuData: [],
					username: "",
					age: "",
					hobby: "",
				},
					
				methods: {
					updata (){
						this.stuData.push({name:this.username, nianling:this.age, aihao:this.hobby}),
						console.log(this.$data),
						this.username="",
						this.age="",
						this.hobby="",
						console.log("添加成功")
					},
					
					delp (index){
						this.stuData.splice(index,1),
						console.log("删除成功")
					}
				}
			})
		</script>
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
		  Launch demo modal
		</button>
		
		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
		      </div>
		      <div class="modal-body">
		        ...
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		        <button type="button" class="btn btn-primary">Save changes</button>
		      </div>
		    </div>
		  </div>
		</div>
	</body>
</html>

模态框

在这里插入图片描述

模态框的绑定

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

用模态框删除

```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>	
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
	</head>
	<body>
	<div  id="app">
		<form class="form-horizontal">
		  <div class="form-group form-group-lg">
		    <label class="col-sm-2 control-label" for="formGroupInputLarge">用户名:</label>
		    <div class="col-sm-10">
		      <input class="form-control" type="text" id="formGroupInputLarge" v-model="username" >
		    </div>
		  </div>
		  <div class="form-group form-group-lg">
		    <label class="col-sm-2 control-label" for="formGroupInputLarge">年龄:</label>
		    <div class="col-sm-10">
		      <input class="form-control" type="text" id="formGroupInputLarge" v-model="userage" >
		    </div>
		  </div>
		  <div class="form-group form-group-lg">
		    <label class="col-sm-2 control-label" for="formGroupInputLarge">爱好:</label>
		    <div class="col-sm-10">
		      <input class="form-control" type="text" id="formGroupInputLarge"  v-model="hobby">
		    </div>
		  </div>
		  <button type="button" class="btn btn-primary" @click="updata"><span class="glyphicon glyphicon-plus"></span>添加</button>
		</form>
		<hr>
		<table class="table table-striped">
		  <thead>
		  	<tr>
		  		<th>姓名</th>
		  		<th>年龄</th>
		  		<th>爱好</th>
		  	</tr>
		  </thead>
		  <tbody>
		  	<tr v-for="(p, index) in stuData" :key="index">
		  		<td>{{p.name}}</td>
		  		<td>{{p.age}}</td>
		  		<td>{{p.hobby}}</td>
		  		<td><button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#myModal" @click="nowindex=index">删除</button></td>
		  	</tr>
		  </tbody>
		</table> 
		
		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">确认删除?</h4>
		      </div>
		      <div class="modal-body">
		        确认删除这个学生信息吗？
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		        <button type="button" class="btn btn-primary" @click="delp(nowindex)" >ok</button>
		      </div>
		    </div>
		  </div>
		</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
	<script>
		new Vue({
			el:"#app",
			data: {
				stuData:[],
				username:"",
				userage:"",
				hobby:"",
				nowindex:-100
			},
			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) {
					console.log(index)
					this.stuData.splice(index,1)
				}
			}
		})
	</script>
	</body>
</html>

vue属性

计算属性computed 监听属性watch

在这里插入图片描述
在这里插入图片描述
单向数据绑定
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
computed实现
在这里插入图片描述

在这里插入图片描述

vue生命周期

vue的声明周期共有八个阶段，分别是：1、实例创建前；2、实例创建后；3、实例载入前；4、实例载入后；5、实例更新前；6、实例更新后；7、实例销毁前；8、实例销毁后。
对应八大钩子函数

在这里插入图片描述

京屿大人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
衡山 22/11/6 vue1
ninoninoni的博客
11-06 139
vue
衡山 22/11/27 vue4
ninoninoni的博客
11-27 176
vue
衡山 22/12/11 vue6
ninoninoni的博客
12-13 70
vue
衡山 22/11/20 vue3
ninoninoni的博客
11-27 53
前端
Vuecli 城市三级联动的使用
m0_63498341的博客
12-07 1471
首先说一下实现思路： 1.采用单独的js文件存储省市区数据，可以是json或者js文件。 2.使用mt-picker进行赋值，(需要提前引入mint-ui)根据省的数据的改变，动态的改变市和区的显示数据。 3.最好采用单独的组件实现，方便修改和复用。 引入mint-ui: //当前项目下命令行输入 npm i mint-ui --save //在main.js文件中引入 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vu
vue下载Excel，word
cq_run的博客
06-13 374
【代码】vue下载Excel。
计算机毕业设计django+vue南岳衡山旅游网站【开题+论文+程序】
sheji304的博客
08-05 814
因此，开发一个基于Django+Vue框架的南岳衡山旅游网站，旨在通过数字化手段整合旅游资源，优化旅游服务流程，为游客提供更加便捷、高效、全面的旅游体验。本研究的意义在于，通过设计并实现一个集用户管理、景点类型分类、景点信息展示、售票信息发布、购票订单处理、退票信息管理、旅游攻略分享等功能于一体的南岳衡山旅游网站，不仅能够为游客提供一站式旅游服务，提升旅游满意度，还能够促进南岳衡山旅游资源的有效整合与利用，推动当地旅游业的数字化转型和可持续发展。2024年02月: 根据需求分析，进行详细设计；
VUE实现市、区二级联动
萌萌的博客
09-06 3616
VUE实现市、区二级联动1.封装联动组件2.封装联动地区组件3.地区联动js代码 步骤： 效果图： 1.封装联动组件 <template> <MyCity v-model="provAndCity" /> </template> <script> //引入联动子组件 import MyCity from './companys/citys.vue' export default { components: { MyCity }, d
Vue省市区三级联动
web_only_的博客
01-04 1160
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/index.css"> <script src="j...
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 768
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
vue 通过事件的形式调用全局组件
liux6687的博客
08-29 1642
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 2307
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 389
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
【已解决】Vue Duplicate keys detected: ‘[object Object]’
qq_34419312的博客
08-28 1061
【已解决】Vue Duplicate keys detected: ‘[object Object]’
vue part 5
E___V___E的博客
08-29 883
生命周期：1 .又名：生命周期回调函数、生命周期函数、生命周期钩广。2 .是什么：Vue在关键时刻用我们调用的一些特殊名称的函数。3•生命周期函数的名字不可史改，但函数的具体内容是程序员根据需求编写的.4 .生命周期函数中的this指向是vm或组件实例对象。
SprinBoot+Vue家政公司服务平台的设计与实现
赵广陆
08-29 799
目录 1 项目介绍 2 项目截图 3 核心代码 3.1 Controller 3.2 Service 3.3 Dao 3.4 application.yml 3.5 SpringbootApplication 3.5 Vue 4 数据库表设计 5 文档参考 6 计算机毕设选题推荐 7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+粉丝，超300w访问量，专注于大学生项目实战开发、讲解和毕业答疑辅导，对于专业性数据证明一切！
react 样式和vue样式的区别
weixin_44565776的博客
08-29 453
react 和vue 样式使用注意事项
纯vue实现笔记系统
xc9711的博客
08-30 1319
只用vue前端实现笔记系统
如何在vue3中使用camunda/camunda-modeler-vue
07-23
在 Vue3 中引入和使用 Camunda Modeler Vue 的步骤如下： 1. **安装依赖**: 首先，你需要在项目中安装 `@camunda/camunda-modeler` 和 `@camunda/camunda-modeler-vue` 包。使用 npm 或 yarn 完成这个步骤： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值