品牌管理列表案例

• 案例地址

一：过滤器

vue.js可以自定义过滤器，用来操作一些常用的文本格式化，过滤器只能使用在两个地址，
一个是msutache插值（插值表达式）和v-bind表达式中，过滤器应该添加到jQuery表达式的
尾部，由“管道”符指示。

二：全局过滤器定义和调用

1.1 定义

Vue.filter('filterName',function(data){
	//逻辑处理
});

其中filterName是过滤器的名称，data是过滤器调用时传递的数据。

1.2 调用

{{ name | filterName}}
v-bind:title="name|filterName"
其中name是我们要处理的数据，filterName是我们要调用的过滤器的名称。
过滤器可以自定义参数，并且可以多次调用不用的过滤器，如：
{{ name | filter1 | filter2}}
此时name经过filter1的处理后将结果传递到filter2进行处理，详细请看
如下案例演示。

1.3 案例

• 过滤器的定义和调用

三：私有过滤器的使用

 var vm = new Vue({
	el:'#app',
	data:{
	   dt1 : new Date()
	},methods:{
	   
	},filters:{//私有过滤器
		fmtTime:function(date,fmt){
			return ff(date,fmt);
		}
	}
});

全局过滤器是Vue.filter('filterName',function(data){})，私有过滤器是
定义在new Vue中的filters字段，注意是带了s的，如果全局过滤器和私有过
滤器的名字一致，那么会是就近原则， 会使用私有过滤器

• 私有过滤器的使用-案例

四：自定义按键修饰符

名称	描述
.enter	回车
.tab	table键
.delete	捕获“删除”和“退格”键
.esc	返回键
.space	空格键
.up	上
.down	下
.left	左
.right	右

<input type="text" class="form-control" v-model="name" @keyup.enter="add"/>
<input type="text" class="form-control" v-model="name" @keyup.113="add"/>
<input type="text" class="form-control" v-model="name" @keyup.f2="add"/>
监听键盘的事件，@keyup监听键盘的抬起，.enter是表示抬起的是回车键，.enter就是
按钮的修饰符，像.stop,.prevent,.capture,.seft,.once一样。

@keyup.keyCode也可以使用，vue帮我们默认生成了上面表格的修饰符，如果要使用
自定义的keyCode对应的描述，需要如下操作：

• 配置keyCode

Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  // camelCase 不可用
  mediaPlayPause: 179,
  // 取而代之的是 kebab-case 且用双引号括起来
  "media-play-pause": 179,
  up: [38, 87]
}

• 键盘码对照表
• 自定义按键修饰符-案例

五：自定义全局指令让文本框获取焦点

1. 全局自定义执行

使用Vue.directive()自定义全局指令：
参数1：指令的名称，在定义的时候指令的名称不用加v-前缀，但是使用的时候要加上v-
参数2：是一个对象，这个对象上面有一些指令相关的函数，可以在特定的截断执行特定的操作。

//注意：每个函数中第一个参数都是el，表示被绑定指令的那个元素，是一个原生的JS对象
Vue.directive('focus',{
	bind:function(el){//每当指令绑定到元素上的时候执行此函数，只执行一次，el表示该指令绑定的元素
		console.log(el);
	},inserted:function(el){//表示元素插入到DOM中的时候会执行inserted函数，只触发一次
		el.focus();
	},updated:function(){//当VNode更新的时候，会执行updated，可能会触发多次
		
	}
})

//v-color
Vue.directive('color',{
	bind:function(el,binding){
		console.log(el);
		console.log(binding);
		console.log(binding.value);
		el.style.color=binding.value;
	}
})

样式一般的操作是在bind执行，行为一般的操作在inserted执行。

• 自定义指令让文本框获取焦点

2. 私有自定义指令

<!--备注：v-fontColor会被解析成全部小写的fontcolor，所以自定义指令的名字要用小写-->
<span v-text="msg" v-fontColor="'red'"></span>
			
var vm = new Vue({
	el:'#app',
	data:{
		msg:"自定义私有指令fontColor",
		id:'',
		name:'',
		keyWords:'',
		list:[
			{id:1,name:'奔驰',ctime:new Date()},
			{id:2,name:'宝马',ctime:new Date()},
			{id:3,name:'奥迪',ctime:new Date()}
		]
	},methods:{
		del(id){
			console.log('delete:' + id);
			this.list.some((item,i) =>{
				if(item.id == id){
					this.list.splice(i,1);
					return true;
				}
			})
		},
		add(){
			this.list.push({id:this.id,name:this.name,ctime:new Date()});
		},
		search(keyWords){
			console.log(keyWords);
			var rv = [];
			this.list.forEach(item => {
				if(item.name.indexOf(keyWords) >= 0){
					rv.push(item);
				}
			});
			return rv;
		}
	},directives:{
		'fontcolor':{
			bind:function(el,binding){
				el.style.color = binding.value;
			}
		}
	}
})

• 自定义私有指令

3.指令的简写

Vue.directive('mycolor',function(el,binding){
	el.style.code = binding.value;
})

等价于

Vue.directive('mycolor',{
	bind:function(el,binding){
		el.style.code = binding.value;
	},
	updated:function(el,binding){
		el.style.code = binding.value;
	}
})

• 指令的简写

4.官方文档

• 自定义指令官方文档

六：生命周期

• 生命周期函数-案例

七：vue-resource发起http请求

1.GET

// GET /someUrl
this.$http.get('/someUrl').then(response => {

	// get body data
	this.someData = response.body;

	}, response => {
	// error callback
	});
}

2.POST

// POST /someUrl
 this.$http.post('/someUrl', {foo: 'bar'}).then(response => {

   // get status
   response.status;

   // get status text
   response.statusText;

   // get 'Expires' header
   response.headers.get('Expires');

   // get body data
   this.someData = response.body;

 }, response => {
   // error callback
 });

3. vue-resource发起http请求-案例