Vue常用特性（案列：图书管理）

最新推荐文章于 2022-04-09 04:10:17 发布

耳火

最新推荐文章于 2022-04-09 04:10:17 发布

阅读量235

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/GENFLY/article/details/106629057

版权

常用特性：
表单操作：
自定义指令：内置的指令不满足需求(获取表单焦点)
计算属性：计算逻辑比较复杂，计算属性内容简洁（统计数量）
过滤器：格式化数据，将首字母大写，转换日期格式
侦听器：数据变化时执行异步或开销较大的操作（验证数据是否存在）
生命周期：挂载更新销毁（数据处理）

数组相关API：
1.变异方法（修改原有数据）：push(),pop(),shift(),unshift(),splice(),sort(),reverse()
2.替换数组（生成新的数组）：
filter（），concat（），slice（）

数组响应式变化：
Vue.set(vm.items,indexOfitem,newValue)
Vue.$set(vm.items,indexOfitem,newValue)

案例：图书管理

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.grid{
			margin: auto;
			width: 530px;
			text-align: center;
		}
		.grid table{
			width: 100%;
			border-collapse: collapse;
		}
		.grid th,td {
            padding: 10;
            border: 1px dashed orange;
            height: 35px;
            line-height: 35px;
      }

		.grid th {
			background-color: #F3DCAB;
		}
		.grid .book{
            padding-bottom: 10px;
            padding-top: 5px;
            background-color: #F3DCAB;
		}
	</style>
</head>
<body>
	<div id="app">
	<div class="grid">
		<div>
			<h1>图书管理</h1>
			<div class="book">
				<div>
					<label for="id">
						编号：
					</label>
					<input type="text" id="id"  v-model='id'                                :disabled="flag">
					<label for="name">
						名称：
					</label>
					<input type="text" id="name" v-model='name'>
                    <button @click='handle'>提交</button>
				</div>
			</div>
		</div>
		<table>
			<thead>
				<tr>
					<th>编号</th>
					<th>名称</th>
					<th>时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr :key='item.id' v-for='item in books'>
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.date}}</td>
					<td>
						<a href="" @click.prevent='toEdit(item.id)'>修改</a>
						<span>|</span>
						<a href="" @click.prevent='deleteBook(item.id)'>删除</a>

					</td>
				</tr>
				
			</tbody>
		</table>
	</div>
</div>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript">
		var vm=new Vue({
          el:'#app',
          data:{
          	 flag: false,
          	id:'',
          	name:'',
          	books:[{
          		id:'1',
          		name:'三国演义',
          		date:''
          	},{
          		id:'2',
          		name:'水浒传',
          		date:''
          	},{
          		id:'3',
          		name:'红楼梦',
          		date:''
          	},{
          		id:'4',
          		name:'西游记',
          		date:''
          	}]
          },
          methods:{
          	handle:function(){
          		if(this.flag){
          			//编辑操作
          			this.books.some((item)=>{
          				if(item.id==this.id){
          					item.name=this.name;
          					//完成更新操作要终止循环
          					return true;
          				}
          			});
          			this.flag=false;

          		}else{
          			//添加图书
          		var book={};
          		book.id=this.id;
          		book.name=this.name;
          		book.date='';
          		this.books.push(book);
          		//清空表单
          		this.id='';
          		this.name='';
          		}
          		this.id='';
          		this.name='';
          	},
         toEdit: function(id){
          // 禁止修改ID
          this.flag=true;
          console.log(id)
          // 根据ID查询出要编辑的数据
          var book = this.books.filter(function(item){
            return item.id == id;
          });
          console.log(book)
          // 把获取到的信息填充到表单
          this.id = book[0].id;
          this.name = book[0].name;
          },
           deleteBook:function(id){
           	//删除
           	//根据id从数组中查找元素的索引
           	// var index=this.books.findIndex(function(item){
           	// 	return item.id==id
           	// });
           	// //根据索引删除数组元素
           	// this.books.splice(index,1);
           	// 方法二通过filter删除
           	this.books=this.books.filter(function(item){
           		return item.id!=id
           	})
           }
          }
		  });
	</script>
</body>
</html>