什么是vue框架?

什么是vue框架?,第1张

什么是vue
是一套构建用户界面的渐进式(用到哪一块就用哪一块,不需要全部用上)前端框架,Vue 的核心库只关注视图层
vue的兼容性
Vuejs 不支持 IE8 及其以下版本,因为 Vuejs 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vuejs 支持所有兼容 ECMAScript 5 的浏览器。
vue学习资源
vuejs中文官网:>说实话,阅读文档并不是我们大多数人喜欢的事情,但是当使用像Vue这样不断发展的现代前端框架时,每一个新版本都会有所变化,我们很有可爱已经错过了一些后来推出的新且好用的功能。

今天,刷碗智带大家来看看那些有趣但不那么流行的功能。记住,所有这些都是官方Vue文档的一部分。

在大型项目中,我们可能需要将组件分成小块,只有在需要时才从服务器上加载。为了更容易做到这一点,Vue允许我们将组件定义为一个工厂函数异步地解析组件定义。Vue只会在组件需要渲染的时候触发工厂函数,并把结果缓存起来以备后面的重新渲染。23版的新内容是,异步组件工厂还可以返回以下格式的对象。

使用这种方法,我们有额外的选项,包括加载和错误状态、组件获取的延迟和超时。

渲染普通的 HTML 元素在 Vue 中是非常快速的,但有的时候你可能有一个组件,这个组件包含了大量静态内容。在这种情况下,我们可以在根元素上添加 v-once attribute 以确保这些内容只计算一次然后缓存起来,就像这样:

组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事:

当你使用 Vuecomponent 全局注册一个组件时,这个全局的 ID 会自动设置为该组件的 name 选项。

稍有不慎,递归组件就可能导致无限循环:

类似上述的组件将会导致 “max stack size exceeded” 错误,所以请确保递归调用是条件性的 (例如使用一个最终会得到 false 的 v-if )。

当 inline-template 这个特殊的 attribute 出现在一个子组件上时,这个组件将会使用其里面的内容作为模板,而不是将其作为被分发的内容。这使得模板的撰写工作更加灵活。

内联模板需要定义在 Vue 所属的 DOM 元素内。

指令的参数可以是动态的。例如,在 v-mydirective:[argument]="value" 中, argument 参数可以根据组件实例数据进行更新!这使得自定义指令可以在应用中被灵活使用。

例如你想要创建一个自定义指令,用来通过固定布局将元素固定在页面上。我们可以像这样创建一个通过指令值来更新竖直位置像素值的自定义指令:

对于 passive 、 capture 和 once 这些事件修饰符,Vue 提供了相应的前缀可以用于 on:

修饰符前缀 passive& capture! once~ captureonce 或oncecapture~!

例如:

对于所有其它的修饰符,私有前缀都不是必须的,因为你可以在事件处理函数中使用事件方法:

修饰符处理函数中的等价 *** 作 stopeventstopPropagation() preventeventpreventDefault() selfif (eventtarget !== eventcurrentTarget) return 按键:enter, 13if (eventkeyCode !== 13) return (对于别的按键修饰符来说,可将 13 改为另一个按键码) 修饰键:ctrl, alt, shift, metaif (!eventctrlKey) return (将 ctrlKey 分别修改为 altKey、shiftKey 或者 metaKey)

在Vue中,有几种方法可以让两个组件进行通信,所有这些方法都有优点和缺点。 22 版本中引入的一种新方法是使用 Provide/Inject 的依赖注入。

这对选项一起使用,允许一个祖先组件作为其所有后代的依赖注入器,无论组件层次有多深,只要它们在同一个父链上。如果你熟悉React,这与React的上下文功能非常相似。

今天就到这了,就这?

~完,我是刷碗智,疫情只能在家 LoL 了。

new Vue,执行初始化
挂载$mount方法,通过自定义Render方法、template、el等生成Render函数
通过Watcher监听数据的变化
当数据发生变化时,Render函数执行生成VNode对象
通过patch方法,对比新旧VNode对象,通过DOM Diff算法,添加、修改、删除真正的DOM元素
至此,整个new Vue的渲染过程完毕。

如果不采取异步更新,那么每次更新数据都会对当前组件进行重新渲染,为了性能考虑,Vue 会在本轮数据更新后,再去异步更新数据。

depnotify() 通知 watcher 进行更新 *** 作
-->subs[i]update() 依次调用 watcher 的 update
-->queueWatcher 将 watcher 重新放到队列中
-->nextTick(flushSchedulerQueue) 异步清空 watcher 队列


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zz/13171336.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-06-15
下一篇 2023-06-15

发表评论

登录后才能评论

评论列表(0条)

保存