Vue:前端体系与前后端分离_vue前后端分离 web架构设计-程序员宅基地

技术标签: css  vue  vue.js  javascript  

Vue:前端体系与前后端分离

概述

介绍

​ Vue(读音/viu/,类似于 view)是一套用于构建用户界面的渐进式框架,发布干 2014 年 2 月.

与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅
易于上手,还便于与第三方库(如:vue-router:跳转vue-resource:通信vuex:管理)或既有项目整合。
官网:https://cn.vuejs.org/v2/guide/

前端知识体系

想要成为真正的“互联网 Java 全栈工程师”还有很长的一段路要走,其中“我大前端”是绕不开的一门必修课。本阶段课程的主要目的就是带领我Java 后台程序员认识前端、了解前端、掌握前端,为实现成为“互联网 Java 全栈丁程师”再向前迈进一步。

前端三要素

  • HTML(结构):超文本标记语言(Hyper Text Markup Language),决定网页的结构和内容
  • CSS(表现):层叠样式表(Cascading Style Sheets),设定网页的表现样式
  • JavaScript(行为):是一种弱类型脚本语言,其源代码不需经过编译,而是由浏览器解释运行,
    用于控制网页的行为

结构层(HTML)

表现层(CSS)

CSS 层叠样式表是一门标记语言,并不是编程语言,因此不可以自定义变量,不可以引用等,换句
话说就是不具备任何语法支持,它主要缺陷如下:

  • 语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器;
  • 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护;

这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题,前端开发人员会使用一种称之为CSS 预处理器的工具,提供 CSS 缺失的样式层复用机制,减少冗余代码,提高样式代码的p维护性。大大提高了前端在样式上的开发效率。

什么是 CSS 预处理器

CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行 CSS 的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言,进行 Web 页面样式设计,再通过编译器转化为正常的 CSS 文件,以供项目使用”。

常用的 CSS 预处理器有哪些

  • SASS:基于 Ruby,通过服务端处理,功能强大。解析效率高。需要学习 Ruby 语言,上手难度
    高于 LESS。
  • LESS:基干 NodeJS,通过客户端处理,使用简单。功能比 SASS 简单,解析效率也低于
    SASS,但在实际开发中足够了,所以我们后台人员如果需要的话,建议使用 LESS。

行为层(JavaScript)

JavaScript 一门弱类型脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

Native 原生 JS 开发

原生 JS 开发,也就是让我们按照**【ECMAScript】**标准的开发方式,简称是 ES,特点是所有浏
览器都支持。截止到当前博客发布时间,ES 标准已发布如下版本:

  • ES3

  • ES4(内部,未正式发布)。ES5(全浏览器支持)

  • ES6(常用,当前主流版本:webpack打包成为ES5支持!)

  • ES7 ES8

  • ES9</

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ZXLzhuzhu/article/details/120857747

智能推荐

windows安装k8s-程序员宅基地

文章浏览阅读8.1k次。安装minikube minikube安装包下载 下载minikube-linux-amd64 执行命令安装chmod +x minikube &amp;amp;&amp;amp; sudo mv minikube /usr/local/bin/查看版本以及是否安装成功minikube version用指定镜像地址启动minikube start --registry-mirr...

numpy 求矩阵非零元素的均值_非0平均 numpy-程序员宅基地

文章浏览阅读4.5k次,点赞2次,收藏6次。假如我们有一个矩阵A,想要求其中的非零元素的均值,计算方式是:直接用mean来求的话,分母是所有元素的个数,不符合我们的要求。在matlab中,这样做:mean(AA(AA~=0))numpy:import numpy as npa = np.array([[0,1],[0,0]])exist = (a != 0)num = a.sum()mean_value = exist.sum()先用着这种方法吧,简洁的没找到。参考:https://blog.csdn.net/iteapo_非0平均 numpy

Javascript删除JSON元素_将所有数值为0的元素删除(javascript)-程序员宅基地

文章浏览阅读586次。首先要搞清JSON的数据格式,我这里所说的JSON都是指javascript中的。JSON数据是由对象和数组数据结构组成,我们只要学会javascript中对对象和数组的删除方法即可对JSON项进行删除操作javasscript删除数组的3种方法1,用shift()方法shift:删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined_将所有数值为0的元素删除(javascript)

面向对象--小实例---DVD出借管理-程序员宅基地

