1.JavaScript

1.1window对象中常用的属性

• location:位置
• location.href; 获取或修改浏览器的请求地址
• location.reload(); 刷新
• history:历史
• history.length; 得到历史页面数量
• history.back() 返回上一页面
• history.forward() 前往下一页面

1.2DOM文档对象模型

• 包含和页面相关内容

1. 通过选择器选择页面中的元素对象let 元素对象 = document.querySelector("选择器");
2. 获取或修改元素的文本内容 <标签名>文本内容</标签名>元素对象.innerText; //获取元素象.innerText = "xxxx"; //修改
3. 获取或修改控件的值元素对象.value; //获取元素对象.value = "xxxx"; //修改
4. 创建元素对象let 变量 = document.createElement("标签名");
5. 把元素对象添加到某个元素里面父元素.append(新元素);
6. 获取body元素对象的方式document.body

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text">
		<input type="button" value="哥哥" onclick="f(1)">
		<input type="button" value="妹妹" onclick="f(2)">
	</body>
	<script type="text/javascript">
		function f(num){
			let count = document.querySelector("input").value;
			for (let b = 0 ; b < count ;b++) {
				let i = document.createElement("img");
				i.src = num==1?"a.png":"q.jpg";
				document.body.append(i);
			}
		}
		
	</script>
</html>

1.2.1员工列表练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>员工列表练习</title>
	</head>
	<body>
		<input type="text" id="i1" placeholder="员工姓名">
		<input type="text" id="i2" placeholder="工资">
		<input type="text" id="i3" placeholder="工作">
		<input type="button" value="添加" onclick="f()">
		<table border="1">
			<caption>员工列表</caption>
			<tr>
				<th>姓名</th>
				<th>工资</th>
				<th>工作</th>
			</tr>
		</table>
	</body>
	<script type="text/javascript">
		
		function f(){
			//创建tr和td
			let tr = document.createElement("tr");
			let nameTd = document.createElement("td");
			let moneyTd = document.createElement("td");
			let pathTd = document.createElement("td");
			//将获取到的文本框的内容添加到td里面
			nameTd.innerText = i1.value;
			moneyTd.innerText = i2.value;
			pathTd.innerText = i3.value;
			//把td装进tr
			tr.append(nameTd,moneyTd,pathTd);
			//先得到table，然后把tr装进table
			let table = document.querySelector("table");
			table.append(tr);
		}
	</script>
</html>

1.2.2自定义对象练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//创建一个员工对象
		let emp = {
			name:"张三",
			salay:5000,
			job:"销售"
		};
		console.log(emp.name)
		console.log(emp.salay)
		console.log(emp.job)
		//封装几个商品的信息
		let arr = [
			{title:"苹果手机",price:3000,num:50},
			{title:"小米手机",price:5000,num:150},
			{title:"华为手机",price:8000,num:500}
		]
		for (let s of arr) {
			let p = document.createElement("p");
			p.innerText = "商品名称:"+s.title+" 价格:"+s.price+" 库存:"+s.num;
			document.body.append(p);
		}
	</script>
</html>

1.2.3个人详情练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1">
			<tr>
				<td>照片：</td>
				<td><img src="" alt="" width="100"></td>
			</tr>
			<tr>
				<td>姓名：</td>
				<td id="name_td"></td>
			</tr>
			<tr>
				<td>年龄：</td>
				<td id="age_td"></td>
			</tr>
			<tr>
				<td>好友</td>
				<td>
					<ul id="friend_ul"></ul>
				</td>
			</tr>
		</table>
		<input type="button" value="请求数据" onclick="f()">
	</body>
	<script type="text/javascript">
		function f(){
			let user = {
				img:"q.jpg",
				name:"坂田银时",
				age:25,
				friends:["冲田总司","眼睛男","神乐","蛋黄酱王子"]
			}
			let img_td = document.querySelector("img");
			img_td.src = user.img;
			name_td.innerText = user.name;
			age_td.innerText = user.age;
			//遍历好友数组
			for (let name of user.friends) {
				let li = document.createElement("li");
				li.innerText = name;
				friend_ul.append(li);
			}
		}
	</script>
</html>

1.3前端MVC设计模式

