我总结了 12 个 Vue.js 开发技巧和窍门

标签: dev | 发表时间:2020-04-10 00:00 | 作者:
出处:http://itindex.net/relian

$on 还可以侦听子组件的生命周期钩子

最后一点,生命周期钩子发出自定义事件这一事实意味着父组件可以监听其子级的生命周期钩子。

它将使用正常模式来监听事件(@event),并且可以像其他自定义事件一样进行处理。

  <child-comp@hook:mounted="someFunction"/>   

使用 immediate: true 在初始化时触发watcher

Vue Watchers 是添加高级功能(例如,API调用)的好方法,该功能可以在观察值发生变化时运行。

默认情况下,观察者不会在初始化时运行。根据你的功能,这可能意味着某些数据不会完全初始化。

  watch: {   
title:(newTitle, oldTitle) =>{
console.log("Title changed from "+ oldTitle +" to "+ newTitle)
}
}

如果你需要 wather 在实例初始化后立即运行,那么你所要做的就是将 wather 转换为具有 handler(newVal, oldVal)函数以及即时 immediate: true的对象。

  watch: {   
title: {
immediate:true,
handler(newTitle, oldTitle) {
console.log("Title changed from "+ oldTitle +" to "+ newTitle)
}
}
}

你应该始终验证你的Prop

验证 Props 是 Vue 中的基本做法之一。

你可能已经知道可以将props验证为原始类型,例如字符串,数字甚至对象。你也可以使用自定义验证器——例如,如果你想验证一个字符串列表:

  props: {   
status: {
type:String,
required:true,
validator:function(value){
return[
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !==-1
}
}
}

动态指令参数

Vue 2.6的最酷功能之一是可以将指令参数动态传递给组件。假设你有一个按钮组件,并且在某些情况下想监听单击事件,而在其他情况下想监听双击事件。这就是这些指令派上用场的地方:

  <template>   
...
<aButton@[someEvent]="handleSomeEvent()"/>...
</template>
<script>
...
data(){
return{
...
someEvent: someCondition ?"click":"dbclick"
}
},
methods: {
handleSomeEvent(){
// handle some event
}
}
</script>

而且,这实际上也很整洁-你可以将相同的模式应用于动态HTML属性,props等。

重用相同路由的组件

开发人员经常遇到的情况是,多个路由解析为同一个Vue组件。问题是,Vue出于性能原因,默认情况下共享组件将不会重新渲染,如果你尝试在使用相同组件的路由之间进行切换,则不会发生任何变化。

  constroutes = [   
{
path:"/a",
component: MyComponent
},
{
path:"/b",
component: MyComponent
},
];

如果你仍然希望重新渲染这些组件,则可以通过在 router-view组件中提供 :key属性来实现。

  <template>   
<router-view:key="$route.path"></router-view>
</template>

把所有Props传到子组件很容易

这是一个非常酷的功能,可让你将所有 props 从父组件传递到子组件。如果你有另一个组件的包装组件,这将特别方便。所以,与其把所有的 props 一个一个传下去,你可以利用这个,把所有的 props 一次传下去:

  <template>   
<childComponentv-bind="$props"/>
</template>

代替:

  <template>   
<childComponent:prop1="prop1":prop2="prop2":prop="prop3":prop4="prop4".../>
</template>

把所有事件监听传到子组件很容易

如果子组件不在父组件的根目录下,则可以将所有事件侦听器从父组件传递到子组件,如下所示:

  <template>   
<div>
...
<childComponentv-on="$listeners"/>...
<div>
</template>

如果子组件位于其父组件的根目录,则默认情况下它将获得这些组件,因此不需要使用这个小技巧。

$createElement

默认情况下,每个Vue实例都可以访问 $createElement方法来创建和返回虚拟节点。例如,可以利用它在可以通过v-html指令传递的方法中使用标记。在函数组件中,可以将此方法作为渲染函数中的第一个参数进行访问。

使用JSX

由于Vue CLI 3默认支持使用JSX,因此现在(如果愿意)你可以使用JSX编写代码(例如,可以方便地编写函数组件)。如果尚未使用Vue CLI 3,则可以使用 babel-plugin-transform-vue-jsx获得JSX支持。

自定义 v-model

默认情况下, v-model@input事件侦听器和 :value属性上的语法糖。但是,你可以在你的Vue组件中指定一个模型属性来定义使用什么事件和value属性——非常棒!

  exportdefault: {   
model: {
event:'change',
prop:'checked'
}
}

相关 [vue js 开发] 推荐:

Electron+Vue开发跨平台桌面应用

- - SegmentFault 最新的文章
虽然B/S是目前开发的主流,但是C/S仍然有很大的市场需求. 受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调用更多系统资源,再加上Web开发的低成本、高效率的优势,这种跨平台方式越来越受到开发者的喜爱. Electron是一个基于Chromium和 Node.js,使用 HTML、CSS和JavaScript来构建跨平台应用的跨平台开发框架,兼容 Mac、Windows 和 Linux.

js/jQuery插件开发及规范

- - JavaScript - Web前端 - ITeye博客
当我们画出了UI之后就可以正式编写jQuery插件代码了,不过在着之前我们还需要对jQuery插件开发的一些规范性有一些了解.  这是来自jQuery官方的插件开发规范要求,使用这种编写方式有什么好处呢. c) 兼容jQuery操作符'$'和'jQuery'. 我们知道这段代码在被解析时会形同如下代码:.

