草庐IT

vue指令

全部标签

javascript - 如何从 Vue.js 中的组件生命周期方法访问 mixin 方法内部的函数

这是一个例子:混入.jsexportdefault{methods:{aFunction(){//Somefunctionalityhere}}}组件.vueimportmixinfrom'./mixin'exportdefault{mixins:[mixin]created(){//CallaFunctiondefinedinthemixinhere}}我想从组件内部的created()生命周期方法访问在mixin方法内部定义的aFunction。 最佳答案 mixin方法与组件的当前实例合并,所以它只是:created(){th

javascript - Vue : when to use @keyup. native in input 元素

我有一个Vue组件一个绑定(bind)v-on:keyup.enter的元素doFilter()的关键一个绑定(bind)v-on:click事件到doFilter()Filter按钮事件将触发doFilter(),但按键事件不会触发,除非我添加.native修饰符。Vue.jsdocumentationsaysthisabout.native:listenforanativeeventontherootelementofcomponent.我什么时候需要使用.native为什么没有它就不会触发keyup事件?更新1:添加codepen和代码可运行演示位于https://codepen

javascript - 来自服务器数据的 Vue2 路由器链接

我有一个Vue2SPA页面,它正在从服务器加载内容。客户可以在CMS中对其进行编辑。当用户添加相对链接(比如说/about-us)时,Vue应该选择它并将其视为菜单链接(已经有/about-us链接)。但是在内容中添加的/about-us链接会重新加载整个页面,因此它不会被选为vue路由。如何将路由器附加到此类链接?到目前为止,我所做的是更改后端响应中的内容。所以我本质上是在改变Text进入Text使用:functionparseVueLinks($value){$pattern="/]*)href=\\\"[^http|https|mailto|tel]([^\\\"]*)\"([^

javascript - 无法缩小 Vue.js 应用程序

我有一个带有以下代码摘录的Vue.js应用程序:(function(){initApp();})();functioninitApp(){window.myApp=newVue({el:'#wrapper',data(){ return{ somedata:[]}}});}当我尝试缩小它时,它失败并显示错误Error:Unexpectedtoken:punc(()但应用程序运行成功。我不确定为什么? 最佳答案 那些压缩器只支持旧版本的JavaScript。他们最多支持ES5。要使您的代码工作,请转换它:(function(){i

javascript - 使用 Vue 单击并编辑文本输入

我正在寻找一个点击并编辑的Vue组件。我找到了afiddle并做了一些编辑。它是这样工作的:Thefiddleishere.问题:我需要额外的点击才能使输入聚焦。如何让它自动聚焦?来自fiddle的代码。HTML:Clickthevaluestoedit!{{todo.title}}JS:newVue({el:'#app',data:{todos:[{'title':'onevalue','edit':false},{'title':'onevalue','edit':false},{'title':'otrotitulo','edit':false}],editedTodo:null

javascript - 如何在 Vue 类组件中定义过滤器?

Vue类组件是一种相对较新的单文件组件编写方式。它看起来像这样:importVuefrom'vue'importComponentfrom'vue-class-component'//The@ComponentdecoratorindicatestheclassisaVuecomponent@Component({//Allcomponentoptionsareallowedinheretemplate:'Click!'})exportdefaultclassMyComponentextendsVue{//Initialdatacanbedeclaredasinstanceproper

Javascript:除了 "use strict"之外,还有哪些 "use"指令?

除了usestrict,还有哪些use指令? 最佳答案 可以在“指令序言”(JavaScript引擎可能使用的部分)中的更多示例:'使用严格';'使用asm';Mozilla的asm.js是该语言的一个子集,用于处理数字。'使用更严格';谷歌的SoundScript。对于快速OOP还有一些模式,例如:'使用更严格的+类型';http://www.2ality.com/2015/02/soundscript.html'使用babel';用于Atom.io.(以前是:'use6to5';)JeremyAshkenas的推文建议在相同的'

javascript - 是否可以将 'required' 传递给 AngularJS 指令?

我正在制作一个使用的自定义自动完成指令本身,但我在弄清楚如何向下传递“必需”属性时遇到了一些麻烦,其他具有我可以看到的值但“必需”的属性无论是否设置都显示为空白。下面是我的返回声明的第一部分:return{restrict:'E',template:tpl,replace:true,scope:{suggestionsPath:'=autoComplete',method:'@method',term:'@term',required:'@required',ngModel:"="}...谢谢! 最佳答案 我已经构建了一些输入扩展,

javascript - 如何在 ng-grid 中使用 bindonce 指令?

我的应用程序存在严重的性能问题。我正在使用Angular和ng-grid。在阅读了为什么我的应用程序运行缓慢之后,我被指示使用bindonce克服潜在的Angular性能问题的指令。所以我在我的解决方案中添加了bindonce.js并在我的模块中注入(inject)了指令HomeIndexModule=angular.module("HomeIndexModule",['ngGrid','pasvaz.bindonce']);我在标记中使用如下我不确定这是否真的解除了网格的绑定(bind)。问题1:有没有经历过该过程的人可以指导我如何执行此操作,因为我只能在bindonce网站上找到n

javascript - AngularJS 多元素指令

AngularJS支持带有-start和-end后缀的多元素指令。官方文档只提到ng-repeat-start和ng-repeat-end。其他内置指令是否支持此功能?例如,这工作正常:{{firstName}}{{lastName}}{{firstName}}和{{lastName}}都被替换为正确的值。但这只能部分起作用:{{firstName}}{{lastName}}{{firstName}}已正确替换。但是{{lastName}}是空的。由于{{firstName}}有效,似乎ng-controller-start被AngularJS识别。{{lastName}}不工作是错误