vue如何高效使用

最新推荐文章于 2022-08-07 19:59:50 发布
最新推荐文章于 2022-08-07 19:59:50 发布
阅读量355 收藏 1
点赞数
分类专栏： vue2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28813211/article/details/79790320
版权

一、如何让自己的代码，看起来舒服
1、个人理解，在项目中，首先coding style是必须的。
2、为了便于维护，新建一个api层，专门用来封装对后台的请求
3、使用store的时候，看项目的大小，若小的话可以不使用module,actions专门用来处理api请求。
4、新建一个util，专门用来封装用来处理特别经常使用的方法。
5、由于vue采用的路由，有的时候当一个公共组件，需要获取数据的时候，刷新时会渲染找不到数据。这是因为该数据，是在另外一个组件中请求数据的，可以有两种方法解决，
方法一、使用缓存，localStorage
方法二、在该组件中请求api
方法三、让该组件只在一个地方调用

qq_28813211
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue提升效率小技巧
jieweiwujie的博客
09-14 212
1加载速度尽量少做事情，只做关键事情，非关键事情可以考虑延迟处理，或者利用缓存合并压缩，减少http请求次数 2精减dom，包含dom深度，复杂度 3，减少路由跳转 4，代码简介高内聚低耦合，代码只做一件事，职责单一 5，定时器合理使用，不要阻塞主流程，用完销毁 ...
Vue.js：轻量高效的前端组件化方案
Wave的专栏
02-22 6166
Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中，Vue.js有幸受到一定程度的关注，目前在GitHub上已经有5000+的star。本文将从各方面对Vue.js做一个深入的介绍。
大厂2个Vue实践总结，效率提升80%！
前端达人
02-22 215
对于从事前端工作的小伙伴，掌握Vue，React这样的框架可以说是前端基本功了。人人都会用，那我们怎样才能写得比别人优雅？比别人漂亮？鉴于一线互联网大厂在前沿技术领域的持续研究和大规模投入...
vue的小技巧：高效简介的函数式组件
Encorehwang的博客
10-10 806
本文章主要分为两部分，第一部分是转载自别人和官网的对于渲染函数/函数式组件的介绍，第二部分是本人原创的公司项目中用到了函数式组件的场景 1. 函数式组件的介绍 以下1.1和1.2的内容转载自： 作者：deniro 原文地址：https://juejin.im/post/5c5bd129f265da2db0736691 来源：掘金 有时候，我们不需要复杂的组件，甚至在一些场景下，我们不需要那些组...
vue for :key的作用 操作数组 增删改 效率 性能更高
kxukai的博客
01-03 233
vue高效开发.docx
11-18
以下是一些关于Vue高效开发的关键知识点： 1. **单文件组件（Single File Components，SFC）**： Vue的核心概念之一是SFC，它将HTML、CSS和JavaScript集成在一个`.vue`文件中。这种方式提高了代码组织性，使得组件...
详解vue中使用protobuf踩坑记
10-17
在 Vue 中使用 Protocol Buffers（简称protobuf）可以帮助我们更高效地处理和传输数据。protobuf 是一种序列化协议，它提供了比 JSON 更小、更快、更简单的数据结构序列化方式。在本文中，我们将探讨如何在 Vue 项目...
vue3中使用tinyMCE
07-01
在Vue3中使用TinyMCE，我们可以利用其强大的功能并结合Vue的新特性，如Composition API和setup语法糖，来实现更加灵活和高效的组件化开发。 首先，我们来看一下如何在Vue3项目中安装和配置TinyMCE。在解压后的文件...
Vue中使用Sortable的示例代码
08-27
"Vue中使用Sortable的示例代码" 在Vue中使用Sortable的示例代码，主要介绍了如何在Vue项目中使用Sortable库来实现拖拽排序的功能。Sortable库是一个开源的JavaScript库，提供了拖拽排序的功能，可以与Vue结合使用来...
Vue 高效开发之路.pdf
08-21
Vue 高效开发之路.pdf
关于 Vue.js：那些好的，不怎么样的和糟糕的
前端大全
07-13 3153
（点击上方公众号，可快速关注）编译：开源中国/王练www.oschina.net/news/97966/about-vuejs-good-and-ugly编者注：该文章翻...
Vue项目性能优化
大灰狼的小绵羊哥哥的博客
07-21 567
前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化，使项目具有更高效的性能、更好的用户体验。本文是作者通过实际项目的优化实践进行总结而来，希望读者读完本文，有一定的启发思考，从而对自己的项目进行优化起到帮助。本文内容分为以下三部分组成： Vue 代码层
Vue项目如何提高效率？来看大厂实践总结
quieta的博客
05-20 431
Vue项目如何提高效率？来看大厂实践总结 对于从事前端工作的小伙伴，掌握Vue，React这样的框架可以说是前端基本功了。人人都会用，那我们怎样才能写得比别人优雅？比别人漂亮？ 鉴于一线互联网大厂在前沿技术领域的持续研究和大规模投入，直接向他们取经，是最便捷也是最高效的学习方式。 接下来将介绍大厂Vue项目两大最佳实践： 1、通常在组件使用前，需要引入后再注册，但如果高频组件多了，每次都这样做，不仅新增很多代码，效率还低！我们应该如何优化呢？ 其实，我们可以借助一下webpack的require.
如何使用Vue?
偷只猫来养的博客
08-18 302
如何使用Vue? 1、Vue安装： cnpm i vue --save-dev 2、Vue常常与webpack一起使用 安装了Vue后，在webpack.config.js文件中配置： module.exports = { // ... resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } } } 3、创建vm对象： 首先在html页面绑定元素，再贷js文件中实例化Vue对象，并对其进行赋值： html: &lt
助你提高效率的几个Vue指令
热门推荐
官方推荐
04-21 3万+
前言 很多使用Vue的同学往往最容易忽略的指令，由于在这里考虑到很多初学甚至还没有开始接触Vue的同学呢，在介绍v-clos之前呢就先以大家都熟知的v-model编写小demo v-model 相信大家对v-model并不陌生，简单来讲他就是用于在表单控件以及组建上创建的双向数据绑定 首先我们搭建一个Vue的小环境，在一个html页面中引入Vue.js 下面为大家带来一个小栗子： <body> <div id="app"> <input type="text"
Vue.js新手入门指南
Gcalolin的博客
04-24 1万+
最近在逛各大网站，论坛，以及像SegmentFault等编程问答社区，发现Vue.js异常火爆，重复性的提问和内容也很多，楼主自己也趁着这个大前端的热潮，着手学习了一段时间的Vue.js，目前用它正在做自己的结业项目。 在做的过程中也对Vue.js的官方文档以及其各种特性有了许多认识。作为一个之前以PHP+模版引擎为主的开发，从一个从未接触过除HTML+CSS+JavaScript+JQue
Vue的使用方法
qq_50896786的博客
08-07 4613
整个项目中node_modules占用项目的空间99%。因为前端项目也需要依赖一些插件:比如:axios elementui 那么我们可以使用npm下载并安装到当前项目。在子组件中使用（在components下创建Hello.vue子组件，与上边的组件路径一致）根据意思来理解就是说，template模板编译错误，组件模板需要一个根元素而不仅仅是个文本。此处使用别名hello 在子组件中props中定义该名称。npm install -- 安装项目需要的模块。--子组件调用-->//子组件的prop方法。.
Vue高效前端开发-列表渲染
PROBIE_的博客
06-24 825
v-for指令 说起列表不得不提起循环，v-for指令便是可以在vue中实现循环的操作。 v-for指令是基于一个数组来重复渲染的指令，通常就用于显示列表和表格。 语法： <ul v-for="(键,值,索引) in 数组"> <li>{{索引}}:{{值}}:{{键}}</li> </ul> 例： <body> <style> * { margin: 0px;
Vue快速入门
成都往右的博客
04-13 2万+
迫于无奈还得学下前端的东西，虽然本人学的是后端，但是很早也就听过了Vue很火，所以这里花一天时间学一些基础的Vue知识，至少保证能看懂吧!
vue2 使用element ui
最新发布
06-30
Vue 2 与 Element UI 结合使用是为了提供一套丰富的、易于使用的 UI 组件，使得前端开发者能够快速构建高效的界面。Element UI 是基于 Vue.js 的开源 UI 库，它提供了大量的预设组件，如表格、按钮、导航栏、下拉菜单等，覆盖了日常开发中常见的组件需求。 以下是使用 Vue 2 和 Element UI 的基本步骤： 1. **安装依赖**：首先，确保你已经安装了 Vue CLI（Vue脚手架）。然后，在项目中安装 Element UI 和样式文件： ``` npm install element-ui --save npm install element-ui-icons-vue --save ``` 2. **引入和注册**：在 `main.js` 或 Vue 的入口文件中，引入 Element UI，并注册组件库： ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. **在模板中使用组件**：现在你可以像使用 Vue 的内置组件一样使用 Element UI 的组件了。例如，创建一个导航栏： ```html <template> <div> <el-menu default-active="1" class="site-demo-menu"> <el-menu-item index="1">首页</el-menu-item> <el-menu-item index="2">用户</el-menu-item> <el-menu-item index="3">管理</el-menu-item> </el-menu> </div> </template> ``` 4. **配置路由和视图**：根据需要，使用 Vue Router 来管理页面之间的跳转，配合 Element UI 的导航栏组件，可以轻松实现单页应用的导航。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值