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的更多相关文章

  1. (vue.js)Vue element tab 每个tab用一个路由来管理？

    (vue.js)Vue element tab 每个tab用一个路由来管理? 来源:网络整理     时间:2017/5/13 0:24:01     关键词:   关于网友提出的“ (vue.js) ...

  2. FastAPI实践项目：SayHello(FastAPI + vue.js + axios + element ui)

    目录 简介 翻版 VS 本尊 后端服务 源码 接下来 简介 这次带来的是FastAPI + vue.js + axios + element ui (一个html文件里使用的) 实现的<Flas ...

  3. vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤

    通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...

  4. Kitty基于Spring Boot、Spring Cloud、Vue.js、Element实现前后端分离的权限管理系统

    源码地址:https://gitee.com/liuge1988/kitty 软件架构 后端架构 开发环境 IDE : eclipse 4.x JDK : JDK1.8.x Maven : Maven ...

  5. (vue.js)vue中引用了别的组件 ，如何使this指向Vue对象

    Vue中引用了别的组件 ,如何使this指向Vue对象 今天学习Vue组件传值, 通过创建Vue实例, 广播和监听实现传值, 但是传值之后无法直接将得到的值应用到Vue对象, 因为这相当于引用改了别的 ...

  6. Awesome Vue.js vue.js学习资源链接大全 中文

    https://blog.csdn.net/caijunfen/article/details/78216868

  7. Vue.js动画在项目使用的两个示例

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 李萌,16年毕业,Web前端开发从业者,目前就职于腾讯,喜欢node.js.vue.js等技术,热爱新技术,热 ...

  8. Vue学习笔记【1】——什么是Vue.js

    什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于We ...

  9. 学习vue.js 第一天

    最近听到很多人都在用Vue.js ,我也想凑凑热闹,来个入门 啥的 ,要不以后人家说,啥都不知道,多low 看到官网 是这样介绍Vue.js Vue.js(读音 /vjuː/, 类似于 view) 是 ...

  10. 基于webpack和vue.js搭建开发环境

    前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着“不听老人言,吃亏在眼前”的优良作风,我还是决定玩火自焚. ...

随机推荐

  1. 第三方web ide开发环境下vuejs开发HMR环境搭建-码农这样开发是快乐的！

    vuejs是一个非常优秀的前端框架,利用该框架可以快速开发出任何web app,之所以vuejs开发非常高效快捷,其中最重要的一点就是利用webpakc提供的HMR(热模块替换)特性,可以边写vue组 ...

  2. 在QT中使用FFmpeg库的部分报错问题

    win32: LIBS += -L$$PWD/../ffmpeg-win32-dev/lib/ -lavutil win32: LIBS += -L$$PWD/../ffmpeg-win32-dev/ ...

  3. 详解Vue的slot新用法

    摘要: 理解Vue插槽. 作者:前端小智 原文:vue 2.6 中 slot 的新用法 Fundebug经授权转载,版权归原作者所有. 为了保证的可读性,本文采用意译而非直译. 最近发布不久的Vue ...

  4. java Random类生成随机数

    封装一个方法: import java.util.Random; public class RandomUtil { /** * nextInt(num) 产生[0 ~ (num-1)]的随机数, 闭 ...

  5. 【原创】Airflow调用talend

    核心原理 因为talend job build出来是一个可直接运行的程序,可以通过shell命名启动job进程,因此可以使用airflow的bashoperator调用生成好的talend job包里 ...

  6. Django 使用 cookie 实现简单的用户管理

    Cookie: 1.保存在用户浏览器 2.可以主动清除 3.可以被伪造 4.跨域名 Cookie 不共享 创建一个项目:user_manager 和应用: app01 创建数据库,添加 models. ...

  7. Linux---基本目录与文件命令

    一.目录 1.显示工作目录命令pwd 2.改变工作目录命令cd 3.创建目录命令mkdir 二.文件 1.创建空文件命令touch 2.显示文件列表ls 3.复制文件或目录命令cp 4.删除文件或目录 ...

  8. 外网穿透-natapp安装配置(windows)

    natapp官网 natapp服务器更新:全面支持HTTPS协议以及本地SSL证书,支持WSS协议.同时支持HTTP/2 WEB协议,支持微信小程序本地开发.全面自动支持泛子域名与访客真实IP地址. ...

  9. 201871010114-李岩松《面向对象程序设计（java）》第十七周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  10. Sentinel 知识点

    Sentinel 实现的功能: Sentinel 实现的功能 相当于 熔断.降级 Hystrix.Spring Cloud 官方推荐的 Resilience4j