第二阶段复习

https://blog.csdn.net/u012932876?type=blog

HTML

–1,概述

全称是超文本标记语言
超文本:可以向网页中插入的元素类型丰富(图片,视频,音频,文字…)
标记: HTML提供了各种标记表示是不同类型的元素img video
语法: 由很多的标签组成的, 标签要一对的写要写开始标签和结束标签.

• HTML超文本标记语言实现页面展现，形成静态网页

• CSS层叠样式表实现页面美化

• JS javascript脚本语言实现页面前端和后端的数据交互，形成动态网页

• React facebook出品前端、移动端JavaScript框架

• HTML属性

HTML标签都可以具有属性，属性包括属性名和属性值，如果有多个属性，要以空格隔开。属性的值要用单引号或者双引号引起来。

标签

1，标题标签 <h></h> 
2，列表标签 在网页中添加列表内容
<ul> <li></li></ul>无序列表
<ol> <li></li></ol>有序列表
3.图片标签:在网页中插入图片<img>
src是img标签的属性,用来指定图片的路径
width是img标签的属性,用来指定图片的宽度,单位是px像素
height是img标签的属性,用来指定图片的高度,单位是px像素
4.超链接标签:给元素添加链接效果 <a></a>
href属性用来指定跳转目标
target属性用来指定网页的打开方式.默认是_self用当前窗口打开,_blank用新窗口
锚定 ：头部name="top"； herf指定
5.输入框标签
普通的输入框: <input type="text" />
			密码输入框: <input type="password" />
			数字输入框: <input type="number" />
			年月日输入框: <input type="date" />
			周输入框: <input type="week" />
            邮箱   <inout type="email">
按钮: 
				<input type="button" value="保存"/>
				<button>登录</button>
提交按钮:把前端页面输入的数据提交给后端java程序处理
				<input type="submit" value="注册"/>
				<button type="submit">提交</button>
			单选:<input type="radio" />男
			多选:<input type="checkbox"/>杨幂
			下拉框 <select><option></option></select>
            文本域          <textarea></textarea>

6表格标签 
table 表格 tr 行 td列
border属性用来设置表格的边框宽度,bordercolor边框的颜色
			width属性用来设置表格的宽度,bgcolor属性用来设置表格的背景色
			cellspacing属性用来设置表格里单元格的间距
			单元格的合并:行合并rowspan/列合并colspan
th 加粗
表单 <form></form>
<!-- 添加音频 -->
		<audio controls="controls"> 
			<source src="jay.mp3"></source>
		</audio>
		<!-- 添加视频 -->
		<video controls="controls">
			<source src="b.mp4"></source>
		</video>
<div></div>行标签 换行
<p></p>换行 ，行间隔一行
<span><span>不换行

    form标签专门用来提交数据:必须使用form标签 + 必须有submit按钮 + 必须配置name属性
        地址栏: http://127.0.0.1:8848/cgb2108/test3.html?user=jack
        ?用来拼接用户输入的数据,user=jack,其中user是给标签配置的name属性的值,jack是用户从浏览器上输入数据
       

        面试题:提价数据的两种方式: get方式 和  post方式

        get方式:被拼接在地址栏,方便看,坏处是不安全,长度受限--不推荐
        post方式:不方便看,好处是安全--推荐!!!
        method属性用来指定数据的提交方式,默认是get
        action属性用来指定数据将要交给哪个程序处理
二,CSS
–1,概述
全称是

层叠样式表 stylesheet ,作用是用来修饰HTML网页.
语法: 选择器{ 属性名:属性值 ; 属性名:属性值 ; 样式3…}
学习重点: 选择器 + 各种属性
位置:
1, 行内CSS:只作用在当前行, 给当前元素使用style属性来修饰样式
html <h1 style="text-align:center;">我是h1</h1>
2, 内部CSS: 在HTML代码里使用style标签,包裹着CSS代码.提高了CSS代码的复用性
3, 外部CSS: 把HTML代码和CSS代码分离,在HTML中引入CSS文件

<link rel="stylesheet" href="1.css"/>

<style>
选择器{样式}
</style>

 选择器样式

1.标签名选择器:根据标签的名字选中

2.class选择器:根据class属性的值选中元素,class的值能相同 步骤:给元素加class属性+通过.获取元素

3.id选择器:根据id属性的值选中元素,要求id的值不能相同 步骤:给元素添加id属性 + 通过#获取值

