7种经常使用的Vue

// 显示加载组件之前的延迟。默认值:200ms。

delay: 200,

// 如果提供并超过了超时,则会显示error组件。默认值:无穷。

timeout: 3000

})

通过这种方法,你有额外的加载和错误状态、组件获取的延迟和超时等选项。

2.廉价的“v-once”静态组件


在Vue中渲染纯HTML元素的速度非常快,但有时你可能有一个包含大量静态内容的组件。在这种情况下,你可以通过在根元素中添加 v-once 指令来确保它只被评估一次,然后进行缓存,就像这样。

Vue.component(‘terms-of-service’, {

template: `

Terms of Service

… a lot of static content …

`

})

3.递归组件


组件可以在自己的模板中递归调用自己,但是,它们只能通过 name 选项来调用。

如果你不小心,递归组件也可能导致无限循环:

name: ‘stack-overflow’,

template: ‘

像上面这样的组件会导致“超过最大堆栈大小”的错误,所以要确保递归调用是有条件的即(使用 v-if 最终将为 false

4.内联模板


当特殊属性 inline-template 存在于一个子组件上时,该组件将使用它的内部内容作为它的模板,而不是将其视为分布式内容,这允许更灵活的模板编写。

These are compiled as the component's own template.

Not parent's transclusion content.

5.动态指令参数


指令参数可以是动态的。例如,在 v-mydirective:[argument]=“value" 中, argument 可以根据组件实例中的数据属性更新!这使得我们的自定义指令可以灵活地在整个应用程序中使用。

这是一条指令,其中可以根据组件实例更新动态参数:

Scroll down inside this section ↓

Vue.directive(‘pin’, {

bind: function (el, binding, vnode) {

el.style.position = ‘fixed’

var s = (binding.arg == ‘left’ ? ‘left’ : ‘top’)

el.style[s] = binding.value + ‘px’

}

})

new Vue({

el: ‘#dynamicexample’,

data: function () {

return {

direction: ‘left’

}

}

})

6.事件和键修饰符


对于 .passive.capture.once 事件修饰符,Vue提供了可与 on 一起使用的前缀:

例如:

on: {

‘!click’: this.doThisInCapturingMode,

‘~keyup’: this.doThisOnce,

‘~!mouseover’: this.doThisOnceInCapturingMode

}

对于所有其他的事件和键修饰符,不需要专有的前缀,因为你可以在处理程序中使用事件方法。

7.依赖注入(Provide/Inject)


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

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

// parent component providing ‘foo’

var Provider = {

provide: {

foo: ‘bar’

},

// …

}

// child component injecting ‘foo’

var Child = {

inject: [‘foo’],

created () {

console.log(this.foo) // => “bar”

}

// …

}

36个Vue开发技巧

=============================================================================

1.require.context()


1.场景:如页面需要导入多个组件,原始写法:

importtitleComfrom’@/components/home/titleCom’

importbannerComfrom’@/components/home/bannerCom’

importcellComfrom’@/components/home/cellCom’

components:{titleCom,bannerCom,cellCom}

最后

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始,原计划每天刷一道算法题,实际上每天有时候不止一题,一年最终完成了 600+:

凭借三年刷题经验,他在校招中很快拿到了各大公司的offer。

入职前,他把他的刷题经验总结成1121页PDF书籍,作为礼物赠送给他的学弟学妹,希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书,我仔细看了一遍,作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

而对于有时间的同学,作者还给出了他结合众多数据结构算法书籍,挑选出的一千多道题的解题思路和方法,以供有需要的同学慢慢研究。


加入社区》https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值