适合前端Vue开发童鞋的跨平台Weex - SegmentFault 思否

- -
基于 Vue 技术栈的你如果需要选用一种移动端跨平台框架,是 Weex. 无疑,相对于后两者,因为你现在已有比较熟练的 Vue 基础,如果在其他条件一致的情况,Weex 无疑是最佳选择;但是 Weex 真的适合在实际项目中进行移动端跨平台开发吗. Weex 的开发效率、Weex 的质量是否满足需求.

ssr vuejs/vue-hackernews-2.0: HackerNews clone built with Vue 2.0, vue-router & vuex, with server-side rendering

- -
This is a demo primarily aimed at explaining how to build a server-side rendered Vue app, as a companion to our SSR documentation. #install dependenciesnpm install#or yarn#serve in dev mode, with hot reload at localhost:8080npm run dev#build for productionnpm run build#serve in production modenpm start.

超详细!4小时开发一个SpringBoot+vue前后端分离博客项目!!

- - 掘金后端
项目代码: github.com/MarkerHub/v…. 项目视频: www.bilibili.com/video/BV1PQ…. 文章总体分为2大部分,Java后端接口和vue前端页面,比较长,因为不想分开发布,真正想你4小时学会,哈哈. 从零开始搭建一个项目骨架,最好选择合适,熟悉的技术,并且在未来易拓展,适合微服务化体系等.

Vue 3 组件开发:搭建基于SpreadJS的表格编辑系统(环境搭建)

- - SegmentFault 最新的文章
Vue是一套用于构建用户界面的渐进式框架,与其它大型 JS 框架不同,Vue 被设计为可以自底向上逐层应用,更易上手,还便于与第三方库或既有项目整合,因此,Vue完全能够为复杂的单页应用提供驱动. 2020年09月18日,Vue.js 3.0 正式发布,作者尤雨溪将其描述为:更快、更小、更易于维护.

Filer.js:简化HTML5文件系统API开发的开源JS库

- - HTML5研究小组
在 W3C 的工作草案中,有一个雄心勃勃的底层 Web 标准开发计划即 HTML5 文件系统(Firesystem)API 规范. 所谓 Filesystm API 是一个提供在用户自定义的沙盒文件系统中读取与写入文件及目录的接口. 不过正如文件系统一样,该 API 代码较长而且复杂.   为此 Google Chorme 团队的工程师 Eric Bidelman 写了一个基于它的 JavaScript 包装库,Bidlelman 将其命名为 filer.js 并放在了 GitHub 上.

推荐一个被阿里巴巴官方高度认可的vue生态中交互、体验、逻辑处理超棒的国产admin框架ant-design-vue-pro,免费开源,文档全面,希望国内开发者支持认真做事的手...

- - 沸点 - 推荐
推荐一个被阿里巴巴官方高度认可的vue生态中交互、体验、逻辑处理超棒的国产admin框架ant-design-vue-pro,免费开源,文档全面,希望国内开发者支持认真做事的手艺人,不要总想着投机取巧,踏踏实实做事.

Vue 移动端框架

- - IT瘾-jianshu
vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约. 中文文档| github地址| 在线预览. vux 基于WeUI和Vue(2.x)开发的移动端UI组件库. 基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式.

vue路由权限校验

- - 掘金前端
做后台系统的时候,难免会有用户权限的判断. admin可以查看全部菜单,user只能查看部分菜单. 一开始接触这个需求的时候,完全是纯前端做的. 在配置路由的时候,加一个roles的属性,通过判断用户的roles是否与路由的roles属性相匹配来作为显示隐藏的依据. // 过滤路由 menuList-菜单 roles-用户角色 const checkMenuList = (menuList, roles) => { for (let i = 0; i < menuList.length; i++) {.