当前位置: 首页 > Web前端 > vue.js

Vue知识体系基本介绍

时间:2023-04-01 10:53:03 vue.js

作为前端三大框架之一,vue是前端开发者必备的技能。那么如何系统的学习和掌握vue呢?为此,我对知识体系做了一个简单的总结。请多多包涵,不足之处请指正。喜欢的话可以给个赞哦!本文来源于我的掘金:https://juejin.im/post/5e5c5d...相关推荐JS基础总结(一)——数据类型JS基础总结(二)——原型与原型链JS基础总结(三)——JS作用域和闭包基础总结(四)——this指向和call/apply/bindJS基础总结(五)——JS执行机制和EventLoopdVue的优缺点是什么?优点:低耦合。视图(View)可以独立于模型而改变和修改。一个ViewModel可以绑定到不同的视图。当View改变时,Model可以保持不变,当Model改变时,View也可以保持不变。可重用性。您可以将一些视图逻辑放在ViewModel中,让许多视图重用该视图逻辑。自主开发。开发人员可以专注于业务逻辑和数据开发(ViewModel),设计师可以专注于页面设计,使用ExpressionBlend轻松设计界面和生成xml代码。可测试的。接口总是更难测试,现在可以针对ViewModel编写测试。vue是单页面应用,使得页面局部刷新,不需要每次跳转页面都去请求所有的data和dom,大大加快了访问速度,提升了用户体验。而他的第三方ui库,节省了大量的开发时间。缺点:不利于SEO,社区维护性不强,相对于vue常用指令不够成熟v-html/v-text:渲染值中的标签v-model:放置在表单元素实现双向数据绑定v-bind(简称:):用于绑定行内属性v-if/v-show可以显示,true可以显示,false不能显示v-cloak:需要配合css的使用:解决小胡子显示问题v-once对应标签只渲染一次v-for:循环显示元素v-on事件绑定事件修饰符Vue.js为v-on提供了事件修饰符,修饰符由由点开头的命令后缀表示。stop:阻止事件继续传播prevent:阻止事件默认行为capture:添加事件监听器时使用事件捕获方式self:事件处理函数仅在当前元素被触发一次时触发:事件仅被触发oncepassive:告诉浏览器你不想阻止事件默认行为,不能与.prevent一起使用。...

