Vue.js Day02

• 过滤器
  Vue.js 允许你自定义过滤器，可用作为一些常用的文本化，过滤器可以用在这个地方：mustache 抓值 和 v-bind 表达式。过滤器应该被添加在JavaScript 表达式的尾部，由**“管道”** 符指示。
  1.html 元素

<td>{{item.ctim | dataFormat('yyyy-mm-dd')}}</td>
-----------------------------------------------
//Vue.filter('过滤器的名称'，function(data){})

过滤器的语法,过滤器中，function 的第一个参数是规定死的，永远是 管道符（|） 前面传递过来的数据
//Vue.filter(‘过滤器的名称’，function(data){})
过滤器可以链式调用、

<div>{{ms | reget('你的')}}</div>
--------------------------------------
Vue.filter('reget',function(msg,repace){
//字符串的replace 方法，第一个参数，除了可写一个字符串之外，还可以定义正则
return msg.replace(/单纯/g,repace);
})

---

– 全局过滤器：

Vue.filter('dateFormat',function(dataStr){
				//根据设定的时间字符串，得到特定的时间
				var dt = new Date(dataStr);
				var y = dt.getFullYear();
				var m = dt.getMonth()+1;
				var d = dt.getDate();
				var h = dt.getHours();
				var mm = dt.getMinutes();
				var s = dt.getSeconds();
				var ss = dt.getMilliseconds();
				return `${y}-${m}-${d} ${h}:${mm}:${s}:${ss}`;	//刀秋符号
			})

– 私有过滤器

methods:{
					add(){
						this.list.push({id:this.id,name:this.name,ctime:new Date()})
						this.name = this.id = '';
					},
					del(id){
						//找到数组中的所引，直接调用数组的splice 方法
						/*this.list.some(
							(item,i)=>{
								if(item.id == id ){
									this.list.splice(i,1);
									//数组的some 方法返回true 相当于 breake;
									return true;
								}
							}
						)*/
						
						var index = this.list.findIndex(
							item=>{
								if(item.id==id){
									return true;
								}
							}
						)
						this.list.splice(index,1);
					},
					serchKey(searchKey){
						return this.list.filter(
							item =>{
								if(item.name.includes(searchKey) || searchKey =='')
								{
									return item;
								}
							}
						)
					}
				},
				filters:{
					//自定义私有过滤器,过滤器名字，+ 函数名称
					dateFormat: function(dataStr){
						//根据设定的时间字符串，得到特定的时间
					var dt = new Date(dataStr);
					var y = dt.getFullYear();
					var m = dt.getMonth()+1;
					var d = dt.getDate();
					var h = dt.getHours();
					var mm = dt.getMinutes();
					var s = dt.getSeconds();
					var ss = dt.getMilliseconds();
					return `${y}-${m}-${d} ${h}:${mm}:${s}`;	//刀秋符号
					}
				}

---

• String.padStart(args1,args2)
  padStart：返回新的字符串，表示用参数字符串从头部补全原字符串。
  padEnd：返回新的字符串，表示用参数字符串从头部补全原字符串。
  以上两个方法接受两个参数，第一个参数是指定生成的字符串的最小长度，第二个参数是用来补全的字符串。如果没有指定第二个参数，默认用空格填充。

filters:{
					//自定义私有过滤器,过滤器名字，+ 函数名称
					dateFormat: function(dataStr){
						//根据设定的时间字符串，得到特定的时间
					var dt = new Date(dataStr);
					var y = dt.getFullYear();
					var m = (dt.getMonth()+1).toString().padStart(2,'0');
					var d = dt.getDate().toString().padStart(2,'0');
					var h = dt.getHours().toString().padStart(2,'0');
					var mm = dt.getMinutes().toString().padStart(2,'0');
					var s = dt.getSeconds().toString().padStart(2,'0');
					var ss = dt.getMilliseconds().toString().padStart(3,'0');
					return `${y}-${m}-${d} ${h}:${mm}:${s}:${ss}`;	//刀秋符号
					}
				}

---

• 自定义按键修饰符：
• 自定义全局按键修饰符
• //自定义全局按键修饰符

//自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113;

<input type="text" v-model="id" class="form-control" v-color/>
----------------------------------
//自定一 设置字体的颜色 指令
Vue.directive('color',{
	//样式，只要通过指令绑定给了元素，不管这个元素有没有插入到页面中，这个元素肯定有一个内联的样式
	//将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
	bind:function(el){
		el.style.color = 'red';
		//和样式相关的操作在 bind 中执行
	}
})

//按键抬起，触发事件
<input type="text" class="form-control" v-model="name" @keyup.enter="add"/>
-----------------------------
<input type="text" class="form-control" v-model="name" @keyup.f2="add"/>

---

