2024年最新Vue自定义指令及封装轮播图案例(2)，2024年最新前端优化页面

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

console.log(‘inserted’);

},

update: function (el){

console.log(‘update’);

},

componentUpdated: function (el){

console.log(‘componentUpdated’);

},

unbind: function (el){

console.log(‘unbind’);

}

});

var myComp = {

template: ‘

{{msg}}

’,

props: {

msg: String

}

}

new Vue({

el: ‘#app’,

data: {

msg: ‘Hello’

},

components: {

myComp: myComp

},

methods: {

//点击更新按钮 更改自定义指令名称

update: function (){

this.msg = ‘Hi’;

},

//点击卸载按钮时 自定义指令与元素解绑

uninstall: function (){

this.msg = ‘’;

},

//点击安装按钮 自定义指令与元素绑定

install: function (){

this.msg = ‘Hello’;

}

}

})

• 打开页面运行

• bind inserted 被调用

• 点击更新按钮

• update componentUpdated被调用

• 点击卸载按钮

• unbind被调用

• 点击安装按钮

• bind inserted 被调用

钩子函数参数

=================================================================

• el、binding、vnode 和 oldVnode

el：指令所绑定的元素，可以用来直接操作 DOM 。

binding：一个对象，包含以下属性

• name：指令名，不包含v-的前缀；

• value：指令的绑定值；例如：v-my-directive=“1+1”，value的值是2；

• oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子函数中可用，无论值是否改变都可用；

• expression：绑定值的字符串形式；例如：v-my-directive=“1+1”，expression的值是’1+1’；

• arg：传给指令的参数；例如：v-my-directive:foo，arg的值为 ‘foo’；

• modifiers：一个包含修饰符的对象；例如：v-my-directive.a.b，modifiers的值为{‘a’:true,‘b’:true}

vnode：Vue编译的生成虚拟节点；

oldVnode：上一次的虚拟节点，仅在update和componentUpdated钩子函数中可用。

参数简单案例

• binding.name 可以获取指令的名字 v-demo ==> demo

• binding.value 可以获取指令的内容 v-demo="message" ==> message 的值 hello

• binding.expression 字符串形式的指令表达式 v-demo="message" ==> message

• binding.arg 可以获取 v-demo:foo ==> foo

• binding.modifiers 可以获取指令的修饰符 v-demo:foo.a.b ==> {"a":true,"b":true}

函数简写

===============================================================

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

Vue.directive(‘color-swatch’, function (el, binding) {

el.style.backgroundColor = binding.value

})

函数简写案例

• 简写之前

pink pig

pink pig

color==>{{color}}

color

• 简写之后

//简写形式

Vue.directive(“color”,function(el,binding,vnode){

el.style.background=binding.value

})

new Vue({

el: ‘#app’,

data: {

color:“orange”

}

})

对象字面量

================================================================

• 如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法类型的 Javascript 表达式。

自定义指令与轮播图简单案例

========================================================================

• 需求:封装一个指令,实现内部帮助我们实例化轮播图的功能

• 利用swiper插件点击查看swiper插件的使用

• 出现问题

• swiper插件的使用需要对轮播图进行实例化,swiper实例化了多次之后,其实还是可以进行轮播效果,但是我们发现分页器效果已经失效了

• 因为有三个swiper-slide真实dom生成然后插入,所以new swiper 实例化了3次===>导致了分页器不管用了

• 解决 等最后一个元素插入完成后再去实例化

• 获取到最后一个插入的元素的下标===传入的datalist的数据的长度-1,这时候最后一个元素插入完成,进行实例化就只会实例化一次

Vue

• 什么是MVVM？

• mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

• 组件之间的传值？

• Vue 双向绑定原理

• 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

• 虚拟 DOM 实现原理

• Vue 中 key 值的作用？

• Vue 的生命周期

• Vue 组件间通信有哪些方式?

• vue 中怎么重置 data?

• 组件中写 name 选项有什么作用？

• Vue 的 nextTick 的原理是什么？

• Vuex 有哪几种属性?

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】