1.JavaScript
1.1window对象中常用的属性
- location:位置
- location.href; 获取或修改浏览器的请求地址
- location.reload(); 刷新
- history:历史
- history.length; 得到历史页面数量
- history.back() 返回上一页面
- history.forward() 前往下一页面
1.2DOM文档对象模型
- 包含和页面相关内容
- 通过选择器选择页面中的元素对象let 元素对象 = document.querySelector("选择器");
- 获取或修改元素的文本内容 <标签名>文本内容</标签名>元素对象.innerText; //获取元素象.innerText = "xxxx"; //修改
- 获取或修改控件的值元素对象.value; //获取元素对象.value = "xxxx"; //修改
- 创建元素对象let 变量 = document.createElement("标签名");
- 把元素对象添加到某个元素里面父元素.append(新元素);
- 获取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相关指令
- {{变量}}: 插值, 让此处的文本内容和变量进行绑定
- v-text: 让某个元素的文本内容和变量进行绑定
- v-html: 让某个元素的文本或标签内容和变量进行绑定
- v-bind:属性名=变量, 让元素的某个属性的值和变量进行绑定 , v-bind可以省略
- v-model=变量, 双向绑定: 变量会影响页面, 页面也会影响变量
- v-on:事件名="方法", 事件绑定, 事件触发的方法需要写在methods里面, 简写: @事件名="方法"
- 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中添加自定义模板代码
?
?