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

再读一次Vue官方文档带来的意外惊喜

时间:2023-03-31 16:47:13 vue.js

Vue官方文档带来的意想不到的惊喜又来了就用吧。刚开始使用Vue的时候只是简单的看了文档,并没有在意细节,以至于在后来的项目中遇到了很多问题之后就反复的查看文档解决问题。在我看来,不应该是这样的。这个水平只给我处理问题的能力。虽然经验让我在遇到问题的时候知道大方向,但是永远无法建立对Vue技术的信心。.所以,打算再回来翻官方文档,记录下一直没看懂的东西。之后,我会尝试阅读Vue的源码,分享给大家。动态参数...这里的attributeName会被动态的作为一个JavaScript表达式求值,得到的值会作为最终的参数。例如,如果你的Vue实例有一个数据属性attributeName的值为“href”,那么这个绑定将等同于v-bind:href注意:attributeName应该全部小写attributeName如果它是由表达式生成的,那么它应该放在calculated属性中,避免在HTML中直接写表达式动态类和样式类的几种写法1.

//对象语法2。
//对象语法3。
//数组语法data:{isActive:true,hasError:false,classObject:{active:true,'text-danger':false},errorClass:'text-danger'}style1.
//对象语法2.//对象语法3.//数组语法data:{activeColor:'red',fontSize:30,styleObject:{color:'red',fontSize:'13px'},样式object2:{color:'blac',fontSize:'13px'}}v-showv-show不支持

一段主要内容。

还有一个。

这是一些联系信息

inheritAttrs,$attrs,$listeners总结一句话:$attrs存储非prop特性,inheritAttrs详细控制Vue对非prop特性的默认行为??VueinheritAttrs,$attrs,$listeners详解依赖注入provide和inject//父组件provide:function(){return{getMap:this.getMap}}//父组件下的所有组件(children,grandchildren,great-grandchildren...)inject:['getMap']细节??提供和Inj用于Vue组件通信ect机制的程序化事件监听器(强迫定义-其实就是创建实例和清除实例一起,简化操作和无用代码)通过$on(eventName,eventHandler)通过$once监听一个事件(eventName,eventHandler)一次监听一个事件用$off(eventName,eventHandler)停止监听一个事件详情??vue编程事件侦听器强制更新$forceUpdate如果你发现自己需要在Vue强制更新中执行一次,99.9%的时间,你在某处做错了你可能没有注意到数组和对象的变化检测注意事项,或者您可能依赖Vue的反应系统未跟踪的状态。但是,如果您已完成上述操作,但仍然发现在极少数情况下您需要手动强制更新,那么您可以使用$forceUpdate来执行此操作。在Vue中呈现纯HTML元素非常快,但有时您可能有一个包含大量静态内容的组件。这种情况下,可以在根元素上加上v-once属性,保证内容只计算一次然后缓存,不会再次更新。(一般不用)transition过渡可以用哪些组件/元素?条件渲染(用v-if)条件显示(用v-show)动态组件组件根节点transition类v-enter:定义进入开始状态过渡。v-enter-active:定义进入转换激活时的状态。v-enter-to:定义进入转换的结束状态。v-leave:定义离开转换的开始状态。v-leave-active:定义离开转换激活时的状态。v-leave-to:定义离开转换的结束状态。`v-`是类名的默认前缀,如果您使用不带名称的a,则在转换中切换类名。如果使用,则v-enter将替换为my-transition-enter。过渡模式in-out:新元素先过渡,完成后当前元素过渡离开。out-in:当前元素先过渡,完成后新元素过渡进来。自定义过渡类名称enter-classenter-active-classenter-to-classleave-classleave-active-classleave-to-class<转换v-on:before-enter="beforeEnter"v-on:enter="enter"v-on:after-enter="afterEnter"v-on:enter-cancelled="enterCancelled"v-on:before-leave="beforeLeave"v-on:leave="leave"v-on:after-leave="afterLeave"v-on:leave-cancelled="leaveCancelled">渲染函数和JSX感觉很好吃!看完这篇,看完发现没有GET点,做个记录,回头仔细看看。??链接插件我发现了新世界??看到这个链接,以后自己写插件。前后花了将近一周的时间,终于把vue的文档重新看了一遍。的确,收获颇多。在平时的项目开发中,有很多东西是不会真正用到的,但是知识储备还是很有必要的。这样在项目中遇到问题后,就会有自己的思维方式,从而更快的追根溯源。继续努力!作者:Tomatoro博客:tomatoro.cn创作空间:tomatoro.space