当前位置：首页 > 软件库 > Web应用开发 > 常用JavaScript包 >

vue

授权协议 Readme

开发语言 JavaScript

所属分类 Web应用开发、常用JavaScript包

软件类型开源软件

地区不详

投递者阳光辉

操作系统跨平台

开源组织无

适用人群未知

软件概览

教程简介

本教程要实现一个简单的后台管理系统，包含登陆、数据列表、数据查询、列表分页、添加数据、修改数据和删除数据等功能，教程会从 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 的一种实现。

使用案例

vue知识点总结

1、Vue和其他两大框架的区别 Angular 学习成本太高 React 代码可读性差 Vue 学习成本较低很容易上手传送门 https://cn.vuejs.org/v2/guide/comparison.html ️2、Vue是什么 Vue是一套用于构建用户界面的渐进式框架 “前端框架” 让程序员脱离自己操作DOM 专注于写逻辑和操作数据 Vue的核心库只关注视图层易上手便于与第三方库
Vue3通透教程【一】Vue3现状—必然趋势？

�� 专栏介绍凉哥作为 Vue 的忠诚粉丝输出过大量的 Vue 文章，应粉丝要求开始更新 Vue3 的相关技术文章，Vue 框架目前的地位大家应该都晓得，所谓三大框架使用人数最多，公司选型最多的框架，凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因，和 Vue 框架相比其他框架的巨大优势，有兴趣的伙伴可以看一下 Vue框架背后的故事，随着 Vue 框架不断的被认可，现如今的 Vue
Vue3和Vue2的区别

目录前言概览一、新特性二、差异详情一、vue3新特性 1、组合式API---setup 2、ref创建响应式数据 3、Teleport---“传送门” 4、多根节点 5、style中使用变量二、区别 1、v-if和v-for的优先级 2、.sync修饰符 3、全局API 4、Vue.prototype 替换为 config.globalProperties 5、生命周期 6、key在
vue2和vue3区别

1. vue2和vue3双向数据绑定原理发生了改变 vue2的双向数据绑定是利用了es5 的一个API Object.definepropert() 对数据进行劫持结合发布订阅模式来实现的。vue3中使用了es6的proxyAPI对数据进行处理。相比与vue2，使用proxy API 优势有：defineProperty只能监听某个属性，不能对全对象进行监听；可以省去for in 、闭包等内容
vue2与vue3的区别

1. vue2和vue3响应式原理发生了改变 vue2 的响应式原理是利⽤es5 的⼀个 API ，Object.defineProperty()对数据进⾏劫持结合发布订阅模式的⽅式来实现的。 vue3 中使⽤了 es6 的 proxy API 对数据代理，通过 reactive() 函数给每⼀个对象都包⼀层 Proxy，通过 Proxy 监听属性的变化，从⽽实现对数据的监控。这⾥是引相⽐于v

vue

教程简介

项目目录结构

技术点目录

认识 Vue

认识数据驱动模式

认识 MVVM 模式

同类工具

相关阅读

相关文章

相关问答

相关文档