Vue.js+vue-element搭建属于自己的后台管理模板：什么是Vue.js?（一）

Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js是什么?（一）

前言

本教程主要讲解关于前端Vue.js框架相关技术知识，通过学习一步一步学会搭建属于自己的后台管理模板，并且记录了本人在学习过程中遇到的难题和技术要点，讲解基础知识同时分享个人所学到心得，供读者参考与学习，学习本教程要求有一定的JavaScript编程能力，并且掌握HTML和CSS基础知识，如果有着web开发经验，会更容易解读本教程。若有疑问可以在评论区留言进行讨论，本人初学与大家一同进步。（作者写文章辛苦，不接受任何无关技术点评，不喜勿喷！本人记录了学习中一点一滴，为以后项目实战中作参考资料。）

背景

公司研讨决定将老项目进行重新架构，要求前后端分离，后端Spring cloud+.net core微服务架构，前端采用MVVM模式，SAP单页面富应用。研发部门最终决定前端采用VUE框架，因为它学习成本最低，并且满足当前需求。之前研发团队大部分人并未接触过MVVM模式，加上项目庞大业务复杂，难度系数未知，有点赶鸭子上架的意思，不过庆幸的是，我之前有过一段Vue.js学习积累，勉强初级水平，趁着在项目启动之前，把我之前所学习心得简单的整理出一个相关技术文档，也算是自己重新温习了一遍，初衷是为那些未接触过Vue.js的，不了解Vue.js框架的，想知道与传统前端开发方式区别的，用哪些编译器等疑问的新手通过本教程有个初步的理解，也希望可以通过短期自学达到快速入门，着手项目研发当中。通过每个人的理解也可以作为提前考量一个团队并作出最终抉择。新手在阅读该技术文档同时推荐官方文档资料作为最终参考并配合阅读。初识VUE的我可能对有些知识层面了解不深刻或误解，望后来读者给与指正与评教（抱拳）。

Vue.js是什么？

官方文档中介绍，Vue.js是一套用于构建用户界面的渐进式框架，易用、灵活、高效，似乎任何规模的应用都适用。它采用的是MVVM模式，与知名前端框架Angular、Ember等一样，让Web开发变得简单，同时也颠覆了传统前端开发模式，Vue属于轻量级，易上手，学习成本更低。

MVVM模式

MVVM是Model-View-ViewModel的简写，即模型-视图-视图模型。当View（视图层）变化时，会自动更新到ViewModel（视图模型），反之也一样，View和ViewModel之间通过双向绑定。

与MVC区别，MVC是单向通信，VUE就是基于MVVM模式实现的一套框架，在VUE中Model层指的是js中的data数据，View层指的是页面视图，ViewModel是指vue实例化对象。

Vue.js第一个例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="app">

        <input type="text" v-model="name" placeholder="你的名字">

        <h1>你好，{{ name }}</h1>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>

        var app = new Vue({

            el: '#app',

            data: {

                name: ''

Vue.js+vue-element的更多相关文章

(vue.js)Vue element tab 每个tab用一个路由来管理？
(vue.js)Vue element tab 每个tab用一个路由来管理? 来源:网络整理时间:2017/5/13 0:24:01 关键词: 关于网友提出的“ (vue.js) ...
FastAPI实践项目：SayHello(FastAPI + vue.js + axios + element ui)
目录简介翻版 VS 本尊后端服务源码接下来简介这次带来的是FastAPI + vue.js + axios + element ui (一个html文件里使用的) 实现的<Flas ...
vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤
通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整在项 ...
Kitty基于Spring Boot、Spring Cloud、Vue.js、Element实现前后端分离的权限管理系统
源码地址:https://gitee.com/liuge1988/kitty 软件架构后端架构开发环境 IDE : eclipse 4.x JDK : JDK1.8.x Maven : Maven ...
(vue.js)vue中引用了别的组件，如何使this指向Vue对象
Vue中引用了别的组件 ,如何使this指向Vue对象今天学习Vue组件传值, 通过创建Vue实例, 广播和监听实现传值, 但是传值之后无法直接将得到的值应用到Vue对象, 因为这相当于引用改了别的 ...
Awesome Vue.js vue.js学习资源链接大全中文
https://blog.csdn.net/caijunfen/article/details/78216868
Vue.js动画在项目使用的两个示例
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 李萌,16年毕业,Web前端开发从业者,目前就职于腾讯,喜欢node.js.vue.js等技术,热爱新技术,热 ...
Vue学习笔记【1】——什么是Vue.js
什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于We ...
学习vue.js 第一天
最近听到很多人都在用Vue.js ,我也想凑凑热闹,来个入门啥的 ,要不以后人家说,啥都不知道,多low 看到官网是这样介绍Vue.js Vue.js(读音 /vjuː/, 类似于 view) 是 ...
基于webpack和vue.js搭建开发环境
前言在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着“不听老人言,吃亏在眼前”的优良作风,我还是决定玩火自焚. ...

随机推荐

mongodb复杂条件查询 (or与and)
分类专栏: mongodb 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/tjbsl/ ...
strace命令系统调用
简介 strace常用来跟踪进程执行时的系统调用和所接收的信号. 在Linux世界,进程不能直接访问硬件设备,当进程需要访问硬件设备(比如读取磁盘文件,接收网络数据等等)时,必须由用户态模式切换至内核 ...
C# Winform ProgressBar+Labe 联动显示进度
private void btnCount_Click(object sender, EventArgs e) { label1.Visible=true; progressBar.Visible = ...
CentOS6.7安装Oracle数据库
常用.gitignore
android开发关键词:java,android,androidstudio 地址:https://www.gitignore.io/api/java,android,androidstudio ...
React中ref的三种用法可以用来获取表单中的值这一种类似document.getXXId的方式
import React, { Component } from "react" export default class MyInput extends Component { ...
Hello，DTOS！（下）
如何验证编写的主引导程序?解决方案设计:将汇编源码编译为二进制机器码(nasm)创建虚拟盘(bximage)将二进制代码写入虚拟盘起始位置(dd)在虚拟机中将虚拟盘作为启动盘执行(vmware) 就算 ...
交互器中python中的帮助使用
C:\Users\ceshi>pythonPython 2.7.12 (v2.7.12:d33e0cf91556, Jun 27 2016, 15:24:40) [MSC v.1500 64 b ...
【Spring AOP】AOP介绍（一）
AOP(Aspect Oriented Programming) 面向切面编程,是Spring框架的一个重要组件. AOP应该算是对OOP(面向对象编程)的补充和完善.OOP引入封装.继承.多态等概念 ...
微信小程序 - 登录(后端实现) | 授权(后端实现)
登录与授权官方文档一.登录登录流程时序说明: 调用 wx.login() 获取临时登录凭证code ,并回传到开发者服务器. 调用 code2Session 接口,换取用户唯一标识 Ope ...

Vue.js+vue-element