Vue.js教程-目录

2020-8-5    前端达人

Vue.js教程-目录

简介

  • 本目录作为Vue教程的首页，所以会持续更新。
  • 如果某篇章节中有错误的地方，希望大家能够指出来，我会更正，私信和评论里说都可以，不懂的地方也可以说，如果我也不会那就请教一下大佬们吧，毕竟我对前端的东西也不是特别了解，多多包涵！嘿嘿。

章节列表

章节名称 地址
Vue.js教程-安装和HelloWorld https://coderhqf.blog.csdn.net/article/details/107574556
Vue.js教程-Vue项目的目录结构和.vue文件的构成 https://coderhqf.blog.csdn.net/article/details/107621070
Vue.js教程-Vue基本指令 https://coderhqf.blog.csdn.net/article/details/107677588
Vue.js教程-组件化开发 https://coderhqf.blog.csdn.net/article/details/107783664

Vue简介

  • Vue官网
  • Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
  • Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
  • Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue特点

  • 易用：在有HTML CSS JavaScript的基础上，快速上手。
  • 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
  • 性能：20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化。

Vue中数据观测的实现

  • Vue.js利用了ES5的Object.defineProperty方法，直接将原生数据对象的属性改造为getter和setter，在这两个函数内部实现依赖的收集和触发，而且完美支持嵌套的对象结构。对于数组，则通过包裹数组的可变方法（比如push）来监听数组的变化。这使得操作Vue.js的数据和操作原生对象几乎没有差别[注:在添加/删除属性，或是修改数组特定位置元素时，需要调用特定的函数，如obj.$add(key, value)才能触发更新。这是受ES5的语言特性所限。]，数据操作的逻辑更为清晰流畅，和第三方数据同步方案的整合也更为方便。

Vue项目打包

  • 在构建大型应用时，推荐使用Webpack+vue-loader这个组合以使针对组件的开发更。
  • 在后面的章节中会细说怎么打包并部署到服务器上，也会讲怎么白嫖阿里云(学生版)，好像有大佬写过这个文章，大家搜一下也行，最重要的还是开发。

Vue的组件化开发

  • Vue最主要的是组件化开发，因为是单页面，也就是在一个页面中渲染出多个页面的效果，这个特点能够让非常多的组件在不同的项目中重复使用。
  • Vue中的组件基于Web components进行了上层功能的实现，例如数据绑定、动画系统等。

Vue与后端的数据交互：axios

  • 传统的一般都用Ajax，但如果请求有先后关系的话就容易产生回调地狱，套娃套的吧。
  • Vue2之后就推荐使用axios了，等写到前后端交互的时候再讲这个就行。

相关说明

  • Vue参考了AngularJS、KnockoutJS、Ractive.js、Rivets.js，可以是把他们的缺点都优化成了自己的优点，参考过程中不但去其糟粕，还加入了自己的特性，但目前也只有国内用Vue的比较多，毕竟社区小，资源少，但以后应该会是潮流，因为开发快好上手。
  • 其实Vue相对来说是非常好上手的，因为它只专注于视图层。如果只是要用的话，其实对原理也不用太纠结，但既然要全栈，何不贯彻到底，我也是在学习中，如果想正规学习的话，我比较推荐coderwhy-王红君老师的课，他讲的挺好的，有些原理讲的也是很清楚的，渠道嘛，B站大学、腾讯课堂啥的都有，还有他的微博，大家可以去网上找。
  • 再强调一遍，如果发现不对的地方请联系我，因为不想误人子弟，毕竟这是自己的总结，也不想以后自己还用着错误的东西，嘿嘿嘿。。。
  • Vue作为现在国内最潮流的前端框架，也逐渐成为后端开发人员需要学的新知识了，我看现在很多后端岗位的面试里都会提到这个前端框架，所以大家学一下是不亏的。
  • 在CSDN杂志中有一篇文章：Vue.js：轻量的前端组件化方案，如果大家有兴趣就看看吧。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45062103/article/details/107763788

分享本文至：
« 如何让你的「按钮设计」上档次？ 手机appUI界面设计赏析（五） »

分类

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档