1前端回顾
1.1 前端的发展史(了解)
1)html(超文本标记语言) + css(层叠样式表) +js ----> 静态页面
2)jsp(javaee)/asp(.net)/php -->动态页面
3)ajax–> 局部刷新异步请求
同步: (线程) 一个程序执行完之后,才能执行另外一个程序
异步: 不用等待上一个程序执行,并行执行其他内容
局部刷新: 不是整个页面去刷新,只刷新局部
怎么实现局部刷新原理: 异步操作的时候,有回调函数,通过这个回调函数来完成局部刷新
4)jquery --> 它是js的框架 js封装出来的框架 write less do more
5)h5(html5)
6)nodejs(相当js的后台服务) /npm(maven) --很多很多框架
1.2 MVVM(理解)
MVC : model(模型) view(视图) controll(控制器)
MVVM : model view view-model -->数据的双向绑定
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZBEcdul0-1577537119184)(笔记.assets/image-20191228093714293.png)]
1.3 前端的框架说明
Vue.js:vue.js以轻量易用著称
React.js:vue.js和React.js发展速度最快, 集web前端与app于一身技术
AngularJS: AngularJS还是曾今老大。 用户比较比多
1.4 nodejs和npm环境(掌握)
下载:https://nodejs.org/en/download/
升级:npm install npm@latest -g
2 ES6
ECMAScript是浏览器脚本语言的规范,可以狭义理解是javascript的规范
ES6就是javascript用的最多语言规范.被各个浏览器实现了.
2.1 ES6的语法(掌握)
(1)语法1 (掌握)
let相较于var,他是块级的。
// (1)let 它是块级 局部变量, var 不是块级 全局变量
for(var i=0;i<10;i++){
console.log(i);
}
console.log("------i----------")
console.log(i);
console.log("============")
for(let j=0;j<10;j++){
console.log(j);
}
console.log("------j----------")
console.log(j);
(2)const 一旦有值就不能修改(掌握)
// const i=10;
//i=11;
(3)解构表达式(掌握)
//(3)解构表达式--数组解构
/*
let arr = [1,2,3];
//解构表达式
let [a1,a2,a3]=arr; // let a1 = arr[0],a2=arr[1]
console.log(a1,a2,a3);
console.log(a3);
*/
//对象解构
// let obj = {"name":"信哥","age":18};
// let {name,age} = obj;
// console.log(name+"年龄是:"+age);
(4)箭头函数(掌握)
/*var obj = {
eat:function(){
console.log("键哥中午吃饭");
},
eat1(){
console.log("键哥早上喝奶")
},
eat2:(food)=>{
console.log("键哥晚上吃"+food+"不用牙齿吃")
}
}*/
/*
obj.eat();
obj.eat1();
obj.eat2("香蕉");*/
console.log("-----------------------------------");
//箭头+解构一起使用
/*var say = ({name})=> console.log("我是"+name);
var obj1 = {
name:"王天霸"
}
say(obj1);*/
(5)模块化(今日了解–后面掌握用法)
import / export
3 Vue
3.1 什么是Vue
(1)Vue是构建界面的渐进式的js框架
(2)只关注视图层, 采用自底向上增量开发的设计。
(3)Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 --数据双向绑定
一句话:vue就是做界面的js框架 (jquery/easyui)
3.2 vue怎么使用(掌握)
(1)在项目里面 运行 npm install vue
(2)在页面引入vue.js
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
(3)测试代码
<body>
<div id="app">
{{name}}
</div>
<script>
new Vue({
el:"#app",
data:{
name:"xxxx"
}
});
</script>
3.3 el挂载(掌握)
el:挂载,把vue这个对象 挂载到对应的标签上面去
el方式:
(1)id的方式进行挂载
<body>
<div id="app">
{{name}}
</div>
<script>
new Vue({
el:"#app",
data:{
name:"xxxx"
}
});
</script>
(2) class方法进行挂载
<body>
<div class="app">
{{name}}
</div>
<script>
new Vue({
el:".app",
data:{
name:"xxxx"
}
});
</script>
3.4 data数据(掌握)
data:放字符串 对象 和数组 都OK
var app = new Vue({
el:"#app",
data:{
name:"xxxx",
user:{
name:"信信",
age:18,
hobby:["和何亮打野","和金国打野"]
}
}
});
3.5 methods方法(掌握)
方法methods:
var app = new Vue({
el:"#app",
data:{
name:"xxxx",
user:{
name:"信信",
age:18,
hobby:["和何亮打野","和金国打野"]
}
},
methods:{
eat(food){
console.log("何亮今天中午吃"+food)
},
drink(){
console.log("何亮今天中午喝什么呀")
}
}
});
3.6 Vue生命周期
vue对象 从出生 到死亡 经过这个过程 就叫生命周期
vue生命周期里面钩子方法:
created:(掌握)
表示创建完vue对象的时候,执行内容
mounted:(掌握) – window.onload
表示页面所有的内容 加载完之后,执行内容
var app = new Vue({
el:"#app",
data: {
name: "xxxx",
user: {
name: "信信",
age: 18,
hobby: ["和何亮打野", "和金国打野"]
}
},
methods:{
eat(food){
console.log("何亮今天中午吃"+food)
},
drink(){
console.log("何亮今天中午喝什么呀")
},
getEmloyees(){
console.log("发送请求查询员工")
}
},
created(){
//创建完之后 执行该内容
console.log("--------11111111---")
},
mounted(){
//渲染完之后 执行该内容
console.log("--------222222222---");
this.getEmloyees();
}
});
钩子环节
created创建对象 --> 渲染标签内容 – >mounted挂载完 -->destory销毁
重点:
created/mounted
3.7 数据的双向绑定 初体验
<body>
<div id="app">
<input type="text" v-model="msg" v-on:change="changeData"/>
{{msg}}
</div>
<script>
var app = new Vue({
el:"#app",
data: {
name: "xxxx",
msg:"test"
},
methods: {
changeData(){
console.log(this.msg);
}
}
});
</script>
</body>
4 vue指令-v-text/v-html(重点)
指令:vue提供的特殊的标签属性 , 不同的指令会产生不同的效果
<span v-text="name"></span>
<span v-text="user.name"></span>
<span v-html="user.name"></span>
//v-text等效于innerText /v-html 等效于 innerHTML
var app = new Vue({
el:"#app",
data: {
name: "<h1>xxxx</h1>",
user:{
name:"<h2>yyyy</h2>"
}
}
});
5 vue指令-v-for(重点)
循环
<body>
<div id="app">
循环数组
<ul>
<li v-for="hobby in hobbys">
{{hobby}}
</li>
</ul>
循环对象
<hr>
<ul>
<li v-for="u in user">
{{u}}
</li>
</ul>
<hr>
带索引循环数组
<ul>
<li v-for="(hobby,index) in hobbys">
{{hobby}}---------{{index}}
</li>
</ul>
循环对象value key index
<hr>
<ul>
<li v-for="(value,key,index) in user">
{{key}} ---- {{value}} ---- {{index}}
</li>
</ul>
循环json数据
<table>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
<tr v-for="student in students">
<td>{{student.id}}</td>
<td>{{student.name}}</td>
<td>{{student.age}}</td>
<td>{{student.sex}}</td>
</tr>
</table>
</div>
<script>
//v-text等效于innerText /v-html 等效于 innerHTML
var app = new Vue({
el:"#app",
data: {
user:{
name:"小明",
age:18,
sex:"man"
},
hobbys:["唱","跳","打篮球","只因你太美"],
students: [
{id:1,name: "刘备", age: 29, sex: "男"},
{id:2,name: "大乔", age: 20, sex: "女"},
{id:3,name: "诸葛亮", age: 21, sex: "男"}
]
}
});
</script>
</body>
6 vue 指令 -v-bind(重点)
绑定的标签里面属性的值
<div id="app">
<!-- v-bind可以绑定标签里面的属性的值 比如src title-->
<img width="100" src="img/4.jpg">
<img width="100" v-bind:src="imgSrc">
<img width="100" :src="imgSrc">
<input type="text" name="username">
<input v-bind="props"/>
</div>
<script>
//v-text等效于innerText /v-html 等效于 innerHTML
var app = new Vue({
el:"#app",
data: {
imgSrc:"img/4.jpg",
props:{
type:"text",
name:"username"
}
}
});
</script>
7 vue 指令 -v-show(重点)
控制display这个属性
<div id="app">
<div v-show="show">正确就显示,不正确就控制display</div>
<div v-show="hidden">正确就显示,不正确就控制display</div>
<div v-show="score>80">正确就显示,不正确就控制display</div>
</div>
<script>
//v-show控制 display :如果等于false display:none
var app = new Vue({
el:"#app",
data: {
"show":true,
"hidden":false,
"score":90,
}
});
</script>
8 vue 指令 -v-if/else(重点)
如果不成立 ,在页面无法看到
<div id="app">
<!-- false :v-show控制display属性 v-if 不显示 -->
<!-- if
<div v-if="age < 18">你还年轻,还能耍几年</div>
<div v-if="age > 18">你成年了,可以工作了</div>-->
<!-- if else
<div v-if="age < 18">你还年轻,还能耍几年</div>
<div v-else>你成年了,可以工作了</div>-->
<!-- if elseif elseif else-->
<div v-if="age < 18">还是小朋友,不能去洗脚</div>
<div v-else-if="age>18 && age<68 ">你成年,可以打野,想干什么就干什么</div>
<div v-else>你该安详晚年了 </div>
</div>
<script>
//v-text等效于innerText /v-html 等效于 innerHTML
var app = new Vue({
el:"#app",
data: {
"show":true,
"hidden":false,
"age":86,
}
});
</script>
9 vue 指令 -v-model(重点)
控制标签里面value 完成双向绑定
<div id="app">
<!--
v-model 控制 标签的value值 完成双向绑定
v-bind 控制 标签里面的属性的值 比如 img src tile
-->
(1)绑定普通的字符串值
<input v-model="inputValue" />
{{inputValue}}
(2)
<h1>绑定到type=checkbox的input表单元素</h1>
打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/>
踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>
data中的值:{{checkboxValue}}
(3)
<h1>绑定到type=radio的input表单元素</h1>
打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/>
踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>
data中的值:{{radioValue}}
(4)
<h1>绑定到文本域的值</h1>
<textarea v-model="textAreaValue"></textarea>
data中的值:{{textAreaValue}}
(5)下拉的值
<select v-model="skills">
<option value="rap">rap</option>
<option value="唱">唱</option>
<option value="跳">跳</option>
</select>
{{skills}}
</div>
<script>
//v-text等效于innerText /v-html 等效于 innerHTML
var app = new Vue({
el:"#app",
data: {
inputValue:"你怎么样!",
checkboxValue:["踢足球"],
radioValue:"打篮球",
textAreaValue:"哇哇和嘻嘻是同学",
skills:"唱"
}
});
</script>
eaValue">
data中的值:{{textAreaValue}}
(5)下拉的值
<select v-model="skills">
<option value="rap">rap</option>
<option value="唱">唱</option>
<option value="跳">跳</option>
</select>
{{skills}}
</div>