草庐IT

vue虚拟dom和diff算法

全部标签

javascript - Vue 组件 Vue-Instant

我刚刚安装了vue-instant来为搜索提供自动建议并获得这样的示例代码https://jsfiddle.net/santiblanko/dqo6vr57/我的问题是如何将组件'vue-instant':VueInstant.VueInstant移动到像这样的新Vue组件:Vue.component('vue-instant-component',{//vue-instant}我试过这样的:Vue.component('vue-instant',{data:{value:'',suggestionAttribute:'original_title',suggestions:[],se

javascript - Ionic dom-to-image 插件在渲染时崩溃

我无法显示任何代码,因为问题不是给我错误、消息或任何东西。我有这样的情况:我的应用程序必须使用domToImage进行2次渲染.首先,我从Camera/Gallery(base64)获取图像然后将其添加到img.src以呈现简单的背景。我将这个bg放在一组Dom元素下,然后将它们一起渲染这个过程进行得很好,没有问题,没有错误,没有错误。直到突然间它开始使应用程序崩溃。我根本没有对我的代码进行任何更新,任何更改。它在工作,然后就没有了。我重新制作了流程并缩小到仅在渲染时。仍然崩溃。没有行动模式。它在bg渲染或设置渲染下崩溃,或者有时不崩溃。但它不会连续错过2个。如果第一个例程没有失败,第

javascript - 确定当前文本选择包含哪些 DOM 元素

我希望能够找出用户当前在浏览器中选择的文本中存在哪些DOM元素。document.getSelection()会得到我们当前选择的文本。但是我们如何确定该文本选择中包含哪些DOM元素? 最佳答案 window.getSelection()给你一个Selection目的。使用selection.rangeCount和selection.getRangeAt()得到Range表示您想要选择的对象。现在您可以从range.startContainer/startOffset和range.endContainer/获取选择中的第一个和最后一

javascript - Javascript 中的 HTML DOM 绘图事务?

有没有办法在一个事务中封装多个DOM操作命令,这样内容就不会“忽悠”?像这样:window.stopDrawing();//starttransaction$("#news").append("anewnewsitem");//...dosomethingmore$("#news").css("top","-150px");window.startDrawing();//stoptransaction 最佳答案 每次您必须更新大量元素时,只需设置一个包含所有操作的函数,调用mozRequestAnimationFrame(或webk

javascript - 任何 View 模型 dom 更新的 Knockout JS 事件

每当通过Knockout.JS更新DOM时,我需要运行一段jqueryui代码。我意识到这可以使用自定义绑定(bind)来完成,但这似乎与特定的View模型有关,我想在全局范围内进行,所以每当它发生在它触发的任何View模型上时?假设我总是希望在所有带有“needsdate”类的文本框上使用JQuery日期选择器,而不是将其添加到我的每个View模型中,如果我可以在全局范围内这样做就太好了。这可能吗? 最佳答案 如果您不打算动态添加/删除元素,那么您可以像往常一样将它们连接起来。但是,如果您正在处理动态内容(例如使用修改了其项目的o

javascript - 如何在 DOM 更改后更新存储在变量中的 jQuery 对象?

我通常将我的jQuery对象存储在变量中,以避免将选择器写得到处都是。当我更改DOM时,我想让对象自行更新。删除未使用的引用并使用新引用进行更新。我怎样才能做到这一点?理想情况下,我想按照以下逻辑做一些事情:vartest=$('div.bar');console.log(test);>>[,]$('#b2').remove();console.log(test);>>[,]test.update();console.log(test);>>[]$('body').append('');console.log(test);>>[]test.update();console.log(te

javascript - karma Jasmine 测试 : Highlight diff in terminal

我将Karma与Jasmine一起用于我的测试。在某些测试中,我有测试所依赖的大对象。当我做类似的事情时expect(obj).toEqual(expectedObj);和obj!=expectedObj,我在终端中收到一条错误消息。但是这个错误真的很长,因为它包含了两个对象,而且很难看出两个对象在哪些部分不同。那么,有没有可以与karma一起使用的终端荧光笔?这样,就更容易找出问题所在。 最佳答案 我遇到了同样的问题,为我做了什么karma-jasmine-diff-reporter.只需安装它:npminstallkarma-j

javascript - vue webpack 模板(通过 vue-cli)以后会变得更容易使用吗?

背景开始一个新的vue.js(2.0)项目。我在其他项目(vuejs-templates/webpack)中使用过vue-cli,发现在进行任何类型的更改时都很难掌握构建过程。最重要的是,webpack因缺乏文档而臭名昭著,因此即使对构建过程进行微小的调整也需要大量工作。总的来说,我相信我同时了解webpack和vue-loader。不过,我仍然很难全面了解vuejs-templates/webpack。问题我正在考虑为这个应用程序滚动我自己的webpack配置,但我担心我最终会得到一个与当前vuejs-templates/webpack一样大的构建过程。我的计划是从vuejs-tem

javascript - Vue router 路由的安全性

我现在正在学习Vue2周,但我找不到这个关于路由安全性问题的答案。当我在Vue中使用元字段和路由守卫保护路由时,就像在考试中一样,我想知道客户端如何才能看到组件仍然存在。constrouter=newVueRouter({routes:[{path:'/foo',component:Foo,children:[{path:'bar',component:Bar,//ametafieldmeta:{requiresAuth:true}}]}]})router.beforeEach((to,from,next)=>{//checkifauthenticatedbyjwtfromstoreo

javascript - 存储对 DOM 元素的引用

在我正在编写的特定脚本中,我有许多链接到某些DOM元素的对象。鉴于每个元素都有一个唯一的ID,每个对象应该只保留元素的ID(并每次使用document.getElementById),还是将元素存储在属性中?这是我的意思的一个简化示例:functionmyThing(elId){this.elId=elId;}myThing.prototype.getElValue=function(){returndocument.getElementById(this.elId).nodeValue;};//--vs--//functionmyThing(elId){this.el=documen