vue.js自定义指令及钩子函数学习

最新推荐文章于 2024-10-01 00:01:00 发布

浪漫前端

最新推荐文章于 2024-10-01 00:01:00 发布

阅读量1.3k

点赞数

分类专栏： Vue 文章标签： vue.js vue生命周期 vue自定义指令 vue过滤器 vue钩子函数

本文链接：https://blog.csdn.net/weixin_39976512/article/details/83692249

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

过滤器

概念：Vue.js允许自定义过滤器，可被用作一些常见的文本格式化，过滤器可以用在两个地方：mustache插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由管道符指示

过滤器调用时候的格式
{ { name | nameFilter(过滤器的名称) } }
定义过滤器

Vue.filter(' 过滤器的名称 '，function( data ) {
// 过滤器中的回调中，第一个参数已经被规定死了
//永远都是过滤器管道符前面 传递过来的数据
return data + '123'; // 给原先的值加上后缀
} )

ES6中字符串新方法之padStart和padEnd

用来填充字符串

// padStart(maxLength,fillString='')
var month = (date.getMonth()+1).toString().partStart(2,'0');
// 如果月数不足2位，自动在前面补0

键盘事件修饰符

@keyup.enter=’’
当按下enter键抬起后触发
.tab
按下tab键触发
.delete
捕获"删除"和"退格"键
.Esc
.space
.up
.down
.left
right
可以通过Vue中全局 Vue.config.keyCodes 对象自定义键盘修饰符别名
Vue.config.keyCodes.113 = f2

钩子函数

bind
只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
inserted
被绑定元素插入到父节点时调用(父节点存在即可调用，不必存在于document中)
update
所在组件的VNode更新时调用，可能会触发多次。但是可能发生在其孩子的VNode更新之前。指令的值可能发生了改变也可能没有，但是你可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated
所在组件的VNode及其孩子的VNode全部更新时调用
unbind
只调用一次，指令与元素解绑时调用

钩子函数参数

el：指令所绑定的元素，是原生的DOM对象，可以用来直接操作DOM
binding：一个对象，包含以下属性
1. name：指令名，不包括v-前缀
2. value：指令的绑定值，例如：v-my-directive=’ 1+1 ’ 值为2，
3. oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用
4. expression：绑定值的字符串形式。例如：v-my-directive=’ 1+1 ’ 值为’1+1’
5. arg：传给指令的参数
6. modifiers：一个包含修饰符的对象
vnode：Vue编译生成的虚拟节点，查阅VNode API了解更多详情
oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用

自定义全局vue指令

// 自定义指令
    // 参数1：指令名称 定义时不需要加 v-前缀，而使用时需要加v-前缀
    // 参数2：是一个对象，这个对象上，有一些指令相关的钩子函数，这些函数可以在特定的阶段执行相关的操作
    Vue.directive('focus', {
        // 钩子函数，注意在每个函数中，第一个参数，永远是el，表示被绑定指令的那个元素
        bind: function (el) { // 只调用一次，指令第一次绑定到元素时调用
        // 用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
            // el.focus();
            //在元素刚绑定指令的时候，还没有插入到dom中去，这时候调用focus方法没有作用
            // bind函数是在内存中就执行的，而inserted函数是要在页面中执行的
        },
        inserted: function (el) { // 当绑定的元素渲染到DOM中后执行该函数【触发一次】
            el.focus(); // 不能放在bind中，因为一个元素只有插入DOM中后，才能够获取焦点
            // 如果是js行为，比如获取焦点，必须在元素插入DOM中后，才能执行 
        }
    });

Vue.directive('color', {
        bind: function (el, binding) {
            // console.log(binding.name) 
            console.log(binding.value) // 参数
            el.style.color = binding.value
            // 样式：只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去这个元素肯定有了一个内联的样式,将来元素肯定会显示到页面中去，这时候，浏览器的渲染引擎必然会解析样式 ，应用给该元素
        },
        inserted: function (el) {
        }
    })

自定义私有vue指令

  directives: {
     'fontweight': {
      	bind: function (el, binding) {
        el.style.fontWeight = binding.value;
        }
      }
  }

简写函数

大多数情况下，我们可能想在bind 和 update 钩子上做重复动作，并且不像关心其它的钩子函数，可以简写为

Vue.directive("color-swatch",function(el,binding){
	el.style.backgroundColor = binding.value;
})

Vue实例的生命周期

什么是生命周期
从vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期
生命周期钩子
也就是生命周期事件的别名
主要的生命周期函数分类
1. 创建期间的生命周期函数
  1. beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好data和methods等属性
  2. created：实例已经在内存中创建好，此时data和methods已经初始化好，但是还没有开始编译模板。执行完毕后，开始编译模板，把Vue代码中的那些指令执行，然后在内存中生存一个编译好的最终模板字符串，渲染为内存中的DOM，此时，只是在内存中渲染好了模板，并没有把模板挂载到页面中。
  3. beforeMount：表示模板已经编译完成了。但是并没有把模板渲染到页面中。
  4. mounted：将已经编译好的模板，挂载到了页面指定的容器中显示。
2. 运行期间的生命周期函数
  1. beforeUpdate：状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
  2. updated：实例更新完毕之后调用此函数，此时data中的状态值和界面中的数据都已经完成了更新，界面已经重新渲染好了
3. 销毁期间的生命周期函数
  1. beforeDestroy：实例销毁之前调用，在这一步，实例仍然完全可用
  2. destroyed：Vue实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

JSONP原理

由于浏览器的安全性限制，不允许ajax访问协议不同，域名不同，端口号不同的数据接口，浏览器认为这种访问不安全；但是可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称为JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持get请求）
具体实现过程
1. 先在客户端定义一个回调方法，预定义对数据的操作；
2. 再把这个回调方法的名称，通过url传参的形式，提交到服务器的数据接口
3. 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行，
4. 客户端拿到服务器返回的字符串之后，当作script脚本解析执行。这样就能拿到jsonp的数据了