前端的部分知识点

一、前端的技术栈
1.HTML超文本标记语言实现了页面的展现，形成了静态网页
2.CSS层叠样式表实现了页面的美化
3.JS JavaScript脚本语言实现了页面前端和后端的数据交互，形成了动态网页
4.react Facebook出品前端、移动端的JavaScript框架
5.angular goolge出品基于typescript的开源web应用框架
6、vue国人出品，阿里收购构建用户界面的渐进式框架，自底向上开发
7、nodejs基于Chrome v8引擎的JavaScript运行环境
前端必学的三种语言：
1.HTML定义网页的内容H5
2.CSS规定网页的布局CSS3
3、JavaScript实现网站的交互ES6
一、HTML
结构：
1、文档说明：用来声明HTML文档遵循HTML规范
2、头部分：用来存放HTML文档的基本信息，比如网页标题，编码格式，这部分会被网页优先加载
3、体部分：用来存放网页要显示的数据
4、声明网页标题：用来通知浏览器使用哪个编码来打开HTML文档，打开的方式一定要和保存文件的使用的编码一致，避免出现中文乱码现象

语法：
1、HTML标签
HTML是一门标记语言，标签分为开始标签和结束标签，如果开始标签和结束标签之间没有内容的话可以合并成一个自闭标签
2、HTML属性
HTML标签都可以具有属性，属性包括属性名和属性值，要以空格隔开，属性的值要用单引号或者双引号引起来
如：
3、HTML注释

常用标签
1、标题标签：<h1~h6/> 字体从大到小
2、列表标签：ol + li 有序 就是在添加的内容前面加上排序
ul +li无序 就是再添加的内容前面有一个小点
3、图片标签 注意：其中加的属性可以是路径src 边框border width宽度 height高度
4、超链接标签 注意：href可以指定跳转的位置 target 是指定跳转位置
5、input标签： 普通文本框
密码
男 单选框
数字值
日历
杨幂 复选框
< input type=“button” value=“点我一下”/>

6、表格标签：table ， 表单里面的行：tr 表单里面的列：td colspan列合并 rowspan是行合并
7、表单标签：form 注意：写表单标签的时候需要写一个method用于提交数据的方法
8、音频标签： 注意：加载mp3音频，浏览器的默认规定视频音频不会自动播放，因为自动播放会占用流量
9、视屏标签：注意:加载mp4视屏，注意：不能按网站的方式访问，无法打开视频，直接按照本地文件打开方式是可以正常访问的
8、其他标签：

是可以换行的 就一个普通的标签
二、CSS
盒子 模型：将HTML中的所有元素都看成一个盒子，盒子之间的距离，包括盒子的边框以及盒子内容的距离都可以设置

元素类型的补充：
1、块级元素：默认情况下，块级元素独占一行（div，p，h1~h6）
可以设置宽和高，如果不设置宽和高，其中宽是默认填满父元素，而高是由内容边外距，边框，内边距都是可以设置的
2、行内元素：默认情况下，多个行内元素处于同一行，不能设置宽和高，左右边距，边框内边距都可以设置，上下外边距设置无效
3、行内快元素：具备行内元素的特征，还具备块级元素的特征
JavaScript（JS）
js是一门基于对象和事件驱动的脚本语言 ，通常用来提高网页与用户的交互

Document对象
–获取对象: window.document
–调用方法:
getElementById(“元素的id的属性的值”)–返回1个元素
getElementsByName(“元素的name属性的值”)–返回多个元素(用数组)
getElementsByClassName(“元素的class属性的值”)–返回多个元素(用数组)
getElementsByTagName(“元素的标签名的值”)–返回多个元素(用数组)
write()–向文档写 HTML 表达式 或 JavaScript 代码
title–返回网页的标题
id–设置或返回元素的id
innerHTML–设置或返回元素的内容
json
概念：
JavaScript对象表示法，是一种轻量级的数据交换格式
作用：
json是存储和交换文本信息的语法
语法：
1、json数据：var a =’ “firstName” : “John” ’
2、json对象：var a = ‘{ “firstName”:“John” , “lastName”:“Doe” }’
3、json数组：var a = ‘[{ “firstName”:“Bill” , “lastName”:“Gates” },{ “firstName”:“George” , “lastName”:“Bush” }]’;
转换工具:
1、给服务器发送数据：将js对象转成json字符串 JSON.stringify（js对象）
2、接收服务器数据：将json字符串转成js对象 JSON.parse（“json字符串”）
ajax：
概述：ajax允许通过与场景后面的web服务器交换数据来异步更新网页，着意味着可以更新网页部分而不需要重新加载整个页面
核心对象：XMLHttpRequest
XMLHttpRequest对象用于同幕后服务器交换数据，这意味着可以更新网页的部分，而不需要重新加载整个界面