• 定义全局指令 Vue.directive()
  //使用：Vue.directive 定义全局的指令，v-focus
  其中:
  参数1,-----指令的名称,注意定义时,指令的名称前面,不需要加 v- 前缀,但是调用是必须加 v- 前缀调用.
  参数2:---- 是一个对象,在这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作

<input type="text" v-model="id" class="form-control" v-color="'blue'"/>
--------------------------------------------
//使用：Vue.directive 定义全局的指令，v-focus
/*其中:参数1,指令的名称,注意定义时,指令的名称前面,不需要加 v- 前缀
但是调用是必须加 v- 前缀调用
参数2: 是一个对象,在这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作*/

Vue.directive('focus',{
	bind:function(el){//每当指令绑定到元素上的时候，立即执行这个bind 函数，只执行一次
		//注意这个函数中，第一个参数，永远是el,表示 被绑定了指令的那个元素，这个el 参数，是一个原生的js对象
		/*在元素刚绑定了指令的时候,还没有,插入到DOM 中,这时候,调用focus 方法没有作用
		因为只有,一个元素植入DOM之后,才能获取焦点*/
		el.focus()
	},
	inserted:function(el){
		// 和Js 行为相关的操作，最好在inserted 中去执行，放置js 行为不生效
	},
	updated:function(el){
		
	}
})

//自定一 设置字体的颜色 指令
Vue.directive('color',{
	//样式，只要通过指令绑定给了元素，不管这个元素有没有插入到页面中，这个元素肯定有一个内联的样式
	//将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
	bind:function(el,binding){
		el.style.color = binding.value;
		//和样式相关的操作在 bind 中执行
	}
})

• 自定义私有指令
  函数简写：
  大多数情况下，我们可能想在 bind 和 update 钩子上的重复动作，并且不关心其他钩子函数。

<td v-color="'yellow'">{{item.ctime | dateFormat }}</td>
-------------
directives:{
	//自定义私有指令
	'color':{
		bind: function(el,binding){
			el.style.color = binding.value;
		}
	},
	'font':function(el,binding){//注意这个function 等同于 把代码 写到 bind 和 update 中
		el.style.fontSize=binding.value;
	}
				}

---

• Vue 实例的声明周期
  
  

directives:{
	//自定义私有指令
		'color':{
			bind: function(el,binding){
				el.style.color = binding.value;
			}
		},
		'font':function(el,binding){//注意这个function 等同于 把代码 写到 bind 和 update 中
			el.style.fontSize=binding.value;
		}
	},
	beforeCreate(){
		//注意，在beforeCreate 第一个生命周期函数执行的时候，data 和 methods 中数据肯定没有初始化
	},
	created(){//第二个生命周期函数
		//注意在created 中data 和 methods 都已经初始化好了
		//如果调用methods 中的方法，或者操作 data 中的数据，最早只能在created 中操作
	},
	beforeMount(){//第三个生命周期函数
		//注意：表示，模板已经在内存中编辑完成了，但尚未把模板渲染到页面中
		//在 这个函数执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
	},
	mounted(){//第四个生命周期函数
		//执行完mounted 函数表示 实例已经完全创建好，在内存中了
	},
	//运行中的了两个事件
beforeUpdate(){
	//页面中显示的数据，还是旧的，此时 data 数据是最新的，页面尚未知，最新的数据保持同步
},
updated(){
	//页面和data中的数据都是最新的
}

---

• vue-resource 实现 get post ,jsonp 请求
  还可以使用 ‘axics’ 的第三方实现数据的请求
  你可以使用全局对象方式 Vue.http 或者在一个 Vue 实例的内部使用 this.$http来发起 HTTP 请求。

// 基于全局Vue对象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
// 在一个Vue实例内使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

---- vue-resource 提供了 7 种请求 API(REST 风格)：

get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])

//实现get post jsonp请求 
			var get = new Vue({
				el:'#get',
				data:{
					
				},
				methods:{
					get(){//发起get请求
						//当发起get 请求后，使用 .then 来设置成功的回调函数
						this.$http.get('https://www.baidu.com/').then(
							function(result){
								/*result.body 成功后返回的数据*/
								console.log(result);
							}
						)
					},
					post(){//发起 post 请求 application/x-www-form-urlencoded
						//手动post请求默认，默认没有表单格式，所以服务器处理不了
						//通过post 方法的第三个参数，设置提交的内容类型，为普通的表单数据格式
						this.$http.post(
							'https://www.baidu.com/',{},{emulateJSON:true}
						).then(result=>{
							console.log(result.body)
						})
					},
					jsonp(){//发起jsonp 请求
						this.$http.jsonp('localhost:8080/index').then(
							result=>{
								console.log(result.body)
							}
						)
						
					}
				}
			})