...
...
形式修饰符.lazy在输入框中输入内容后,v当光标离开时,view会更新。trim过滤前导和尾随空格。number如果您先输入数字,它将限制您只能输入数字;如果先输入字符串,则相当于没有添加.numberfilter。过滤器就是对要展示的数据进行进一步的过滤,然后展示出来。值得注意的是,过滤器并没有改变原有的数据,只是在原有数据的基础上生成新的数据。定义过滤器全局注册Vue.filter('myFilter',function(value1[,value2,...]){//代码逻辑})本地注册newVue({filters:{'myFilter':function(value1[,value2,...]){//代码逻辑}}})在双花括号中使用过滤器
{{message|myFilter}}
计算的属性computed依赖于其他属性值,并且computed的值被缓存起来,只有它依赖的属性值发生变化,下次获取computed值时会重新计算computed值;

原始消息:“{{message}}”

计算后的反向消息:“{{reversedMessage}}”

监控属性watch,观察并响应Vue实例数据变化。类似于一些数据的监听回调,每当监听到的数据发生变化时,都会执行回调,进行后续操作。它可以有三个参数handler:其值是一个回调函数。即,检测到变化时应执行的函数deep:其值为true或false;确认是否深度监控。immediate:其值为true或false,确认是否以当前初始值执行handler的函数watch:{message:{handler:function(val,oldVal){console.log(val,oldVal)},deep:true,immediate:true}}computed和watchcomputed的区别:它是一个computed属性,依赖于其他属性值,computed的值是缓存的,只有当它所依赖的属性的值发生变化时,该值computed的会在下次获取computed的值时重新计算;watch:更多的是一个“观察”的功能,类似于一些数据的监听回调。每当监控到的数据发生变化时,都会执行回调进行后续操作。应用场景当我们需要进行数值计算,依赖其他数据时,应该使用computed,因为我们可以利用computed的缓存特性,避免每次取到一个值都重新计算;当我们需要执行异步或昂贵的操作时,应该使用watch。使用watch选项允许我们执行异步操作(访问API),限制我们执行操作的频率,并在我们获得最终结果之前设置中间状态。这些是计算属性不能做的事情。生命周期函数beforeCreate(创建前)挂载元素$el和vue实例的数据对象data未定义,尚未初始化created(创建后)完成data数据初始化,el尚未初始化beforeMount(加载前)vueinstance$el和data都被初始化,第一次调用相关的render函数。mounted(加载后)Ajax交互在此过程中进行。Vue的beforeUpdate(更新前)updated(更新后)beforeDestroy(销毁前)destroyed(销毁后)父组件和子组件生命周期钩子的执行顺序是怎样的?渲染过程:挂载子组件后必须挂载父组件,所以挂载子组件后挂载父组件。ParentbeforeCreate->parentcreated->parentbeforeMount->childbeforeCreate->childcreated->childbeforeMount->childmounted->parentmounted子组件更新过程:影响父组件:parentbeforeUpdate->childbeforeUpdate->childupdated->Parentupdated不影响父组件:childbeforeUpdate->childupdated父组件更新过程:影响子组件:parentbeforeUpdate->childbeforeUpdate->childupdated->parentupdated不影响子组件:parentbeforeUpdate->parentupdated销毁过程:parentbeforeDestroy->childbeforeDestroy->childdestroyed->parentdestroyed组件注册组件(component)是Vue.js最强大的特性之一。组件可以扩展HTML元素,封装可重用代码。组件的使用过程包括定义和注册的过程。定义组件//方法一Vue.extendvarMyComponent=Vue.extend({template:'
Acustomcomponent!
'})//方法二:新建.vue文件注册组件//全局注册Vue.component('my-component',MyComponent)//部分注册newVue({el:'#app',components:{'my-component':MyComponent}})usecomponent组件传值1.props父组件传值给子组件。props值可以是数组或对象;//array:props不推荐:[]//objectprops:{inpVal:{type:Number,//传入值限定类型//type值可以是String,Number,Boolean,Array,Object,Date,Function,Symbol//type也可以是自定义构造函数,使用instanceof来检查确认required:true,//必须传default:200,//默认值,对象或数组默认值必须从default等工厂函数中获取:()=>[]validator:(value){//这个值必须匹配以下字符串之一return['success','warning','danger'].indexOf(value)!==-1}}}2.$emitchildcomponenttoparentcomponent传值触发子组件触发父组件给自己绑定的事件,其实就是传递子组件给父组件的方法//父组件//子组件this.$emit('title',{title:'Thisisthetitle'})3.Vuex数据状态管理state:定义存储数据的仓库,可以通过gette访问这个.$store.state或mapStater:获取store值,可以认为是store的计算属性,可以通过this.$store.getter或者mapGetters访问模块,通过this.$dispatch或者mapActions:模块,如果状态太多,可以拆分成模块,最后通过...解构在入口处引入4.attrs和listenersattrs获取child-passparent中props中未定义的值//父组件//子组件mounted(){console.log(this.$attrs)//{title:"这是标题",width:"80",height:"80",imgUrl:"imgUrl"}}//相应的,如果子组件定义了props,则打印的值是去掉定义的属性props:{width:{type:String,default:''}},mounted(){console.log(this.$attrs)//{title:"Thisisthetitle",height:"80",imgUrl:"imgUrl"}}listeners:场景:子组件需要调用父组件Soluti的方法on:父组件的方法可以通过v-on="listeners"传递给内部组件——在创建高层组件时非常有用//父组件//子组件挂载(){console.log(this.$listeners)//可以获得change事件}5.provide和injectProvide和inject主要是为高层插件/组件库提供用例。不建议直接在应用代码中使用;并且这对选项需要一起使用;允许一个祖先组件向其所有后代组件注入依赖,无论组件层级有多深,并且在建立上下游关系时总是生效。//parentcomponent:provide:{//provide是一个提供属性或方法的对象foo:'thisisfoo',fooMethod:()=>{console.log('parentcomponentfooMethodiscalled')}},//childorgrandchildcomponentinject:['foo','fooMethod'],//数组或对象,注入子组件mounted(){this.fooMethod()console.log(this.foo)}//in父组件下的所有子组件都可以使用inject6。$refs通常用于父组件调用子组件的方法//父组件mounted(){console.log(this.$refs.child)//可以得到子组件的实例子组件,可以直接操作数据和方法}7、EventBus是声明一个全局的Vue实例变量EventBus,将所有通信数据和事件监听存放在这个变量中;类似于Vuex。但是这种方式只适用于非常小的项目3.原理是在main.jsVue.prototype.$eventBus=newVue()中使用emit实例化一个全局vue实现数据共享//传值组件this。$eventBus.$emit('eventTarget','ThisisthevaluepassedfromeventTarget')//接收组件this.$eventBus.$on('eventTarget',v=>{console.log('eventTarget',v)//这是eventTarget传过来的值})路由配置和使用配置路由信息=newVueRouter({routes:routes})letvm=newVue({el:'#app',router})使用首页列表另外vue-router还可以配置动态路由查询传参(问号传参)params传参(路径passess参数)vue项目中的路由懒加载实现路由按需加载(路由懒加载)有以下几种方式://1.vue异步组件技术:{path:'/home',name:'home',component:resolve=>require(['pathpath'],resolve)}//2.es6提案的import()constHome=()=>import('pathpath')//3.webpack提供的require.ensure(){路径:'/home',名称:'Home',组件:r=>require.ensure([],()=>r(require('path')),'demo')}RouteGuardvue-router提供的导航守卫,主要用于守卫跳转或取消的导航。路由导航过程中植入的机会有很多:全局的、独占单个路由的,或者组件级的。全局前卫常用来判断登录状态和菜单权限验证meta.auth){next('/login')}else{next()}})to:Route:即将进入的目标路由对象from:Route:当前导航即将离开的路由next:作用:必须调用This方法来解析这个hook。执行效果取决于next方法的调用参数。beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave组件中的guard路由缓存keepalivekeep-alive是Vue提供的一个抽象组件,用于缓存组件以节省性能。由于是抽象组件,v页面渲染后不会渲染成DOM元素。当组件切换keep-alive时,会执行组件的activated和deactivated两个生命周期钩子函数1.使用参数包括/排除包括:字符串或正则表达式。只有匹配的组件才会被缓存。排除:字符串或正则表达式。任何匹配的组件都不会被缓存。include属性表示只缓存name属性为a和b的组件,(注意是组件名,不是路由名)其他组件不缓存。exclude属性表示name属性为c的组件不会被缓存,其他组件会被缓存。2.要使用$route.meta的keepAlive属性,需要在router中设置router的meta信息。metaexportdefaultnewRouter({routes:[{path:'/',name:'Hello',component:Hello,meta:{keepAlive:false//不需要缓存}},{path:'/page1',name:'Page1',component:Page1,meta:{keepAlive:true//需要缓存}}]})区分app.vue中的缓存和不缓存的页面hash和historymodehash模式:在浏览器中,符号“#”、#和#后面的字符称为hash,用window.location.hash读。特点:hash虽然在URL中,但不包含在HTTP请求中;它用于指导浏览器的操作,对服务器端安全无用,哈希不会重新加载页面。历史模式:历史采用了HTML5的新特性;并提供了两个新的方法:pushState()、replaceState()可以修改浏览器历史栈,监听popState事件的状态变化。在hash模式下(http://localhost:8080#home),即使不需要配置,静态服务器也会一直寻找index.html返回给我们,然后vue-router将#后面的字符获取为对前端页面的参数进行改造。在history模式下,我们想要的是:输入http://localhost:8080/home,但是最后返回的也是index.html,然后vue-router会把home作为参数来改造前端页面。那么在nginx中,谁能做到这一点呢?答案是try_files。推荐文章从零搭建一个webpack项目总结几种webpack打包优化方法总结前端性能优化方法几种常见的JS递归算法搭建一个vue-cli移动端H5开发模板封装一个toast和dialog组件并发布到阅读全前端npm中的路由、后端路由、单页应用、多页应用。谈谈JavaScript中的防抖和节流

猜你喜欢