文章浏览阅读85次。[usr/bin/python--coding:utf-8--class DVD:def init(self,name,price,status):self.name = nameself.price = priceself.status = statusif name == "main":0 未借出 1 借出a = DVD("盗梦空间",10,1)b = DVD("星际穿越",20,..._面向对象迷你dvd管理器代码

electron 最核心的2个配置文件,可以把任何网站VUE,uni-app项目变成桌面端exe_mainwindow.loadurl-程序员宅基地

文章浏览阅读786次。先切换electron镜像防止下载中报错npm config set registry https://registry.npm.taobao.org/npm config set electron_mirror http://npm.taobao.org/mirrors/electron/下载相关插件//安装electron 运行依赖 这是一个集成工具npm install -g node-gypnpm install --global --production windo._mainwindow.loadurl

汽车网络安全之——安全技术要求_安全重要参数应以安全的方式储存-程序员宅基地

文章浏览阅读2.8k次。概述近日发布了一系列的汽车信息安全技术要求(征求意见稿),围绕着通用安全、网关安全、车载信息设备安全、电动汽车远程安全给出了防护与测试准则。汽车信息安全通用技术要求本标准主要明确保护对象和规范技术要求研究对象:车内系统: a) 软件系统; b) 电子电气硬件; c) 车内数据; d) 车内通信车外通信: a) 车外远距离通信; b) 车外近距离通信技术要求:1 原则性要求:业务适用性原则:信息安全不应影响功能软件无后门原则功能最小化原则最小化授权原则权限分离原则:权限应相互分离和_安全重要参数应以安全的方式储存

随便推点

java多线程之AtomicLong原子类(JDK8)_java atomiclong-程序员宅基地

文章浏览阅读1k次,点赞5次,收藏7次。引言有的同学可能会问这个问题,有了Long类型,为什么还要弄一个AtomicLong类出来?因为在32位的操作系统中,64位的Long类型变量会被jvm拆分为两个32位的来操作,因此不具备原子性。而AtomicLong类型可以保证原子性。1、AtomicLong介绍AtomicInteger, AtomicLong和AtomicBoolean这3个基本类型的原子类的原理和用法相似。本章以J..._java atomiclong

前端总结大全_ts中的断言-程序员宅基地

文章浏览阅读10w+次,点赞268次,收藏1.5k次。记住 88 条精简前端面试题,让面试成为享受前言HTML&CSSJavaScriptVUE网络性能相关前言背的最少、面的最好。你的面试我帮你,夜色正黑,我们出发,感谢各位一直默默关注本侠的小伙伴,你们的关注,是我永恒动力,在此奉上一份大礼。次面试技能题不是最全,却是最精。后期持续优化改进。HTML&CSS浏览器内核 ;盒模型、flex布局、两/三栏布局、水平/垂直居中;BFC、清除浮动;css3动画、H5新特性。JavaScript继承、原型链、this指向、设计模式_ts中的断言

Linux网络编程之使用UDP传输文件_transport the file commented by guoqingbo-程序员宅基地

文章浏览阅读1.3w次,点赞9次,收藏42次。原创作品,转载时请务必以超链接形式标明文章原始出处:http://blog.csdn.net/gqb666/article/details/8970207,作者:gqb666 接上篇博文Linux网络编程之使用TCP传输文件。最近在写Linux网络方面的demo,用UDP实现了一个简单的传输文件程序,适用于网卡设备及TCP/IP协议栈及网络环境测试时使用。当然这里要说的是,_transport the file commented by guoqingbo

Bugly 热修复所遇到的问题记录_bugly 已下发没有激活-程序员宅基地

文章浏览阅读528次。Bugly 热修复遇到一个问题,下发成功之后无法激活(未解决)尝试使用三步手机,均下发成功之后,其中两部 Android 版本低 激活成功。 一部小米8 Android系统8.1 ,下发成功但是无法激活原因还没有找到。..._bugly 已下发没有激活

JavaWeb项目中验证码图片的绘制_javaweb验证码背景图-程序员宅基地

文章浏览阅读185次。自己在学习JavaWeb的时候学习了验证码的生成部分,感觉以后做网站什么的都会经常遇到,为了防止遗忘,所以写下这个博客,方便自己以后回忆。验证码图片生成文件:VerifyCode.javapackage cn.itcast.image;import java.awt.BasicStroke;import java.awt.Color;import java.awt.Font;imp..._javaweb验证码背景图

Java程序员谈一谈---Java程序员成长之路_程序员的成长之路+软技能 电子书-程序员宅基地

文章浏览阅读271次。阿里面试回来,想和Java程序员谈一谈引言其实本来真的没打算写这篇文章,主要是LZ得记忆力不是很好,不像一些记忆力强的人,面试完以后,几乎能把自己和面试官的对话都给记下来。LZ自己当初面试完以后,除了记住一些聊过的知识点以外,具体的内容基本上忘得一干二净,所以写这篇文章其实是很有难度的。但是,最近问LZ的人实在是太多了,为了避免重复回答,给自己省点力气,干脆就在这里统一回复了。其实之前LZ..._程序员的成长之路+软技能 电子书