vue 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
vue 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
vue 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 Readme
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
开源组织
地区 不详
投 递 者 首席测试
适用人群 未知
收录时间 2021-11-17

软件简介

教程简介

本教程要实现一个简单的后台管理系统,包含登陆、数据列表、数据查询、列表分页、添加数据、修改数据和删除数据等功能,教程会从 Vue 入门开始讲解,包含 es6、Sass、Webpack、Bootstrap、jQuery 等技术,再到后台管理系统的一些常规功能,用 Vue 如何去实现。

也许会有人质疑 Vue 和 jQuery 的搭配,在我本人看来,jQuery 本身已很成熟,而且包含了很多非常好用的插件,比如表单验证,会比 Vue 的成本低很多。在本教程中会用纯 Vue 和 Vue + jQuery 两种方式去实现某些功能,可用于对比两种方案在开发成本和性能上到底有多大的影响。

如果对 Vue 还不了解的建议先看看 Vue 基础教程,如果对 Vue 有一定了解的可以直接看 VueERP

项目目录结构

  • VueBisc [Vue 基础教程]
  • VueERP [Vue 项目教程]

技术点目录

认识 Vue

关于 Vue 的描述有不少,不外乎都会拿来与 Angular 和 React 对比,同样头顶 MVVM 双向数据驱动设计模式光环的 Angular 自然被对比的最多,但到目前为止,Angular 在热度上已明显不及 Vue,性能已成为最大的诟病。

在我看来,Vue 和 Angular 的对比有种早些年 Java 和 ASP.NET 的对比,对于开发者而言,ASP.NET 官方本身已实现好了大量的框架和功能,使用起来非常的方便快捷,同时也提供了无限的可扩展性,对比起 Java 而言,后者在本身框架和功能上都不及 ASP.NET,但同样都拥有无限的可扩展性,相比之下,本来 ASP.NET 很有一统天下的可能,但现实终归现实,ASP.NET 本身的框架和功能实现并没有换来多少称赞,反在性能和安全性方面被诟病。回看 Vue 和 Angular 的阵营,我也总有这么一种感觉。

所以,在这个开源的年代,我认为一个框架功能不需要有多么强大,再强大再完善的功能都抵不上“适合”两字,反而轻量级且有无限可扩展性会成为所有开发者的追求。

关于 Vue、React 和 Angular,其实都是在原生 JS 基础上,对面向对象不一样的实现方式而已,所以要想使用这三者中的任意一种,首先要有一定的 JS 基础和对面向对象有一定的认识。

在代码层面,Vue 只是一个构造函数,整个 Vue 的实现都在实例化这个构造函数开始。

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <div id="app"></div>
  var vm = new Vue({
    el: '#app'// Vue 实例元素
    data: {
      //数据
    }
    ...
  })

认识数据驱动模式

开始接触前端编程的基本上都是先学习 DOM 节点操作,jQuery 在这一领域上一度成为了标准,所以在前端编程的领域中,jQuery 几乎是每个开发者的标配。随着前后端分离的成熟,产品或项目都趋于分布式部署,开发者已不满足于操作 DOM 节点, 设计模式便慢慢的被前端化。

数据驱动的设计模式在思维逻辑上与 DOM 节点操作完全不一样。

  <div id="div1"></div>
  <div id="app">
    <span>{{message}}</span>
  </div>
  //DOM 节点操作
  document.getElementById('div1').innerText = '节点被动改变'  

  //Vue 数据驱动: 当 message 发生改变的时候,span 会相应的发生改变,而不需要手动去改变 span。
  var vm = new Vue({
    el: '#app',
    data: {
      message: '我是通过映射显示的文本'
    }
  })

认识 MVVM 模式

M:Model,称之为数据模型,在前端以对象的形式表现。

  var data = {message: '我就是一个数据模型'}

V:View,视图,也就是 HTML

  <div id="app">
    <span>我是视图</span>
  </div>

VM:ViewModel,就是连接数据和视图的桥梁,当 Model 发生改变的时候,ViewModel 便将数据映射到视图。

那么数据驱动模式和 MVVM 模式有什么关系,换句话说,MVVM 是数据驱动模式的一种实现,Vue 是 MVVM 的一种实现。

展开阅读全文

代码

评论

点击引领话题📣 发布并加入讨论🔥
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
0 评论
0 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部