Vue.js学习笔记 第三天-（bootstrap+vue.js）品牌管理案例（添加，删除，搜索）

第三天

• v-if和v-show

<button value="按钮" @click="change"></button>
<!--
	v-if每次都会重新删除和创建元素
	若频繁隐藏和显示元素 v-if有较高的切换性能消耗
-->
<!--
	v-show不会删除，只是给元素加了display：none样式
	若元素永远不会被显示 则v-show有较高的初始渲染消耗
-->
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>

change(){
	this.flag=!this.flag;
}

关于品牌管理案例

首先是添加和删除功能

<div id="app">
<div class="panel panel-primary">
	<div class="panel-heading">
		<h3 class="panel-title">添加品牌</h3>
	</div>
	<div class="panel-body form-inline">
		<label>
			Id:
		</label>
		<input v-model="id" name="" id="" value="" class="form-control"/>
		<label>
			Name:
		</label>
		<input v-model="name" name="" id="" value="" class="form-control"/>
		<input type="button" value="添加" class="btn btn-primary" @click="add"/>
	</div>
</div>
<table class="table table-striped table-bordered table-hover">
	<thead>
		<th>ID</th>
		<th>NAME</th>
		<th>CTIME</th>
		<th>操作</th>
	</thead>
	<tbody>
		<tr v-for="item in list" :key="item.id">
			<td>{{item.id}}</td>
			<td>{{item.name}}</td>
			<td>{{item.ctime}}</td>
			<td><a href="#" @click.prevent="del(item.id)">删除</a></td>
		</tr>
	</tbody>
</table>
</div>

这里是界面的实现，注意用到了bootstrap的面板，表单和表格。对表格的渲染只需要写一个tr。记住这些用法！！！

<script type="text/javascript">
var vm=new Vue({
	el:'#app',
	data:{
		id:'',
		name:'',
		list:[
		{id:1,name:'张如意1',ctime:new Date()},
		{id:2,name:'张如意2',ctime:new Date()},
		]
	},
	methods:{
		add(){
			console.log("ok");
			this.list.push({id:this.id,name:this.name,ctime:new Date()});
			this.id='';
			this.name='';
			
		},
		del(id){
			//如何根据id找到要删除的这一项的索引
			//如果找到了索引，则使用数组的splice方法
			this.list.some((item,i)=>{
				console.log("开始了循环");
				console.log(id);
				if(item.id==id){
					this.list.splice(i,1);
					console.log("找到了id");
					//在some方法中，如果return true，则会终止循环
					return true;
				}
			})
	}
})
</script>

删除方法还可以用

//findindex专门用来查找索引
del(id){
	var index=this.list.findIndex(item=>{
		if(item.id=id){
			return true;
		}
	})
	this.list.splice(index,1);
	}
}

• 这里用到了两种方法，分别是some和findindex，都是vue中查找下标的方法。some()方法返回true或false，一旦返回true则停止循环；findindex（）方法返回查找到的索引，查找到了就停止循环，没有查找到则返回-1.some（）和findindex（）都不能对空数组进行操作
• 在methods的某个方法中若还要引用一个方法，则用=>表示在这个新引用的方法中可以通过this访问data中的值，不用=>是访问不到的
• 数组中的splice（）方法从数组中删除或添加一个项目,然后返回新的项目,该方法会改变原始数组
  例如:
  
  arr.splice(2,0,“William”)
  
  arr.splice(2,1,“William”)
  
  arr.splice(2,3,“William”)
  

接下来是搜索功能

因为list是固定的,所以要改为<tr v-for="item in search(keywords)" :key="item.id">
添加绑定事件<input v-model="keywords" name="" id="" value="" class="form-control"/>
新增search方法:

search(keywords){
	var newlist=[];
	this.list.forEach(item=>{
		if(item.name.indexOf(keywords)!=-1){
			newlist.push(item);
		}
	})
	return newlist;
}

或者用过滤器:

var newlist=this.list.filter(item=>{
	if(item.name.includes(keywords)){
		return item;
	}
})
return newlist;

• foreach()方法用于调用数组的每个元素,并将元素返回给回调函数.在这里,foreach每遍历数组中的一个值,并把这个值返回给item
  foreach()不会对空数组执行回调函数

• filter()方法创建一个新的数组,返回所有符合条件的数组,如果没有符合条件的则返回空数组
  filter()不会对空数组进行检测,不会改变原始数组
  
  
• indexof()方法返回某个指定字符串值在字符串中首次出现的位置,如果没有则返回-1.对大小写敏感
  
• includes()方法判断一个字符串中是否包含一个指定的值,是则返回true,否则flase
  
• 过滤器

定义和引用

{{item.ctime|dateFormat}}

Vue.filter('dateFormat',function(datestr){
	var dt=new Date(datestr);
	console.log(dt);
	var year=dt.getYear();
	console.log(year);
	var month=(dt.getMonth()+1).toString().padStart(2,'0');
	var day=dt.getDate().toString().padStart(2,'0');
	return year+'-'+month+'-'+day;
//			return ${year}-${month}-${day};
})

• ES6中的字符串新方法padStart(maxLength,fillString=’’)或padEnd(maxLength,fillString=’’)来填充字符串
  例如:var month=(dt.getMonth()+1).toString().padStart(2,'0');

• 按键修饰符
  例如:@keyup.enter="add"或@keyup.113="add"(表示按了f2键)
  自定义全局按键修饰符Vue.config.keyCodes.f2=113;引用:@keyup.f2

• 自定义指令

//自定义指令
//定义的时候不用加v-，使用的时候要加v-
//参数一：名称 参数二：对象
Vue.directive('focus',{
	bind:function(el){//当指令绑定到元素上时，执行一次bind函数
		//这个方法是没有效果的
		//因为元素刚绑定指令的时候，还没有插入到DOM中去，就获取不了焦点 
		el.focus();
	},
	inserted:function(el){//元素插入到DOM中时执行
		el.focus();
	},
	updated:function(){//VNode更新时执行，可能会触发多次
		
	},
});