四、Vue
特点：
1、一个轻量级的mvvm框架双向绑定，数据动态更新，gzip后大小只有20k+
2、是一个渐进式框架，其核心思想是数据驱动、组件化的前端开发
3、原生html页面是通过js操作的是dom，而vue.js操作的是数据
4、和传统前端开发开发的关注点完全不同，传统方式关注的是都是想document结构的api，而vue关注的是数据
5、优点显而易见，从而屏蔽了使用复杂晦涩难记的dom结构api
Vue是一个用于构建用户界面的渐进式spa单一 页面框架
高级用法：
1、指令集
常见的vue的指令：v-if.v-for.v-on.v-bind.v-model.v-cloak等
双向绑定：v-model 闪现：v-cloak 判断v-if，循环v-for,事件 v-on，绑定v-bind
mvvm框架：实现了页面和数据的分离，代码结构更加清晰，责任更加明确同时实现自动化，数据变化，页面随之变化，无需写代码
mvvm是将数据模型双向绑定的思想作为核心
Vue组件
概述：组件（component）是Vue.js最强大的功能之一
组件可以扩展HTML元素，封装科重用的代码
组件系统让我们可以独立可复用的小组件来构建大型应用，几乎任意类型的应用界面都可以抽象为一个组件树
使用：Vue.component(tagName.options)
tagName为组件名.options为配置选项
调用：当然也可以注册一个局部组件
Vue.js中的ajax
1、Vue中封装了ajax并且增强了他，在异步并发处理优于原生的ajax，称为axios
2、使用步骤：要使用一个单独的js文件，注意导入顺序

构建vue项目
Vue的生命周期 lifecyle
1、生命周期函数：vue在某一个时间点会自动执行这些函数
2、生命周期钩子函数不允许写成箭头函数，可以分为3个阶段，一共8个钩子：初始化阶段（创建前后，载入前后），运行中（更新前后）销毁（销毁前后）

npm概念：（是世界上最大的软件注册表）
nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）
官网：
https://docs.npmjs.com/about-npm 英文官网
https://www.npmjs.cn/ 中文官网
webpack概念：
webpack是前端自动化构建工具，他是基于nodejs实现，可以帮助我们实现资源的合并、打包、压缩、混淆的诸多功能
官网：
https://webpack.js.org/
vue-cli脚手架
作用：vue脚手架指的是vue-cli，他是一个专门为单页面应用快速搭建繁杂的脚手架，他可以轻松的创建新的应用程序而且可以自动vue和webpack的项目模板
安装nodejs：直接下一步下一步，直接利用dos命令提示符下执行：node-v
配置npm：nodejs下的包管理器，nodejs中包含了npm，无需单独的安装，默认去官网下载资源，也可以换成国内的镜像
npm config get registry # 查看当前配置的镜像，结果是默认的国外网址https://registry.npmjs.org/
npm config set registry https://registry.npm.taobao.org #设置成淘宝镜像
npm config get registry #再获取查看,结果是修改后的https://registry.npm.taobao.org/
参数说明：
-i 安装指令，全拼： install
-S 生产环境，全拼： --save
-D 开发环境，全拼： --save—dev
-O 可选依赖，全拼： --save—optional
-E 精确安装指定模块版本，全称：–save—exact
-g 全局安装，全拼： --global

脚手架的安装
npm install vue-cli -g #安装vue-cli脚手架—可能比较慢,要等几分钟
npm uninstall vue-cli -g #卸载vue-cli脚手架 — 大可不必
vue –V #查看版本
where vue #vue安装在哪里

创建Vue项目npm
1、工作空间：利用dos窗口查看vue安装路径
2、生成vue项目
注意jt01是项目的名称
生产项目webpack模板，目录100+m
会自动生成node_modules临时目录，可以删除每次编译运行会自动产生
启动项目&停止
cd jt01 # 进入项目目录
npm run dev # 自动启动服务，ctrl+c 停止,可能要等几分钟
测试访问：在启动玩项目过后就会给一个访问网址，可以通过该网址网址访问
HBuilderX管理Vue项目
打开Vue项目：D:\workspace\vue\jt01目录（可自行定义自己的目录）
项目结构
1、view就是用户要访问的页面都存放在这个目录下，如index.vue
2、static中保存一些静态资源。如jQuery、css、图片等
3、src目录是一个很大的目录，保罗万像
4、components把项目中所需要的组件都放在这个目录下，默认会创建一个HelloWorld.vue
5、router访问路径、vue提倡spa单页面设计
Vue项目的常见操作：1、在components里写自定义组件2、在App.vue里注册自定义的组件3、在main.js里引入第三方的js
 index.html 首页，Vue是SPA单页面开发，页面入口，定义了一个div,并设置id=app
 src/main.js 公共的组件就直接配置到这个文件中，私有的就配置到view中
 src/App.vue 根组件,可以添加自定义组件
 src/router/index.js 引入子组件HellWorld.vue

项目的加载过程：
index.html->main.js->App.vue->index.js->HelloWorld.vue
自定义组件：
概述：组件是Vue.js最强大的功能
组件可以扩展HTML元素，封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用界面都可以抽象为一个组件树
过程：在components里面添加自定义组件后然后再router注册组件
测试：例如：\workspace\vue\cgbtest01\cgbtest>npm run dev
loclhost://8080
安装element-ui
访问官网: https://element.eleme.cn/#/zh-CN/component/installation,查看组件指南
安装:npm i element-ui –D # 下载资料,这可能要等几分钟 安装完成后保存在项目下的mode_modules下
修改main.js引入element：参考官网
基础知识：
布局 layout
栅格体系：把页面分成24分栏，可以形成pc端、移动端自适应
2.使用ele的栅格,默认24列,可以自适应屏幕的宽度
el-row表示行,el-col表示列 ,:span合并列数
图标：icon：通过官网里面可以获取源码
按钮 button：通过官网可以获取源码
输入框 input：通过官网可以获取源码
表格 table：通过官网可以获取源码
表单 form：通过官网可以获取源码