• MVC设计模式就是将实现一个前端业务的代码划分了三部分.
• M: Model 模型, 指数据模型 前端的数据一般都来自于服务器
• V: View 视图, 指页面相关代码
• C: Controller 控制器, 指将数据展示到页面中的过程代码
• 前端MVC设计模式存在的弊端: 在Controller控制器部分的代码需要频繁的进行DOM操作(遍历查找页面元素的过程), 会导致执行效率降低, MVVM设计模式可以解决此问题.

1.4前端MVVM设计模式

• M: Model 模型, 指数据模型 前端的数据一般都来自于服务器
• V: View 视图, 指页面相关代码
• VM: ViewModel 视图模型, 负责将页面中可能发生改变的元素和数据进行绑定,并且会一直监听数据的改变,当数据发生改变时从内存中找到和数据对应的元素 然后再进行改动,避免了频繁DOM操作带来的资源浪费,从而提高了执行效率

2.VUE

• 目前最流行的前端框架, 此框架基于MVVM设计模式.
• 在第三阶段所涉及到的VUE是通过在html页面中引入vue.js的方式去使用此框架, 第四个阶段会接触脚手架方式
• 在html页面中引入vue.js文件, 此文件可以通过CDN服务器引入到自己的页面中, 也可以将CDN服务器的js文件下载到本地再引入

• Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
• unpkg：https://unpkg.com/vue@2.6.14/dist/vue.min.js
• cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
• VUE对象的工作原理, VUE对象相当于是MVVM设计模式中的VM(视图模型), 负责将可能发生改变的页面元素和数据变量在内存中进行绑定, 并且不断监视这数据变量的改变,当值发生改变的时候会从内存中找到对应的页面元素,并将其改变.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<h1>{{info}}</h1>
		</div>
	</body>
	<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script type="text/javascript">
		let v = new Vue({
			el:"body>div",//设置vue框架管理的元素
			data:{//声明和页面元素进行绑定的数据
				info:"helloVue"
			}
		})
	</script>
</html>

2.1VUE相关指令

1. {{变量}}: 插值, 让此处的文本内容和变量进行绑定
2. v-text: 让某个元素的文本内容和变量进行绑定
3. v-html: 让某个元素的文本或标签内容和变量进行绑定
4. v-bind:属性名=变量, 让元素的某个属性的值和变量进行绑定 , v-bind可以省略
5. v-model=变量, 双向绑定: 变量会影响页面, 页面也会影响变量
6. v-on:事件名="方法", 事件绑定, 事件触发的方法需要写在methods里面, 简写: @事件名="方法"
7. v-for="变量 in 数组"; 循环遍历, 遍历的过程中会生成当前元素以及子元素.

2.1.1文本相关指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<!-- 插值指令：让此处的文本内容和变量进行绑定 -->
			<b>{{info}}</b>
			<h2>{{info}}</h2>
			<!-- v-text:让元素的文本内容和变量进行绑定 -->
			<h2 v-text="info"></h2>
			<p v-text="info"></p>
			<!-- v-html:让元素的标签或文本内容和变量进行绑定 -->
			<p v-html="info"></p>
			
		</div>
		<!-- 引入vue框架文件 -->
		<script src="vue.min.js"></script>
	</body>
	<script type="text/javascript">
		let v = new Vue({
			el:"body>div",
			data:{
				info:"测试<b>本地</b>引入"
			}
		})
	</script>
</html>

2.1.2属性绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<!-- 属性绑定的简写 -->
			<a :href="url">超链接</a>
			<!-- 这个是属性绑定的复杂写法，这种写法如果没有安装vue插件会报错 alt+回车解决 -->
			<a v-bind:href="url">超链接</a>
			<!-- 图片显示 -->
			<img :src="imgName" alt="">
			<!-- 文本框 -->
			<input type="text" :value="info">
		</div>
		<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script type="text/javascript">
		let v = new Vue({
			el:"body>div",
			data:{
				url:"http://www.baidu.com",
				imgName:"a.png",
				info:"这是文本"
			}
		})
		</script>
	</body>
</html>

2.1.3双向绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		
		<div>
			<!-- v-model双向绑定，变量会影响页面的改变，页面也会影响变量 -->
			<input type="text" v-model="msg">
			{{msg}}
			<h1>注册页面</h1>
			用户名：<input type="text" placeholder="请输入用户名" v-model="user.username"><br>
			密码：<input type="password" placeholder="请输入密码" v-model="user.password">
		</div>
		
		
		
		
		<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script type="text/javascript">
		let v = new Vue({
			el:"body>div",
			data:{
				msg:"双向绑定测试",
				user:{
					username:"",
					password:""
				}
			}
		})
		
		</script>
	</body>