1.分组选择器:把多种选择器的结果,组成一组进行修饰,逗号隔开

2.属性选择器:按照标签的属性来选择元素,标签名[属性名]

盒子模型
–1,概述
CSS认为HTML里的每个元素都是一个盒子.
外边距margin: 盒子间的距离,可以设置左边距,右,上,下
边框border: 盒子的边框,可以设置宽度/颜色/样式
内边距padding: 盒子里的内容和盒子的边框的距离,可以设置左边距,右,上,下
内容: 可以设置 width 和 height
JS
–1,概述
全称是javascript,是java脚本语言.用来增强网页的交互性.
JS是基于对象和事件驱动的脚本语言
基于对象: js和java一样,可以创建对象并使用对象.
事件驱动: js代码必须想办法触发才会执行,常见事件: 单击/双击/鼠标划入划出…
脚本语言: js的运行必须在浏览器里
JS特点: 直译式,弱类型的语言. 跨平台(浏览器),一定的安全性
 

内部js

<script>
alert()
</script>
onclick 单击
ondbclick 双击

基本数据类型

包括:number/string/boolean/null/undefined

(1) 数值类型-number

在JS中，数值类型只有一种，就是浮点型。

在JS中，需要时会自动的进行数据类型的转换，比如：在显示和处理的时候，浮点型和整型会自动的转换。

Infinity ： 正无穷大

-Infinity ： 负无穷大

NaN : Not a Number 非数字， 和任何值都不相等，包括它本身

 (2) 字符串类型-string

var s ="hello " /'hello'

 (3) 布尔类型-boolean

(4) undefined

值只有一个就是undefined。表示变量没有初始化值。

JS的变量

js是弱类型语言，所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。

javascript没有类似采用静态语言类型，如java的变量类型是编译期就确定的；而它采用了动态类型，也就是说在编译期类型不确定，运行时会动态根据变量的赋值来决定它的类型，

typeof运算符: 用于返回变量或者表达式 的数据类型

js数组

1，var  a = new array();

2. var b = new array(1,2,3);

3,var c =[];

c=[1,2,3]

js数组注意的细节

1，可以存放任意的数据类型

2，长度可变,

js 函数创建方式

方式一：

声明：function 函数名称([参数列表]){ 函数体 }

调用: 函数名称([参数列表]);

方式二：

声明：var 函数名称 = function([参数列表]){ 函数体 }

调用: 函数名称([参数列表]);

js对象的创建

利用function关键字声明对象，用new关键字创建对象。

自定义对象
(1)方式一：

声明对象：function Person(){}
创建对象：var p1 = new Person();
设置属性：p1.name = "张飞"; p1.age = 18;
设置方法：p1.run = function(){ alert(this.name+" : "+this.age); }
访问p1对象：
p1.run();

方式二：

var p ={

"属性名": 属性，

“方法名”: function（）{}

}

dom树

DOM 是一项 W3C (World Wide Web Consortium) 标准，DOM（Document Object Model）文档对象模型为JS操作html文档所提供的一套API，通过这套API可以很方便的对html元素进行访问及增删改查操作。

--获取对象: window.document
--调用方法: 
        getElementById("元素的id的属性的值")--返回1个元素
        getElementsByName("元素的name属性的值")--返回多个元素(用数组)
        getElementsByClassName("元素的class属性的值")--返回多个元素(用数组)
        getElementsByTagName("元素的标签名的值")--返回多个元素(用数组)
write()--向文档写 HTML 表达式 或 JavaScript 代码
title--返回网页的标题
id--设置或返回元素的id
innerHTML--设置或返回元素的内容

json--轻量级数据交换格式

json 数据

var a =' "name": "lihjua"'

json 对象

var b = '{}'

json 数组

var c ='[{},{}]'

json转换工具 

给服务器发送数据: 将JS对象转成JSON字符串     JSON.stringify(Js对象)
接受服务器的数据: JSON字符串转成JS对象        JSON.parse("json字符串")

ajax --异步更新网页

vue 的优点

1，一个轻量级的mvvm框架，双向绑定，数据动态更新

2.是一个渐进式框架，其核心思想是数据驱动、组件化的前端开发

3.屏蔽复杂的dom 的ipi

操作

