Talk is cheap. Show me your code

随笔分类 - Vue

1

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

1