一、过滤器
使用的地方
过滤器：过滤器可以用在两个地方：双花括号插值 和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。
代码推进
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 管道后面的可以写n个过滤器，第一个过滤器的结果交给第二个过滤器处理，最后的结果展现在页面上 -->
{{ msg | msgfilter("美丽") |test }}
</div>
<script>
Vue.filter('msgfilter',(data,arg)=>{
return data.replace(/单纯/g,arg)
})
Vue.filter('test',(data)=>{
return data+"=========="
})
var vm = new Vue({
el: '#app',
data: {
msg:'我是曾经也是一个单纯的少年，单纯的我，单纯的向老天发问，谁是这个世界上最单纯的人'
},
methods:{},
filters：{}，
})
</script>
</body>
</html>
补充 ES6 padstart自动填充（一般用在时间过滤上面）
字符串.padStart(填充位数,"填充内容")
"12".padStart(3,'0')----->012
二、自定义指令
自定义全局的指令&私有指令
全局的指令
使用Vue .directive() 定义全局的指令 V- focus
共中:参数1 :指令的名称， 注意，在定义的时候 ，
指令的名称前面 ，不需要加 v-前缀,
//但是:在调用的时候，必须在指令名称前加上v-前缀来进行调用
// 参数2:晕个对象，这个对象身上，有一些指令相关的函数，
这些函数可以在特定的阶段，执行相关的操作
Vue . directive ( focus'，{
bind: function (e1) { // 每当指令绑定到元素上的时候，会立即执行这个bind 函数，只执行-次
//注意:在每个函数中，第一个参数，永远是el，表示被绑定了指令的那个元素，这个el参数，是一个原生的JS对象
//在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候，调用focus方法没有作用
// 因为，一个元素，只有插入DOM之后，才能获取焦点
// el. focus ()
}，
inserted: function (e1) { // inserted 表示元素插入到DOM中的时候，会执行inserted 函数[触发1次]
el. focus ()
}，
updated: function () { // 当VNode更新的时候，会执行updated ，可能会触发多次
自定义指令
directives: {//自定义私有指令
' fontweight': { // 设置字体粗细的
bind: function (e1, binding) {
el.style.fontWeight = binding.value
}
},
'fontsize': function (el, binding) { //注意:这个function 等同于把代码写到了bind 和update中去
el.style.fontsize = parseInt (binding.value) + 'px '
}
}
三、vue中操作Dom
一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。
但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。 直接将DOM节点存到内存中，可以直接调用，不需要再经过DOM树形查找，提升了性能
然后在javascript里面这样调用：this.$refs.input1这样就可以减少获取dom节点的消耗了
1、绑定
<div id="app">
<input type="text" ref="input1"/>
<button @click="add">添加</button>
</div>
2、操作DOM
<script>
new Vue({
el: "#app",
methods:{
add:function(){
this.$refs.input1.value ="test"; //this.$refs.input1 减少获取dom节点的消耗
}
}
})
</script>