</html>

2.1.4事件绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<input type="text" v-model="ind">
			<!--  事件绑定简写 -->
			<input type="button" value="事件绑定" @click="f()">
			<!-- 事件绑定复杂写法 -->
			<input type="button" value="事件绑定" v-on:click="f()">
		</div>
	</body>
	<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script type="text/javascript">
	let v = new Vue({
		el:"body>div",
		data:{
			ind:""
		},
		methods:{
			f(){
				alert(v.ind)
			}
		}
	})
	</script>
</html>

2.1.5猜数字Vue版本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<input type="text" placeholder="请输入1-100之间的整数" v-model="num">
			<input type="button" value="猜一猜" @click="f()">
			<div>{{info}}</div>
		</div>
	</body>
	<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script type="text/javascript">
	let v = new Vue({
		el:"body>div",
		data:{
			number:parseInt(Math.random()*100)+1,
			num:0,
			info:"",
			count:0
		},
		methods:{
			f(){
				console.log(v.number);
				v.count++;
				if(isNaN(v.num)){
					v.info = "数据类型不匹配";
					return;
				}
				if(v.num==v.number){
					v.info = "猜对了一共猜了"+v.count+"次";
				}else if(v.num>v.number){
					v.info = "猜大了";
				}else{
					v.info = "猜小了";
				}
			}
		}
	})
	</script>
</html>

2.1.6计算器Vue版本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<input type="text" v-model="num1">
			<input type="text" v-model="num2">
			<input type="button" value="加" @click="f(1)">
			<input type="button" value="减" @click="f(2)">
			<input type="button" value="乘" @click="f(3)">
			<input type="button" value="除" @click="f(4)">
			<div>{{info}}</div>
		</div>
	</body>
	<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script type="text/javascript">
	let v = new Vue({
		el:"body>div",
		data:{
			num1:0,
			num2:0,
			info:""
		},
		methods:{
			f(index){
				if(isNaN(v.num1)||isNaN(v.num2)){
					v.info = "输入的数据类型有误";
					return;
				}
				switch(index){
					case 1:
						v.info = v.num1*1+v.num2*1;
					break;
					case 2:
						v.info = v.num1-v.num2;
					break;
					case 3:
						v.info = v.num1*v.num2;
					break;
					case 4:
						v.info = v.num1/v.num2;
					break;
				}
				
			}
		}
	})
	</script>
</html>

2.1.7计算器Vue进阶版本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<input type="text" v-model="num1">
			<input type="text" v-model="num2">
			<input type="button" value="加" @click="f('+')">
			<input type="button" value="减" @click="f('-')">
			<input type="button" value="乘" @click="f('*')">
			<input type="button" value="除" @click="f('/')">
			<div>{{info}}</div>
		</div>
	</body>
	<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script type="text/javascript">
	let v = new Vue({
		el:"body>div",
		data:{
			num1:0,
			num2:0,
			info:""
		},
		methods:{
			f(index){
				if(isNaN(v.num1)||isNaN(v.num2)){
					v.info = "输入的数据类型有误";
					return;
				}
				/* eval()此方法可以将字符串以js代码的形式执行 */
				v.info = eval(v.num1+index+v.num2);
			}
		}
	})
	</script>
</html>

2.1.8循环遍历
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<ul>
				<!-- v-for循环遍历，遍历的过程中会生成当前元素 -->
				<li v-for="name in arr">{{name}}</li>
			</ul>
			<table border="1">
				<caption>角色榜</caption>
				<tr>
					<th>名字</th>
					<th>昵称</th>
					<th>资金</th>
				</tr>
				<tr v-for="hero in heros">
					<td>{{hero.name}}</td>
					<td>{{hero.type}}</td>
					<td>{{hero.money}}</td>
				</tr>
			</table>
		</div>
	</body>
	<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script type="text/javascript">
		let v = new Vue({
			el:"body>div",
			data:{
				arr:["坂田银时","上条当麻","神乐","蛋黄酱王子"],
				heros:[
					{name:"坂田银时",type:"白夜叉",money:1},
					{name:"上条当麻",type:"神之右手",money:5000},
					{name:"排村剑心",type:"排村拔刀斋",money:400}
				]
			}
		})
	</script>
</html>

2.2idea中添加自定义模板代码