{{ message }} // 通过差值表达式的方式将数据渲染到页面
var VM = new Vue({
el: ‘#app’, // 表示当我们new的这个Vue实例, 要控制页面上的那个区域
data: { // data属性中,存放的是el中要用到的数据,这里的data就是MVVM中的M专门用来保存每个页面的数据
message: ‘Hello Vue!’
},
methods : {}, // 这个methods属性中定义了当前Vue实例所有可用的方法,主要写业务逻辑
computed: {}, // 在computed中,可以定一些属性, 这些属性叫做计算属性,计算属性的本质就是一个方法,只不过我们在使用这些计算属性的时候是吧它们的名称直接当做属性来使用的,并不会把计算属性当做方法去调用
filters : {}, // 这个filters属性中定义了当前Vue实例中所有可用的过滤的方法
watch: {}, // 使用这个属性,可以监听data中数据的变化,然后触发这个watch中对应的function处理函数
router, // 挂载路由对象
directives:{}, // 这个directives属性定义了当前Vue实例中所有可用的自定义指令
beforeCreate () {}, // 生命周期函数: 表示实例完全被创建之前,会执行这个函数
created () {}, // 生命周期函数: 表示实例被创建之后
beforeMounted () {}, // 生命周期函数: 表示模板已经编译完成,但是还没有把模板渲染到页面中
mounted () {}, // 生命周期函数:表示模板已经编译完成,内存中的模板已经真实的渲染到了页面中去,已经可以看到渲染好的页面了
beforeUpdate () {}, // 生命周期函数: 表示当前界面还没有被更新,数据肯定被更新了
update () {}, // 生命周期函数: 表示当前页面和数据保持同步了,都是最新的
beforeDestroy () {}, // 生命周期函数: 表示Vue实例已经从运行阶段进入到销毁阶段
destroyed () {} // 生命周期函数: 表示组件已经完全被销毁了
})
2.学习vue中的自定义指令
自定义指令在我们的项目中很常用, 所以要认真学习。
第一部分: 使用Vue.directive()自定义全局的指令
注意 : 参数 1 是指令的名称, 在自定义指令的时候, 指令的名称前面不需要加 "v-"前缀
注意 : 参数 2 是一个对象, 对象身上有一些指令的相关函数, 这些函数可以在特定的阶段, 执行相关的操作句号
注意 : 在参数 2 中的相关函数中,第一个参数,永远是el,表示被绑定了指令的那个元素,这个el参数,是一个原生的js对象
注意 : 在参数 2 中的相关函数中,都有一个binding参数,是一个对象,它包含以下属性:name/指令名,value/指令的绑定值(例如v-mydirective=“‘red’”)值就为red,剩下的属性去看官网用的少 同样导入vue, 创建VM实例对象
{{ message }} // 通过差值表达式的方式将数据渲染到页面
var VM = new Vue({
el: ‘#app’, // 表示当我们new的这个Vue实例, 要控制页面上的那个区域
data: { // data属性中存放的是el中要用到的数据,这里的data就是MVVM中的M专门用来保存每个页面的数据
message: ‘Hello Vue!’
},
})
// 自定义指令方法:
Vue.directive(“指令名称”,{
bind: function(){},
inserted: function(){},
updata: function(){}
})
自定义指令中的bind函数
每当指令绑定到元素上的之后,会立即执行这个bind函数,只执行一次
注意 : 和样式相关的操作,一般都可以在bind执行,只要通过指令绑定了元素,不管这个元素有没有被插入到页面中去,这个元素肯定有了一个内联样式。
将来元素肯定会显示页面中去,这时候,浏览器的渲染引擎必然会解析样式,应用给这个元素
注意 : 在元素干绑定了指令的时候,还没有插入到DOM中去,这时候调用例如:el.focus(获取焦点)等js行为相关的操作,需要在inserted方法中去执行,防止js行为不生效
因为一个元素, 只有在插入DOM之后, 才能操作他的js行为
// 举例
Vue.directive(“color”,{
bind: function(el, binding){
//这个指令绑定的样式颜色是固定死的,我们可以通过指令的绑定值来动态改变样式颜色
el.style.color =“red”
},
})
// 需要注意: 指令绑定的值如果不是字符串而是一个变量,就需要你在data中定义这个变量的值
// 下面展示通过使用指令传入的颜色来来定义绑定标签的颜色
定义指令:Vue.directive(" color ",{
bind: function(el, binding){
el.style.color = binding.value
}
})
// 在自定义局部指令的时候, 我们也可以通过给v-color绑定一个变量, 通过动态改变变量的值来控制标签的颜色
自定义指令中的inserted函数
表示元素插入到DOM中的时候会执行inserted函数(触发一次)
注意 : 和js行为相关的操作,需要在inserted方法中去执行,防止js行为不生效
// 例如:
定义指令:Vue.directive(" color ",{
bind: function(el, binding){
el.style.color = binding.value // 设置绑定该指令的标签颜色
},
inserted: function(el, binding){
el.focus() // 在这里执行获取焦点才管用
}
})
自定义指令中的updata函数
当组件更新的时候, 会执行updata函数, 可能会多次触发
第二部分: 使用Vue.directive()自定义全局的指令
使用方法和上面的全局指令一样。只是自定义局部指令需要在VM实例中定义
例如:
{{ message }} // 通过差值表达式的方式将数据渲染到页面
var VM = new Vue({
el: ‘#app’, // 表示当我们new的这个Vue实例, 要控制页面上的那个区域
data: { // data属性中存放的是el中要用到的数据,这里的data就是MVVM中的M专门用来保存每个页面的数据
message: ‘Hello Vue!’
},
// 自定义局部指令
directives: {
“color”:{
bind: function(){},
inserted: function(){},
updata: function(){}
}
// 下面这个是简写方式: 简写的function等同于把代码写到了bind和updata函数中
color: function(el, binding) {
el.style.color = binding.value
}
}
})
本文为连载文章,关注我不要错过下次更新哦~
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验,干货满满呀!如果你能够一直坚持看到这儿,那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动,或者直接进入你的收藏夹里吃灰,那么我写这篇文章就没多大意义了。所以看完之后,还是多多行动起来吧!
可以非常负责地说,如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话,那么你就至少已经达到了中级开发工程师以上的水平,进入大厂技术这块是基本没有什么问题的了。
对你有帮助,可以扫码获取!!(备注:前端)**
最后
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验,干货满满呀!如果你能够一直坚持看到这儿,那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动,或者直接进入你的收藏夹里吃灰,那么我写这篇文章就没多大意义了。所以看完之后,还是多多行动起来吧!
可以非常负责地说,如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话,那么你就至少已经达到了中级开发工程师以上的水平,进入大厂技术这块是基本没有什么问题的了。