大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......
github：https://github.com/Daotin/Web
微信公众号：Web前端之巅
博客园：http://www.cnblogs.com/lvonve/
CSDN：https://blog.csdn.net/lvonve/
在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
一、品牌管理案例
如下图，
1、实现输入id和name后，点击add按钮，添加到table中；
2、点击数据的del，可以删除这条数据。
代码：
Document
注意：
1、事件名后面可以加括号（@click="addClick" 等价于 @click="addClick() ，这样写的话，就可以传参。）
1、增加搜索需求
在Query中输入字符串，如果name项中包括Query中的字符串，则显示。
分析：
如果要满足条件才显示相关行，那么
中的list就是一个可变的。这里我们使用一个函数，函数里面进行判断是否包含Query中的字符串，然后将包含的拷贝到新数组中，填充到list的位置：
methods: {
addClick() {
//...
},
delClick(id) {
//...
},
// 添加的用于判断的函数
search(keywords) {
// 定义新数组保存符合条件的项
let newList = [];
this.list.forEach((item, index) => {
// 包含则返回true
if (item.name.includes(keywords)) {
newList.push(item);
}
});
return newList;
}
}
二、过滤器
vue 允许自定义过滤器，可被用作一些常见的文本格式化。
过滤器只能用在两个地方：插值表达式和 v-bind表达式 。
1、全局过滤器
基本用法：
1、使用 Vue.filter(); 来定义一个过滤器。
2、第一个参数：过滤器函数名称；第二个参数：过滤器函数体
3、过滤器的参数就是管道符的前面待处理的字符串。
插值表达式里的过滤器函数可以带参数：
相应的，在 Vue.filter('msgFormat', (data, arg1,arg2,...) 中msgFormat 的参数从第二位开始放置。
可以带多个参数。
{{msg | msgFormat('is a boy', 'and good')}}
使用全局过滤器格式化品牌管理案例的 ctime：
{{item.ctime | ctimeFormat}}
...
// ctime 过滤器
Vue.filter('ctimeFormat', (data) => {
let time = new Date(data);
let year = time.getFullYear();
let month = time.getMonth() + 1;
let day = time.getDate();
let hour = time.getHours();
let minute = time.getMinutes();
return `${year}-${month}-${day} ${hour}:${minute}`;
});
2、私有过滤器
全局过滤器就是如果有多个vm实例的话，所有的VM实例都可以使用。
全局过滤器书写在 script直接标签下。
而私有过滤器书写在VM对象中：
注意：过滤器的调用原则是就近原则，即先调用私有过滤器再调用全局过滤器。
padStart和padEnd
// ctime 过滤器
Vue.filter('ctimeFormat', (data) => {
let time = new Date(data);
let year = time.getFullYear();
let month = (time.getMonth() + 1).toString().padStart(2, '0');
let day = (time.getDate()).toString().padStart(2, '0');
let hour = (time.getHours()).toString().padStart(2, '0');
let minute = (time.getMinutes()).toString().padStart(2, '0');
let second = (time.getSeconds()).toString().padStart(2, '0');
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
});
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串；
padStart：从开头填充
padEnd：从结尾填充
maxLength：填充后最大的长度
fillString：需要填充的字符串（fillString=''，不填则以空字符填充）
三、按键修饰符
我们现在有个需求就是输入ID和name后不点击add按钮，而是按下回车键也需要添加到列表中。
我们可以在name输入框中加入按键抬起事件，并且指定是enter键抬起时才触发。
name:
Query:
1、定义自定义指令的时候，不需要加v- ，使用的时候需要加。
2、注意： 在每个 函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象。
3、和JS行为有关的操作，最好在 inserted 中去执行
1、钩子函数
inserted 是钩子函数，类似的钩子函数还有几个，但是应用场景不同：
inserted ：被绑定元素插入DOM元素时调用一次（从内存渲染到页面时如果绑定了 inserted 就执行）。
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置（在代码加载到内存中的时候，如果绑定了bind就执行，比如样式style的设定，使用bind绑定）。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
总结：一般：
1、与JS行为相关的操作在inserted中执行；
2、与样式相关的在bind中执行。
2、钩子函数参数
指令钩子函数会被传入以下参数：
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
...
...
我们可以为自定义指令赋值，比如我们想给Query文本框的字体颜色赋值：
Query:
之所以使用v-color="'red'"，而不是v-color="red"，是因为如果是red字符串的话，就当做变量在vue的data中查找，而这里要表达的是字符串red。
自定义v-color指令：
Vue.directive("color", {
bind(el, binding) {
el.style.color = binding.value;
}
});
binding：这个名称可以随意。
3、自定义私有指令
自定义私有指令就是在vm实例中加入 directives 属性，它是一个对象，其中属性为自定义指令的名称（不加 v-），值也是一个对象，对象里面是钩子函数列表。
var vm = new Vue({
el: "#app",
data: {
//...
},
methods: {
//...
},
directives: {
"color": {
bind(el, binding) {
el.style.color = binding.value;
}
}
}
});
4、自定义指令的简写
我们之前都是在自定义指令名称的后面跟上一个对象，里面写上 bind，inserted，update的钩子函数列表。
现在简写的话，就不需要跟上一个对象了：
directives: {
"color": (el, binding) => {
el.style.color = binding.value;
}
}
自定义名称后可以直接跟上一个匿名函数，这个匿名函数就相当于bind和update的钩子函数集合。所以，如果你只需要在bind或者update中进行元素的设置的话，就可以用这种简写的方式，当然如果是inserted的话，还是要写回对象的方式。https://www.cnblogs.com/lvonve/p/9599131.html