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 的一种实现。

展开阅读全文

代码

评论 (0)

加载中
更多评论
暂无内容
发表了博客
2020/04/14 13:50

Vue - Vue-CLI2 和 Vue-CLI3、Vue-CLI4的区别

周末在家新建了一个 Vue 测试项目,但不管怎么建,总会提示一些 有的没的,杂七杂八的信息,如:找不到 funding、存在多少漏洞(vulnerabilities) 什么的。如下所示: 寻思着,出现这些问题的原因,应该是一些 不太重要的依赖包 更新了版本 或 迁移了地址,导致之前的 Vue-CLI 找不到 对应的版本 或 依赖包地址了。 虽然暂时没发现这些错误对项目的运行和打包有啥影响,但是一句话,看着不爽。既然看着不爽,就想收拾它,怎么收拾...

0
3
发表了博客
2018/04/27 14:00

Vue--vue-Router

一.vue路由的基本使用 为什么需要路由? 因为我们通过component切换组件无法给组件传递参数 component切换组件 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="../vue2.4.4.js"></script> 9 </head...

0
1
发表了博客
2019/06/23 21:29

[Vue] : Vue概述

什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架。 Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架! Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。 Vue 核心的概念,就是让用户不再操作DOM元素,提高渲染效率,前端程序员只需要关心数据的业务逻辑,不再关系 DOM 是如何渲染的。 MVC 与 前端中的 MVVM...

0
1
发表了博客
2019/04/04 11:41

vue -- vue实例

一、vue实例 let app = new Vue({ // 对象属性 ]) 二、对象属性 1、el 就是父DOM 2、data 所有vue上面操作的数据都会被写在这里 3、methods 所有的函数方法都写在这里 methods: { getFun () { console.log(123) } } 4、components 用来注册子组件用 5、props 这个是子元素用来接收父元素传递数据的属性 二、生命周期钩子函数 生命周期钩子函数 作用范围 beforeCreate el,data都为undefined,还没有初始化...

0
2
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表于大前端专区
01/19 11:41

vue 表单的input太多导致输入内容的时候input卡顿,请问有什么好的方案解决吗?

vue 表单的input太多导致输入内容的时候input卡顿,请问有什么好的方案解决吗?

3
0
2021/12/28 18:01

不考虑就业的情况,如果想学习下前端,学习 vue 好,还是 react 好

如果现在想学下前端,是学习 vue 还是 react 呢 这两个在手机 app 和小程序上哪个发挥的更好呢

2
0
发表于大前端专区
2021/11/24 13:04

vue如何访问优盘

通过js去u盘中读取文件不用选文件的那种

7
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
0 评论
0 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部