html 数据钩子,22.钩子函数.html

Document

crossorigin="anonymous">

添加品牌

Id:

Name:

搜索name关键字:

IdNameCtimeOperation

{{item.id}}{{item.ctime | dataFormat('yyyy-MM-dd hh:mm:ss')}} 删除

//自定义全局指令v-focus 定义的时候不需要加上v-前缀 但使用的时候必须加上v-前缀

//参数1 指令名称

//参数2 是一个对象 这个对象身上有一些指令相关的函数 这些函数可以在特定的阶段 执行相关的操作

//里面函数的 每个第一参数都是el 指的是被绑定的指令的那个元素

//且这个el是一个原生的dom对象 包含dom元素拥有的方法

Vue.directive('focus',{

//每当指令绑定到元素上的时候,会执行这个bind函数 只触发执行一次

bind : function(el){

//在元素刚绑定指令的时候 还没有插入到DOM中去 这个时候 调用focus()方法没有作用

//因为一个元素只有插入DOM之后 才能获取焦点

//所以el.focus()用到这里是不对的

// el.focus();

},

//和js行为相关的 在inserted中操作

//表示元素插入到DOM中的时候 会执行inserted函数 只触发执行一次

inserted : function(el){

el.focus();

},

//当组件 即vnode更新的时候 会触发该函数 可能触发执行多次

updated : function(el){

}

});

//自定义一个字体颜色的指令v-color

Vue.directive('color',{

bind : function(el,binding){

//和样式相关的操作 在bind函数中

//样式 只要通过指令绑定给了元素 不管这个元素有没有被插入到页面中去

//这个元素 肯定有了一个内联的样式 将来元素肯定会显示到页面中去

el.style.color = binding.value;

}

});

//自定义某个按键的事件 f2按键 实现添加功能

Vue.config.keyCodes.f2 = 113;

//注意 这是全局过滤器 如果再有

//默认给pattern一个默认值 防止上面的函数不穿值 导致undefined

Vue.filter('dataFormat', function (dateStr, pattern = "") {

//将字符串转化成Date类型 yyyy-mm-dd

var dt = new Date(dateStr);

//取出年 月 日 用-拼接起来

var y = dt.getFullYear();

//dt.getMonth()从0开始 要+1 不足两位 前面补0 比如1月 01月

var m = (dt.getMonth() + 1).toString().padStart(2, "0");

//不足2位 前面补0

var d =(dt.getDate()).toString().padStart(2, "0");

if ('yyyy-mm-dd' == pattern.toLowerCase(pattern)) {

// var formatDateStr = y +'-'+ m +'-'+d;

// return formatDateStr;

//相当于上面的 注意切换英文输入法 连着按两下esc下面的间隔号按键

return `${y}-${m}-${d}`;

} else {

//返回时分秒

//不足2位 前面补0

var hh = dt.getHours().toString().padStart(2, "0");

//不足2位 前面补0

var mm = dt.getMinutes().toString().padStart(2, "0");

//不足2位 前面补0

var ss = dt.getSeconds().toString().padStart(2, "0");

return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

}

});

var vm1 = new Vue({

el: '#app1',

data: {

id: '',

name: '',

keywords: '',

list: [

{ id: 1, name: '奔驰', ctime: new Date() },

{ id: 2, name: '宝马', ctime: new Date() },

{ id: 3, name: '路虎', ctime: new Date() }

]

},

methods: {

add() {

var car = { id: this.id, name: this.name, ctime: new Date() };

this.list.push(car);

//添加完 文本框要恢复空白

this.id = '';

this.name = '';

},

del(id) {

//根据id查找出该条数据在数组中的位置 然后删除

//splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

//some() 方法会依次执行数组的每个元素：

//如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。

//如果没有满足条件的元素，则返回false。

//方法1

// this.list.some((item,i) => {

// if(item.id = id){

// this.list.splice(i,1);

// return true;

// }

// });

//方法2

//查找数组中元素的位置

var index = this.list.findIndex(item => {

if (item.id = id) {

return true;

}

});

this.list.splice(index, 1);

},

//方式1

// search(keywords){

// var newList = [];

// this.list.forEach(element => {

// //遍历的数据中 包含输入的关键字

// if(element.name.indexOf(keywords)!=-1){

// newList.push(element);

// }

// });

// return newList;

// },

//方式2

search(keywords) {

var newList = this.list.filter(element => {

if (element.name.includes(keywords)) {

return element;

}

});

return newList;

}

},

filters: {

//定义私有过滤器

//每个过滤器都有 过滤器名称和处理函数

//即使私有过滤器和全局过滤器名字一样 但还是会用私有的 这里

//过滤器的调用采用的是就近原则

dataFormat: function (dateStr, pattern = "") {

//将字符串转化成Date类型 yyyy-mm-dd

var dt = new Date(dateStr);

//取出年 月 日 用-拼接起来

var y = dt.getFullYear();

//dt.getMonth()从0开始 要+1

var m = (dt.getMonth() + 1).toString().padStart(2, "0");

var d = dt.getDate().toString().padStart(2, "0");

if ('yyyy-mm-dd' == pattern.toLowerCase(pattern)) {

// var formatDateStr = y +'-'+ m +'-'+d;

// return formatDateStr;

//相当于上面的 注意切换英文输入法 连着按两下esc下面的间隔号按键

return `${y}-${m}-${d}`;

} else {

//返回时分秒

//不足2位 前面补0

var hh = dt.getHours().toString().padStart(2, "0");

//不足2位 前面补0

var mm = dt.getMinutes().toString().padStart(2, "0");

//不足2位 前面补0

var ss = dt.getSeconds().toString().padStart(2, "0");

return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

}

}

}

});