1.引入vue.js文件,src指定js文件的位置(先找到和自己同级的资源)
<script src="vue/vue.js"></script>
<!-- 2.准备数据渲染区:是指在指定位置展示vue提供的数据
{{ }} 插值表达式,{{msg}}获取vue提供的msg的值
<div id="app"> {{msg}} </div>
<!-- 3.创建Vue对象,使用vue准备数据,让第二步获取数据 -->
<script>
            new Vue({
              el属性是:挂载点,即将把数据展示在指定位置(css选择器)
                el:"#app" , //id选择器,用#获取id的值
                //data属性是:用来准备数据
                data（）{ //js对象
          return{ msg:'hello vue~~~'}   
                     }
            method:{
            //函数名:函数定义
               show:function(){ console.log("show()调用成功") } ,
}   })
        </script>

 vue指令

通过指令v-model，实现双向绑定，修改一方同时修改相同的另一方，达到数据同时更新

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
		…
		</div>
	</body>
</html>

 什么时候用 v-if ，什么时候用v-show?

v-show靠页面的样式进行控制，未显示但内容已在页面上，而v-if内容是不在的

v-if判断是否加载，可以减轻服务器的压力，但在需要时加载有更高的切换开销；v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
 v-if  判断是否在这里展现

<!-- 数组的遍历:类似于java里的foreach循环,o表示每次获取到的数据 -->
			<p v-for="o in hobby">{{o}}</p>
			<!-- o是数据,i是下标 -->
			<p v-for="o,i in hobby">下标是:{{i}}---数据是:{{o}}</p>
			<p v-for="(o,i) in hobby">下标是:{{i}}---数据是:{{o}}</p>

v-on 事件的点击

	<p>{{count}}</p>
			<button @click="count++">点我</button>
			
			<button onclick="show()">javascript 点我</button>
			<button v-on:click="show()">v-on:click 点我</button>
			<button @click="show()">简写的事件,点我</button>

绑定 v-bind

当属性的值是变量而不是字符串时，通过v-bind进行标识，vue会自动处理

• 全称: v-bind:href
• 简称： :href 冒号开头就说明后面跟的是变量

<div id="app">
			<a href="http://act.codeboy.com">java培优</a>
			<a v-bind:href="url" target="_blank">{{urlname}}</a>
			<a :href="url" target="_blank">{{urlname}}</a>

 VUE组件

全局组件语法: Vue.component(1,2)–1是标签名/组件名2是配置选项
局部组件语法:给Vue对象添加components属性

两种组件的区别??

全局组件:可以在所有的数据渲染区使用,而且是先定义再new Vue() 局部组件:是在Vue对象里使用components来定义的,只能在当前对象的数据渲染区来使用

	//1,创建全局组件
			//给vue添加组件(组件名称,组件的模板)
			Vue.component('car',{
				// 通过template,描述car组件的功能
				template:'<h3>hello Component</h3>'
			})

Axios技术

优点： 局部刷新，异步访问

axios.get(访问资源的url).then( a => { 处理a的方式,a代表了服务器给浏览器返回来的数据 }  )

四,Vue路由

–1,概述

接受浏览器的请求,根据不同的请求的方式,找到匹配的组件
工具类:
1,VueRouter表示Vue的路由对象.
2,routes属性是VueRouter的核心属性,用来把不同的请求匹配的不同的组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue路由</title>
		<!-- 1.引入js文件 -->
		<script src="vue/vue.js"></script>
		<script src="vue/vue-router.js"></script>
	</head>
	<body>
		<!-- 2.准备数据渲染区 -->
		<div id="app">
			<!-- 3.4.使用路由 ,router-link被HTML翻译成了a标签,to翻译成href属性-->
			<router-link to="/home">1</router-link>
			<router-link to="/help">2</router-link>
			<!-- 3.5.展示匹配成功的组件,路由的出口 -->
			<router-view></router-view>
		</div>
		<!-- 3.准备路由功能 -->
		<script>
			//3.3. 创建组件
			let home = {
				template:"<h1>我是主页~~</h1>"
			}
			let help = {
				template:"<h1>我是帮助页~~</h1>"
			}
			//3.2.创建路由对象VueRouter,通过routes属性指定请求和组件的匹配关系
			let router = new VueRouter({
				routes:[
					//path请求路径,component匹配到的组件
					{path:'/home',component:home},
					{path:'/help',component:help}
				]
			})			
			//3.1.通过router属性指定路由功能
			new Vue({
				el:"#app",
				//router:router
				router //key和value一样的话就可以直接简写
			})
		</script>
	</body>
</html>