• 周五. 12月 9th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

Java programmers learn Vue from scratch (05) – quick supplement of basic knowledge (HTML, CSS, JS)

[db:作者]

1月 6, 2022

1. introduction

Through the previous chapters , We’re right Vue There’s a whole understanding , Interested students can refer to the following :

  • 《Java Programmers learn from scratch Vue(01)- Vue Environment building 、 Project creation and operation 》
  • 《Java Programmers learn from scratch Vue(02)- Vue Development tool VsCode》
  • 《Java Programmers learn from scratch Vue(03)- VsCode Breakpoint debugging 》

In-depth learning Vue Before , Need to know some basic knowledge , This article is to explain some of the front-end basic knowledge , namely htmlcss And js.

2. say something html、css And js

I believe everyone has learned html、css and js, But I’ve been doing the back end , There are few opportunities to fight .

In fact, these knowledge can be quickly learned , I put all this knowledge in a table , It’s convenient for you to have an overall understanding :

Category describe Main function points Mainstream framework
HTML “ skeleton ” Some common tags Boostrap
CSS “ Appearance style ” Selectors 、 Box model BoostrapAnt-Design( Ali )、 Hungry (ElementUI、ivewice )、AmazeUI( a HTML5 Cross screen front frame )
JS “ action ” Logic ( Judge 、 loop )、DOM event (CURD Node element content ) JQueryReact And Vue

about js layer , The different framework network request frameworks are summarized as follows :

  • Default :xhr
  • evolution :ajax
  • Vue frame :axios

Tips :

boostrap Visual layout system ( Address :https://www.bootcss.com/p/layoutit/
, It’s very convenient for you to layout and download the code after layout , The renderings are as follows : Insert picture description here

3. CSS The preprocessor

CSS It’s a markup language , So you can’t customize variables , Its main defects are as follows :

  • Grammar is not strong enough , For example, you can’t nest writing , As a result, many repetitive selectors need to be written in modular development ;
  • There is no variable and reasonable style reuse mechanism , So that the missing related attribute value must be output in the form of literal quantity , Makes it difficult to maintain .

In order to solve the above problems , Front end developers use a method called “CSS The preprocessor ” Tools for .

CSS Preprocessor defines a new language , The basic idea is this With a special development language , Conduct Web Page style design , And then through the compiler to normal CSS file , For project use ”.

frequently-used CSS The preprocessor has :

  • SAAS: be based on Ruby, Through server processing , Powerful . The resolution efficiency is high . Need to learn Ruby Language , It’s more difficult to get started than LESS.
  • LESS: be based on NodeJS, Through client processing , Easy to use , Functional ratio SASS Simple , The analytical efficiency is lower than SASS, But it’s enough in actual development , It is recommended to use .

4. Front end tutorial

I have written the basic knowledge of the front end before , Interested children’s shoes can quickly browse and learn .

4.1 HTML

  • 《HTML Introduction and development environment 》
  • 《HTML Commonly used labels 》
  • 《HTML Rotate pictures regularly 》
  • 《HTML Frame set of FrameSet》
  • 《HTML Frame set of Form Forms 》

4.2 CSS

  • 《CSS brief introduction 》
  • 《CSS Selectors 》
  • 《CSS Box model 》

4.3 JavaScript

  • 《JS brief introduction 》
  • 《JS grammar 》
  • 《JS And Boolean Default conversion of value type 》
  • 《JS Methods cover 》
  • 《JS Timer 》
  • 《JS Modify the attribute value of the label style 》
  • 《JS And innerHTML Method 》
  • 《JS Forms get focus and lose focus 》
  • 《JS And this keyword 》
  • 《JS Element operation 》
  • 《JS A simple case of provincial and municipal linkage 》
  • 《JS How the child page gets the variable of the parent page 、 object 、 Method 》
  • 《JS How to quickly traverse a collection 》
  • 《JS Advanced applications ( Manipulate functions with variables )》
  • 《JS Advanced applications ( Higher order function )》
  • 《JS Advanced applications ( Dynamic type )》
  • 《JS Advanced applications ( Flexible object model )》
  • 《JS Several ways of jump link 》
  • 《JS Incident interception 》
  • 《JS And unshift() Method 》
  • 《JS character string format》

4.4 JQuery

  • 《JQuery brief introduction 》
  • 《JQuery Page loading 》
  • 《JQuery Related events 》
  • 《JQuery Related effects 》
  • 《JQuery Basic selector 》
  • 《JQuery Hierarchy selector 》
  • 《JQuery Basic filter selector 》
  • 《JQuery Content filter selector 》
  • 《JQuery Visibility filter selector 》
  • 《JQuery Property filter selector 》
  • 《JQuery Form selector 》
  • 《JQuery Operation of styles 》
  • 《JQuery Operations on properties 》
  • 《JQuery Traverse 》
  • 《JQuery And val,text,html》
  • 《JQuery Insert node 》
  • 《JQuery Delete node 》
  • 《JQuery Realize provincial linkage 》
  • 《JQuery Achieve left and right selection 》
  • 《JQuery Event handover 》
  • 《JQuery Simple form checker 》
  • 《JQuery Custom validator 》
  • 《JQuery Show and hide controls 》
  • 《JQuery Method callback $callback》

4.5 Bootstrap

  • 《Bootstrap brief introduction 》
  • 《Bootstrap grid system 》
  • 《Bootstrap A simple case 》

4.6 Ajax

  • 《$.ajax GET Request case 》
  • 《$.ajax GET Request case (Controller Another way of writing )》
  • 《ajax Parameters, 》

4.7 Debugging skills

  • 《 Web debugging tools NetWork》
  • 《 Common debugging methods 》
  • 《 Front end page debugging tips ( Google browser )》

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注