随笔分类 - Vue
1
摘要：在上一篇实战演练中，已经将项目搭建好，并介绍了 Router、Vuex 的基本用法 接下来会以一个 Todo List 项目来介绍实战中如何使用 Composition API 一、输入框与列表（按键别名 + computed 类型声明 ） 首先是输入框，由于需要支持回车键提交，所以需要监听 key
阅读全文
摘要：前面的几篇文章已经大致介绍了 Vue 3 的常用 API，现在综合起来做一个实战演练 配合完整代码食用更香哦，项目地址：https://github.com/wisewrong/bolg-demo-app/tree/main/test-vue3-demo 一、初始化 首先通过 Vue-CLI 创建一
阅读全文
摘要：在如今的前端开发工作中， 组件之间的参数传递是一个非常常见的问题 Vue 2 已经有了一套非常实用的组件传参机制，Vue 3 在原本的基础上做了些改进 一、父组件传参到子组件 在《Vue3.x 从零开始（二）—— 重新认识 Vue 组件》中已经介绍过 Props 这是最常用的父对子传参方式 上面演示
阅读全文
摘要：在《Vue3.x 从零开始（二）》中已经介绍了 Mixin 这种抽取公共逻辑的方式 但 Mixin 提供的数据或函数，无法在组件中直观的体现出来 这导致组件的维护人员需要非常熟悉被引入的 Mixin 对象，不然出现重名的情况就容易出现意料之外的 bug 而 Composition API 是以函数的
阅读全文
摘要：Vue 3 更新了许多组件中的语法，包括生命周期、filter、setup、teleport 等 为了介绍这些特性，需要先了解一下 Vue 组件的基本玩法 这篇文章介绍的内容基本都是沿用 Vue 2 的语法，只在一些细节上有所调整 一、单文件组件 通过 Vue.createApp() 创建的应用，可
阅读全文
摘要：千呼万唤始出来，2020 年 9 月 19 日凌晨，Vuejs 3.0 终于发布了，代号：One Piece 作为一名从 Vue 1.x 就开始接触 Vue 的老玩家，心里只有一句话想说：学不动了... 但学不动也得学... 原本打算写一写 2.x 和 3.x 的差异，但仔细捋了一下发现内容还不少，
阅读全文
摘要：一、Input File 使用 type='file' 的 <input> 元素可以选择文件，基于此我们可以封装自定义的上传组件 <input type="file"> 可以接收四个附加属性： accept: 字符串，允许选择的文件类型，如： ".jpg,.jpeg,.png,.gif" multi
阅读全文
摘要：作为 Vue 全家桶的一员，Vuex 的重要性不言而喻，不管是用来管理状态，还是封装 Controler 都很好用 不过在一些体量较小的项目中，为了几个简单的状态或者处理函数而引入 Vuex，就像是高射炮打蚊子，大材小用了 这时候就可以模拟 Vuex，自己写一个简单的 Store， 用来管理状态并
阅读全文
摘要：Vue Cli 3 官方文档：https://cli.vuejs.org/zh/guide/ 一、安装 @vue/cli 更新到 3.x 之后，vue-cli 的包名从 vue-cli 改成了 @vue/cli 如果之前全局安装了旧版本的 vue-cli (1.x 或 2.x)，首先需要使用以下命
阅读全文
摘要：直接使用 Vue 构建前端单页面应用，页面源码时只有简单的几行 html，这并不利于网站的 SEO，这时候就需要服务端渲染 2016 年 10 月 25 日，zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js 几小时后，一个基于 Vue.js 的服务端渲染应用
阅读全文
摘要：Typescript 在前端圈已经逐渐普及，Vue 2.5.0 改进了类型声明，使得对 TypeScript 更加友好 不过要想在项目中直接使用 TypeScript 仍然需要对项目进行一些改造 PS: 建议使用 Visual Studio Code 进行开发 vue-cli 3.0 可以直接创建
阅读全文
摘要：迄今为止做的最大的 Vue 项目终于提交测试，天天加班的日子终于告一段落。。。 在开发过程中，结合 Vue 组件化的特性，开发通用组件是很基础且重要的工作 通用组件必须具备高性能、低耦合的特性 为了满足这些特性，开发的时候有很多需要注意的地方，这里我和大家分享一下我的心得 一、数据从父组件传入 为了
阅读全文
摘要：在后台管理系统中，图表是一个很普遍的元素。目前常用的图标插件有 charts, Echarts, highcharts。这次将介绍 Echarts 在 Vue 项目中的应用。 一、安装插件 使用 cnpm 安装 Echarts 和之前介绍的 axios 类似，echarts 也不能通过 Vue.us
阅读全文
摘要：前几天做项目的时候，需要实现一个动态锚点的效果 如果是传统项目，这个效果就非常简单。但是放到 Vue 中，就有两大难题： 1. 在没有 jQuery 的 animate() 方法的情况下，如何实现平滑滚动？ 2. 如何监听页面滚动事件？ 在浏览了大量文章、进行多次尝试之后，终于解决了这些问题 期间主
阅读全文
摘要：Vue 原本有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource 目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目都会使用 Vuex 来管理数据，所以这篇博客将结合两者来发送请求
阅读全文
摘要：组件（Component）是 Vue.js 最强大的功能之一，之前的文章都只是用到了基本的封装功能，这次将介绍一些更强大的扩展。 一、基本用法 在使用 vue-cli 创建的项目中，组件的创建非常方便，只需要新建一个 .vue 文件，然后在 <template> 中写好 HTML 代码，一个简单的组
阅读全文
摘要：在 Vue.js 的项目中，如果项目结构简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/6266038.html 但是如果是大型项目，很多时候都需要在子组件之间传递数据，使用之前的方式就不太方便。Vu
阅读全文
摘要：使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 官方文档： https://router.vuejs.org/zh-cn/essentials/getting-started.html 有很多朋友
阅读全文
摘要：Vue 的组件作用域都是孤立的，不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。 首先用 vue-cli 创建一个项目，其中 App.vue 是父组件，components 文件夹下都是子组件。 一、父组件向子组件传递数据 在 Vue 中，可以使用 prop
阅读全文
摘要：vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目，GitHub地址是：https://github.com/vuejs/vue-cli vue/cli 3.x 已经发布，如果使用 3.x 构建项目，请参考《Vue 爬坑之路（十二）—— vue
阅读全文
1