最后前端到底应该怎么学才好？
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。
不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
==================================================================
-
举个聚焦输入框的例子，如下：
-
directive全局注册,directives局部注册
- 打开或刷新页面时，自动聚焦输入框
===============================================================
- 一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted：被绑定元素插入父节点时调用（父节点存在即可调用）。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次， 指令与元素解绑时调用。
钩子函数案例
- 我们可以借助一个简单的案例来认识这几个钩子函数
<button @click=“update”>更新
<button @click=“uninstall”>卸载
<button @click=“install”>安装
-
打开页面运行
-
bindinserted被调用
-
点击更新按钮
-
updatecomponentUpdated被调用
-
点击卸载按钮
-
unbind被调用
-
点击安装按钮
-
bindinserted被调用
=================================================================
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
最后
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
分享一些前端面试题以及学习路线给大家
色改变时得到binding.value,从而改变颜色
update(el,binding){
el.style.background=binding.value
}
})
new Vue({
el: ‘#app’,
data: {
color:“orange”
}
})
最后
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
分享一些前端面试题以及学习路线给大家
[外链图片转存中…(img-wt2Jz7q5-1715359030736)]
[外链图片转存中…(img-8LHfARlg-1715359030737)]
扫一扫
3319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
