文章目录
第一章 web前端
一、组成部分
1、HTML:负责网页的结构(页面元素和内容)
2、CSS:负责网页的表现 (页面元素的外观、位置等页面样式,如:颜色、大小等)
3、JavaScript:负责网页的行为(交互效果)。
二、HTML超文本标记语言
1、表单标签
(1)表单标签:
<form>
(2)表单属性:
①action:表单提交的url,往何处提交数据 . 如果不指定,默认提交到当前页面
②method:表单单提交方式
get: 在url后面拼接表单数据,比如: ?username=Tom&age=12 ,url长度有限制 ·默认值
post: 在消息体(请求体) 中传递的,参数大小无限制的。
三、JavaScript
3.1 JS基本语法
1、书写语法
(1) 区分大小写:与Java 一样,变量名、函数名以及其他一切东西都是区分大小写的
(2) 每行结尾的分号可有可无
2、JS引入方式
(1) 内部脚本:将JS代码定义在HTML页面中
① JavaScript代码必须位于< script >< /script >标签之间
② 在HTML文档中,可以在任意地方,放置任意数量的< script >
③ 一般会把脚本置于< body >元素的底部,可改善显示速度
<script>
alert(“Hello JavaScript”)
</script>
(2) 外部脚本:将JS代码定义在外部JS文件中,然后引入到HTML页面中
① 外部JS文件中,只包含JS代码,不包含< script >标签
② < script >标签不能自闭合
<script src=“js/demo.js”></script>
3、数据类型
JavaScript数据类型分为原始类型和引用类型
4、类型转换
(1) 字符串类型转为数字:将字符串字面值转为数字。 如果字面值不是数字,则转为NaN。
(2) 其他类型转为boolean:
① Number:0和NaN为false,其他均转为true。
② String:空字符串为false,其他均转为true。
③ Null和 undefined:均为false
5、运算符
//==会进行类型转换,===不会进行类型转换
var a = 10
alert(a == "10"); //true
alert(a ==="10"); //false
alert(a === 10); //true
6、变量
(1) JavaScript 中用 var 关键字来声明变量。
var a = 20;
a = "张三 ";
(2) JavaScript 是一门弱类型语言,变量可以存放不同类型的值
(3) 变量名需要遵循如下规则
① 组成字符可以是任何字母、数字、下划线()或美元符号(S)
② 数字不能开头
③ 建议使用驼峰命名
(4) 变量的特点
① 作用域较大,是全局变量
② 可以重复定义
(5) ECMAScript 6 新增了let 关键字来定义变量。它的用法类似于 var,但是所声明的变量,只在 let 关键字所在的代码块内有效,且不允许重复声明。
(6) ECMAScript6 新增了 const 关键字,用来声明一个只读的常量。一旦声明,常量的值就不能改变
3.2 JS函数
1、定义:函数(方法)是被设计为执行特定任务的代码块
2、语法
(1) JavaScript是弱类型语言,所以形式参数不需要类型
(2) 返回值也不需要定义类型,可以在函数内部直接使用return返回即可
//定义方式一
function functionName(参数1,参数2..){
//要执行的代码
}
//定义方式二
val functionName = function(参数1,参数2..){
//要执行的代码
}
3.3 JS对象
3.3.1 Array
1、定义:JavaScript中Array对象用于定义数组
2、语法
//定义方式一:var 变量名 = new Array(元素列表);
var arr = new Array(1,2,3,4);
//定义方式二:var 变量名 = [元素列表];
var arr = [1,2,3,4];
3、特点:长度可变,类型可变
4、Array的常用方法
var arr = [1,2,3,4];
arr.forEach(function(e){
console.log(e);
})
//ES6 箭头函数
arr.forEach((e) => {
console.log(e);
})
3.3.2 String
1、语法
//定义方式一:var 变量名 = new String("...");
var str = new String("Hello String");
}
//定义方式二:var 变量名 = "...";
var str = "Hello String";
}
2、String的常用方法
3.3.2 JSON
1、定义:JSON是JavaScript对象标记法,通过javaScript 对象标记法书写的文本。
2、JavaScript自定义对象
//定义格式
var 对象名 = {
属性名1: 属性值1,
属性名2: 属性值2,
属性名3: 属性值3,
函数名称: function(参数1,参数2..){}
函数名称(参数1,参数2..){}
};
//调用格式
对象名.属性名;
对象名:函数名();
3、JSON的作用:由于其语法简单,层次结构鲜明,现多用于作为数据载体,在网络中进行数据传输。
4、语法
value的数据类型为:数字(整数或浮点数)、字符串(在双引号中)、逻辑值 (true 或false)、数组(在方括号中)、对象(在花括号中)和null。
//定义:var 变量名 = '{"key1":value1,"key2":value2}';
var useStr = '{"name":"Joey","age":18,"addr":["北京","西安"]}';
//JSON字符串转为JS对象
var jsObject = JSON.parse(userStr);
//JS对象转为JSON字符串
var jsonStr = JSON.stringify(jsObject);
3.3.3 BOM
1、定义:BOM浏览器对象模型,允许JavaScript与浏览器对话,javaScript将浏览器的各个组成部分封装为对象。
2、组成
(1) Window: 浏览器窗口对象
(2) Navigator:浏览器对象
(3) Screen:屏幕对象
(4) History:历史记录对象
(5) Location:地址栏对象
3、Window浏览器窗口对象
(1) 获取:直接使用window,其中 window.可以省略。
window.alert("Hello window");
alert("Hello window");
(2) 属性
history:对 History 对象的只读引用。
location:用于窗口或框架的 Location 对象。
navigator:对 Navigator 对象的只读引用。
(3) 方法
① alert(): 显示带有一段消息和一个确认按钮的警告框
② confirm():显示带有一段消息以及确认按钮和取消按钮的对话框,会返回结果
③ setlnterval():按照指定的周期 (以毫秒计)来调用函数或计算表达式
④ setTimeout(): 在指定的毫秒数后调用函数或计算表达式
//confirm()-对话框--确认:true,取消:false
var flag = confirm("您确认删除该记录吗?");
alert(flag);
//定时器:setlnterval-周期性的执行某一个函数
setlnterval(function(){
i++;
console.log("定时器执行了"+i);
},2000);
//定时器:setTimeout-延迟指定时间执行一次
setTimeout(function(){
alert("JS");
},2000);
4、Location地址栏对象
(1) 获取:使用 window.location 获取,其中 window.可以省略。
window.location.属性;
location.属性;
location.href= "https://www.itcast.cn";
(2) 属性
href:设置或返回完整的UPL
3.3.4 DOM
1、定义:Document Object Model,文档对象模型。将标记语言的各个组成部分封装为对应的对象。
2、分类
(1) core DOM——所有文档类型的标准模型
① Document:整个文档对象
② Element:元素对象
③ Attribute: 属性对象
④ Text:文本对象
⑤ Comment:注释对象
(2) XML DOM-XML文档的标准模型
(3) HTML DOM-HTML文档的标准模型
① lmage: < img >
② Button : < input type=‘button’>
3、获取:HTML中的Element对象可以通过Document对象获取,而Document对象是通过window对象获取的。
(1) 根据id属性值获取,返回单个元素对象
var h1 = document.getElementById('h1');
(2) 根据标签名称获取,返回Element对象数组
var divs = document.getElementsByTagName('div');
(3) 根据name名称获取,返回Element对象数组
var divs = document.getElementsByName('div');
(4) 根据class名称获取,返回Element对象数组
var divs = document.getElementsByClassName('div');
3.3.4 DOM
四、Vue
1、定义:Vue 是一套前端框架免除原生]avaScript中的DOM操作,简化书写。基于MVVM思想,实现数据的双向绑定,将编程的关注点放在数据上。
2、语法
(1) 新建HTML页面,引入Vue.js文件
<script src="js/vue.js"></script>
(2) 在JS代码区域,创建Vue核心对象,定义数据模型
<script>
//插值表达性 形式:{{表达式}} 内容可以是变量、三元运算符、函数调用和算术运算
new Vue({
el:"#app",
data:{
message:"Hello Vue!"
}
})
</script>
(3) 编写视图
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
3、Vue常用指令
(1) 定义:HTML标签上带有 V- 前缀的特殊属性,不同指令具有不同含义
(2) 常用指令
<div id="app">
//v-bind
<a v-bind:href="url">传智教育</a>
<a :href="url">传智教育</a>
//v-on
<input type="button" value="按钮" v-on:clink="handle()">
<input type="button" value="按钮" @clink="handle()">
//v-if
年龄<input type="text" v-model="age">经判定,为:
<span v-if="age<=35">年轻人</span>
<span v-else-if="age>35&&age<60">中年人</span>
<span v-else>老年人</span>
//v-show
<span v-show="age<=35">年轻人</span>
//v-for:遍历addrs
<div v-for="(addr,index) in addrs">{{index}}:{{addr}}</div>
<div v-for="addr in addrs">{{addr}}</div>
</div>
<script>
new Vue({
el:"#app",
data:{
href:"https://www.baidu.com"
age:20
addrs:["北京","上海","天津","杭州"]
},
//生命周期挂载完成提示
mounted(){
console.log("Vue挂载完成,发送请求获取数据");
},
methods:{
handle:function(){
alert("我被点击了");
}
},
})
</script>
4、Vue生命周期
(1) 定义:生命周期 指一个对象从创建到销毁的整个过程。Vue生命周期有八个阶段: 每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)。
五、Axios
1、定义:Ajax是异步的JavaScript和XML。Axios对原生的Ajax进行封装,简化书写,快速开发。
2、Ajax的作用:
(1) 数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据
(2) 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等。
3、语法
(1) 新建HTML页面,引入Axios的js文件
<script src="js/axios-0.18.0.js"></script>
(2) 使用Axios发送请求,并获取响应结果。其中method代表请求方式,url代表请求路径,result代表返回结果
<script>
function get(){
//通过axios发送异步请求-get
//写法一
axios({
method:"get",
url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"
}).then(result => {
console.log(result.data);
})
//写法二
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
console.log(result.data);
})
}
function post(){
//通过axios发送异步请求-post
//写法一
axios({
method:"get",
url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
data:"id=1"
}).then(result => {
console.log(result.data);
})
//写法二
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
console.log(result.data);
})
}
</script>
4、vue项目中使用Axios
(1) 在项目目录下安装axios
axios:npm install axios
(2) 需要使用axios时,导入axios
import axios from 'axios';
六、前端工程化
1、环境准备:vue-cli,依赖环境NodeJS
2、Vue项目创建
(1) 命令行
vue create vue-project
(2) 图形化界面
vue ui
3、Vue组件文件:以.vue结尾,每个组件由三部分组成:< template >< script >< style >
(1) < template >:模板部分,用于生成HTML代码
(2) < script >:JS代码控制模板的数据来源和行为
(3) < style >:CSS样式部分
<template>
<div id="app">
<h1>{{message}}</h1>
</div>
</template>
<script>
export default{
//数据模型
data(){
return{
message:"hello vue"
}
},
//方法
methods:{
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
4、Vue路由——Vue Router
(1) 组成
① VueRouter:路由器类,根据路由请求在路由视图中动态渲染选中的组件
② < router-link >:请求链接组件,浏览器会解析成
③ < router-view >:动态视图组件,用来渲染展示与路由路径对应的组件
(2) 安装
npm install vue-router@3.5.1
(3) 定义路由
src/router/index.js
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue')
}
]
5、Element
(1) 定义:Element是为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库。例如超链接、按钮、图片、表格、表单、分页条等等。
(2) 官网:https://element.eleme.cn/#/zh-CNListener