学习vue的二天

**

学习vue的二天

vue表单域修饰符

v-model.number 数值类型

v-model.trim=“name” 去掉首尾空格

v-model.lazy=“hobby” 延迟加载（用于，输入结束后，失去焦点时值改变，同chenge）

自定义指令

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

自定义指令,focus指令名字，自动获取焦点
Vue.directive(‘focus’, {

inserted: function(el) {
    //el表示指令所表示的元素
    el.focus();
}

});

带参数的自定义指令

data: {
msg: {
color: ‘orange’,
},
},

//自定义指令,color
Vue.directive(‘color’, {
bind: function(el, binding) {
//binding.value获取传递的参数
console.log(binding.value.color);
}
});

//自定义指令,设置背景色
Vue.directive(‘color’, {
bind: function(el, binding) {
//binding.value获取传递的参数
//console.log(binding.value.color);
el.style.backgroundColor = binding.value.color;
}
});

计算属性

computed: {
reverseString: function(){
return this.msg.split(’’).reverse().join(’’);
}
},

计算属性初始化结果后会缓存结果，依赖的data中值变化计算属性会改变，而方法会多次执行

监听器

watch: {
firstName: function(val){
this.fullName=this.firstName+" "+this.lastName;
},
},

过滤器

全局过滤器
Vue.filter(‘upper’,function(val){
return val.charAt(0).toUpperCase() + val.slice(1);
});
局部过滤器
filters: {
upper: function(val){
return val.charAt(0).toUpperCase()+val.slice(1);
},
},

filters: {
		format: function(data,format){
		function dateFormat(date,format) {
			
          if (typeof date === "string") {
              var mts = date.match(/(\/Date\((\d+)\)\/)/);
              if (mts && mts.length >= 3) {
                  date = parseInt(mts[2]);
              }
          }
          date = new Date(date);
          if (!date || date.toUTCString() == "Invalid Date") {
              return "";
          }
          var map = {
              "M": date.getMonth() + 1, //月份 
              "d": date.getDate(), //日 
              "h": date.getHours(), //小时 
              "m": date.getMinutes(), //分 
              "s": date.getSeconds(), //秒 
              "q": Math.floor((date.getMonth() + 3) / 3), //季度 
              "S": date.getMilliseconds() //毫秒 
          };

          format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
              var v = map[t];
              if (v !== undefined) {
                  if (all.length > 1) {
                      v = '0' + v;
                      v = v.substr(v.length - 2);
                  }
                  return v;
              } else if (t === 'y') {
                  return (date.getFullYear() + '').substr(4 - all.length);
              }
              return all;
      		});
      	return format;
  		}
			return dateFormat(data,format);
		},
	},
	
	踩坑1：猜测methods的生命周期filter之后，调用methods中方法会找不到

vue生命周期

挂载

beforeCreate:在实例初始化之后，数据观测和事件配置之前被调用。
created：在实例被创建完成后立即被调用。可用于数据初始话，但是html模板为生成，故无法进行DOM操作
beforeMount：在挂载开始之前被调用
Mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用的钩子

更新

brforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前
updated：由于数据更改，导致的虚拟DOM从新渲染和打补丁，在这之后会调用的钩子

销毁

beforeDestroy：实例销毁之前调用
destroyed：实例销毁后调用

vue对数组的操作

1.响应式的操作（修改原有数组数据）

push() 在数组的末尾添加一个或多个元素 返回数组新长度

pop() 移除数组的最后一项，返回移除的项

shift() 移除数组的第一项，返回移除项

unshift() 在数组的第一项前面添加一个或多个元素，返回数组的长度

splice() splice(2,3,“William”)，从索引2开始，的三个元素替换为"William"

sort() sort(sortNumber) ，sortNumber为排序方法，数值排序方法为

				function sortNumber(a,b)
				{
				return a - b
				}

reverse() 数组反转

some() 会遍历数组中第一个与条件符合的并返回true

every() 会遍历数组中的每一个元素，并且每一个元素都符合指定的条件然后返回true

find() 用来查找目标元素，返回第一个符合条件的元素，如果没有符合条件的返回 undefined,参数是一个回调函数，value时当前元素，index索引值，array当前数组

includes() Es6中提供了includes方法，用来判断数组是否包含某一个元素，存在就返回true不存在返回flase

响应式修改数值数据

Vue.set(vm.items,index,newValue)

2.生成新数组

filter()

concat()

slice() 指定数组起始和结束下标生成新的数组

map 可以用来循环数组，可以通过map()来改变数据的结构

let data = [
{ title: ‘wzj’, time: ‘2019-9-1’, comment: true },
{ title: ‘dxy’, time: ‘2019-9-1’, comment: false },
{ title: ‘mrn’, time: ‘2019-9-1’, comment: true },
{ title: ‘zr’, time: ‘2019-9-1’, comment: false },
{ title: ‘zjw’, time: ‘2019-9-1’, comment: true }
];

let userData = data.map((item, index, arr) => {
console.log(item, index, arr);

return {
    name: item.title, about: item.comment, time: new Date().getUTCFullYear()
}

})