一、ES6基础语法
1、什么是ES6
全称: ECMAScript
- 是浏览器脚本语言的规范,可以狭义理解是javascript的规范
- ES6就是现在最新的JS语法
2、常用语法
①、声明变量let
和声明常量const
曾经声明变量使用的是var
,原来的声明更为随意,语法不是很严谨,使用let
后更接近Java的变量声明习惯
- 作用域更加明确,只有在代码块中使用
- 不能重复声明
<script>
for(var i = 0;i<5;i++){
}
/*这里传统方式可以获取到i*/
console.debug(i);
for(let j = 0;j<5;j++){
}
/*这里获取不到j,会报错*/
console.debug(j);
</script>
![1607133553865](https://i-blog.csdnimg.cn/blog_migrate/204bd4847db7d9a53d7675caa158d7fe.png)
const
类似于Java中的static修饰
- 常量不能做修改
const k = 66;
k = 88;
![1607133750875](https://i-blog.csdnimg.cn/blog_migrate/8077989f4a9abbca5f80f35f87e12d37.png)
②、解构表达式
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
<script>
/*1、解构变量赋值*/
//曾经变量赋值
let a1 = "小张1";
let a2 = "小张2";
let a3 = "小张3";
console.debug(a1,a2,a3);
//使用解构方式
let [b1,b2,b3] = ["狗蛋1","狗蛋2","狗蛋3"]
console.debug(b1,b2,b3);
/*2、对象解构*/
let user = {name:"张飞",age:11};
//名称要对应
let {name,age} = user;
console.debug(name,age);
</script>
③、箭头函数
相当于Java中的lambda表达式
<script>
/*1、函数的新写法*/
let say = (name)=>{
console.debug("我的名字叫"+name)
}
say("曹操");
/*2、对象中添加相应的参数*/
let user = {
//使用箭头函数
take1:()=>{
console.debug("你叫什么");
},
//箭头函数进一步精简
take2(msg){
console.debug("我叫"+msg);
}
};
user.take1();
user.take2("关羽");
/*解构于箭头函数的综合使用*/
//定义一个对象
let person = {name:"刘备",age:18};
//传统方式
function hello(par) {
console.debug(par.name,par.age);
}
hello(person);
//解构及箭头函数
let hi = ({name,age})=>{//参数名要与对象属性名相对应
console.debug(name,age);
};
hi(person);
</script>
④、Promise:更强大的异步编程
注:以后会使用axios(更加的简单啦),它是对Promise的底层的封装,大家可以先理解为就是原生Ajax与JQuery封装后的区别
- 异步编程的解决方案(比传统的解决方案更加强大)
- Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件
- 我们可以在Promise中封装一个异步请求的结果
<script>
/*创建一个异步对象,这里的参数是两个函数*/
let promise = new Promise((resolve, reject)=>{
//使用方法调用,延迟1000模拟从数据库返回数据的事件
setTimeout(()=>{
let num = Math.random();//模拟成功失败
if (num>0.5){
resolve("我要起飞");//成功是后执行的函数
}else{
reject("就不回去");//失败的时候执行函数
}
},1000)
});
/*这里定义的是上面对象对应的函数运行后执行的*/
promise.then((successed)=>{//成功resolve()执行的函数
console.debug("恭喜你,告诉我你要干嘛:"+successed);
}).catch((failed)=>{//失败reject()后执行的代码
console.debug("回去吧孩子----"+failed);
})
</script>
⑤、模块化方法
简单的理解就是将代码拆分,提高代码的复用性(就像Java中的一类引入了另外一个类);所以模块化其实是一种思想,前端有很多能够实现这种思想
commonJs
:nodeJS中的实现方案amd/cmd
:可以在浏览器中直接实现ES6
:可以在浏览器中直接实现export
命令用于规定模块的对外接口import
命令用于导入其他模块提供的功能
导出多个值
导入数据需要注意:
./
代表当级目录- 导入时的文件后缀
.js
可以省略 - 导入时候的名称必须与导出的名称/常量名保持一致
a.js
//导入数据
import {cat,dog,name} from "./b"
//调用进行测试
console.debug(name);
cat.say();
dog.hello("曹操");
b.js
let cat = {
say(){
console.debug("我是谁?");
}
}
//有参
const dog = {
hello(msg){
console.debug("我在哪?"+msg);
}
}
//常量导出
const name = "张飞";
//导出数据
export {cat,dog,name};
导出默认值
- 默认值的话导入功能的名称可以自己随便取
c.js
//默认值的话导入功能的名称可以自己随便取
import {heihei} from "./d"
heihei.hi();
d.js
//导出默认值
export default {
hi(){
console.debug("默认")
}
}
二、前端发展和npm安装
1、前端的发展
①、前端发展的图例
②、Node.js概念介绍
-
前端课开发后端的工具(仅限于微小型应用,受限于并发和线程问题)
-
采用异步风格,广受人们喜爱
-
NPM最为Node.js
- NPM相当于后端的Maven
- NPM是Node提供的模块管理工具,可以下载安装前端框架
名称 | 特点 |
---|---|
Vue.js | 轻量易用,当前最火,发展速度快 |
React.js | 混合式开发(集Web开发与APP于一身) |
AngularJS | 曾今的老大 |
③、MVVM认识
- M:即Model,模型,包括数据和一些基本操作
- V:即View,视图,页面渲染结果
- VM:即View-Model,模型与视图间的双向操作(无需开发人员干涉)
在MVVM之前,开发人员从后端获取需要的数据模型,然后要通过DOM操作Model渲染到View中。而后当用户操作视图,我们还需要通过DOM获取View中的数据,然后同步到Model中。而MVVM中的VM要做的事情就是把DOM操作完全封装起来,开发人员不用再关心Model和View之间是如何互相影响的:
- 只要我们Model发生了改变,View上自然就会表现出来。
- 当用户修改了View,Model中的数据也会跟着改变。
概括的说,现在视图和数据会动态一致,类似于中间有一个监听
2、Nodejs和Npm安装
node自带npm(安装了node也就有npm了)(npm------牛皮吗)
安装
①、官方网站查找下载 :Download | Node.js
②、选组对应的版本进行下载安装,傻瓜式安装
③、安装后进行测试,在DOS窗口下:
- 输入命令
node -v
:查看node版本 - 输入命令
npm -v
:查看npm版本 - 上述两步都成功后,可以执行
npm install npm@latest -g
(这里-g
代表全局)升级npm版本
在IDEA中安装NPM
注:JAVA程序员一般使用IDEA做开发,所以我们直接在IDEA中安装NPM支持插件
![image-20201205162619576](https://i-blog.csdnimg.cn/blog_migrate/e621bd8862f39e50284994feb9af6156.png)
安装后重启ider
进行测试,在下方的输入之前测试的命令即可
![image-20201205162736598](https://i-blog.csdnimg.cn/blog_migrate/39b1ea3c989ca7bbdceac87192c33ac7.png)
使用NPM
首先要清楚既然npm类似于maven,呢么maven中我们有pom.xml,而在npm中我们有package.json
①、初始化指令
npm init
-> 初始化,会在项目中创建一个package.json文件 (相当于建了一个maven的pom.xml文件)npm init -y
-> 初始化(跳转确定信息,推荐这种)
![image-20201205163223423](https://i-blog.csdnimg.cn/blog_migrate/0e539d795a04ed5d9a30bfaf289d71d1.png)
②、安装命令及其他命令
- 全局安装(所有项目都能用)
npm install -g vue
npm -g root 安装路径
- 局部安装(当前项目可以使用) -> 建议使用这种
npm install/i vue
其他指令:
- 查看某个模块:
npm list vue
- 列表模块(查看所有模块):
npm ls
- 卸载模块:
npm uninstall vue
- 更新模块:
npm update vue
- 运行工程:
npm run dev/test/online
-> 平时运行使用(需要配置,现在无法执行) - 编译工程:
npm run build
-> 上线时需要进行编译(编译完扔到服务器中运行)
③、切换镜像
在maven中我们有中央仓库和阿里镜像仓库,这里类似,我们切换到淘宝镜像仓库
- 全局安装nrm: npm install nrm -g
- 查看镜像源 npm ls
- 切换淘宝镜像源 npm use taobao
切换后如下
![image-20201205163918387](https://i-blog.csdnimg.cn/blog_migrate/003265a8ed453dfafc86940b702ff4c5.png)
三、Vue入门
1、Vue基本概念
①、什么是Vue
官网解释:Vue是一套用于构建用户界面的渐进式框架
- 渐进式:简单说就是可以先学习核心,然后一步一步再慢慢进行学习
- Vue只关心视图层,通过新的属性(自定义)和{{表达式}}扩展了 HTML。
- Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
- 总之就是Vue简单易学
②、Vue特点
轻量化、指令化、插件化、组件化、数据绑定
③、Vue历史
Vue诞生于2014年,是由前Google 的员工尤雨溪(中国人), 在2016年9月宣布以技术顾问的身份加盟阿里巴巴。其他框架的对比对比其他框架 — Vue.js
2、Hello Vue
①、引入Vue的js文件
②、准备挂载元素(类似告诉Vue我要操作哪个元素)
③、创建js完成挂载
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
<!--第一步:引入Vue的js文件,注意这里一定要使用完整的标签格式-->
<!--<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"/>会失败-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<!--第二步:准备挂载元素于vue发生关系-->
<div id="app">{{msg}}</div>
<!--第三步:准备Vue完成代码-->
<script>
new Vue({
el:"#app",
data:{
msg:"你好Vue!"
}
})
</script>
</body>
3、Vue三大属性
①、el
:指定挂载元素
- el是指定挂载的节点
- 选择挂载元素可以使用id选择器(推荐)、class选择器、标签选择器,但是不管使用哪一种都只能挂载一个
- 只有挂载成功的元素才能使用Vue的功能
②、data
:数据属性
是指准备好的数据,可以再表达式中获取/直接再js中获取/设置
<div id="app">
<!--可以在表达式中获取-->
{{msg}}<br/>
{{user.age}}<br/>
{{ids[0]}}-----{{ids}}
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
msg:"你好Vue!",
user:{
name:"张狗蛋",
age:66
},
ids:[66,88,99]
}
});
alert("你再看");
vue.msg = "我变身了"
</script>
③、methods
:方法属性
指的是方法元素:
- 调用的方法可以直接在js中调用,或者是通过表达式,在挂在元素中使用
- 可以在方法中通过this获取到data中的数据
<div id="app">
<!--可以在表达式中获取-->
{{hello("张大大")}}
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
msg:"你好Vue!",
},
methods:{
hello(name){
alert(name+this.msg)
}
}
});
//也可以在js中进行调用
vue.hello("狗剩");
</script>
4、Vue表达式
①、四则混合运算及三目运算
<div id="app">
<!--表达式可以直接进行四则运算-->
{{a}}+{{b}}={{a+b}}<br/>
{{a}}-{{b}}={{a-b}}<br/>
{{a}}*{{b}}={{a*b}}<br/>
{{a}}/{{b}}={{a/b}}<br/>
<!--三目运算-->
{{sex?"男":"女"}}
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
a:"10",
b:"5",
sex : true
}
});
</script>
②、字符串,对象,数组都可以直接操作
<div id="app">
<!--操作字符串-->
{{msg.length}}<br/>
{{msg.toUpperCase()}}<br/>
<!--操作对象-->
{{user.sex}}<br/>
<!--操作数组-->
{{ids[2]}}
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
msg:"abcde",
ids:[11,22,33],
user:{
id:66,
sex:true
}
}
});
</script>
5、Vue常用指令
指令名称 | 指令作用 | 备注 |
---|---|---|
v-html | 显示与解析HTML代码 | |
v-text | 原封不动的展示 | |
v-for | 遍历与循环功能 | 遍历数字,字符串,对象,数组 |
v-bind | 绑定属性 | 简单形式 :属性名=“值” |
v-model | 双向绑定 | 只支持input,select,textarea |
v-show | 显示与隐藏 | 隐藏只是样式:style=“display=none” |
v-if | 判断 | v-if/ v-else-if v-else |
v-on | 绑定事件 | 简写 @事件名=方法名() |
①、v-text
与v-html
:展示文本
两个指令的区别
- html会去识别与编译咱们的html标签
- text 会把加上的内容原样输出(不会当作html标签进行识别与编译)
<div id="app">
<!--会识别html标签-->
<div v-html="msg"></div>
<!--会原样进行显示-->
<div v-text="msg"></div>
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
msg:"<h1>我是谁!!!</h1>"
}
});
</script>
![image-20201205233048583](https://i-blog.csdnimg.cn/blog_migrate/6ebd5e6b2f26384c33c088b5e16ffab2.png)
②、v-if
: 判断
<div id="app">
<div v-if="age<20">青年是国家栋梁</div>
<div v-else-if="age>21 && age<60">奋斗吧打工人</div>
<div v-else>安享晚年</div>
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
age:55
}
});
</script>
③、v-bind
: 绑定属性
- bind主要是用于绑定相应的属性
<标签 v-bind:属性名="属性值">
- bind有一种简写形式
<标签 :属性名="属性值">
- 如果直接把整个对象进行属性绑定
<标签 v-bind="对象">
<div id="app">
<!--传统方式-->
<img src="img/idea.jpg" width="20" height="10" title="传统方式" ><br/>
<!--使用v-bind-->
<img v-bind:src="img" v-bind:width="width" v-bind:height="height" v-bind:title="title"><br/>
<!--使用v-bind简写,可以省略v-bind-->
<img :src="img" :width="width" :height="height" :title="title"><br/>
<!--使用v-bind绑定对象-->
<img v-bind="imgnew"><br/>
</div>
<script >
let vue = new Vue({
el:"#app",
data:{
img:"img/idea.jpg",
width:200,
height:50,
title:"v-bind方式",
imgnew:{
src:"img/idea.jpg",
width:300,
height:150,
title:"v-bind对象",
}
}
});
</script>
④、v-for
: 遍历功能
-
遍历咱们的数据(数字,字符串,对象,集合)
-
数字就是普通的循环
for(var i=1;i<=数字;i++)
-
字符串是拿到每一个字母
-
对象循环
<span v-for="(v,k,i) in 对象"></span>
- 第一个参数:代表对象的属性值
- 第二个参数:代表对象的属性名
- 第三个参数:代表索引
-
数组循环
<span v-for="(v,i) in 数组"></span>
- 第一个参数:代表对象的属性值
- 第二个参数:代表索引
<div id="app">
<ul>
<!--遍历数字-->
<li v-for="v in num">{{v}}</li><br/>
<!--遍历字符串-->
<li v-for="n in name">{{n}}</li><br/>
<!--遍历对象,其中第一个参数属性值,第二个参数属性名,第三个参数索引-->
<li v-for="(v,k,i) in user">{{k}}:{{v}}---{{i}}</li><br/>
<!--遍历数组,其中第一个参数是值,第二个参数是索引-->
<li v-for="(v,i) in ids">{{i}}:{{v}}</li>
</ul>
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
num:5,
name:"zhang",
user:{
name:"王五",
age:11
},
ids:["鸡","狗","猪"]
}
});
</script>
效果图
![image-20201206133929782](https://i-blog.csdnimg.cn/blog_migrate/224f1322277e62fc0932b11f17bbe7f7.png)
⑤、v-on
: 事件绑定
- 事件绑定可以使用
<标签 v-on:事件名="方法名">
- 简写可以使用
<标签 @事件名="方法名>
- 调用的时候可以不写()
<div id="app">
<!--可以省略括号-->
<button v-on:click="hello">点我试试</button><br/>
<!--传参的-->
<button @click="say('张飞')">你在点点这个</button><br/>
<!--可以直接进行自增-->
<button @click="age++">{{age}}</button>
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
msg:"琪琪",
age:33
},
methods:{
hello(){
alert("点什么点")
},
say(name){
alert("你好你的名字是:"+name+"今年"+this.age)
}
}
});
</script>
⑥、v-show
: 显示与隐藏
- v-show用于展示和隐藏
<标签 v-show="true/false">
- 实际是它只是修改元素的样式
display="block/none"
<div id="app">
<!--点击按钮修改属性true/false-->
<button @click="imglook">点我有惊喜</button>
<img src="img/idea.jpg" v-show="imgshow">
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
imgshow:true
},
methods:{
imglook(){
this.imgshow = !this.imgshow
}
}
});
</script>
⑦、v-model
:双向绑定(MVVM体现)
- 主要是用于完成双向的绑定
- 只能用于:input,select,textarea
<div id="app">
名字:
<input type="text" v-model="inputVal">{{inputVal}}<br/>
爱好:
<input type="checkbox" value="1" v-model="checkboxVal">吃饭
<input type="checkbox" value="2" v-model="checkboxVal">睡觉
<input type="checkbox" value="3" v-model="checkboxVal">打豆豆
{{checkboxVal}}<br/>
性别:
<input type="radio" value="1" v-model="radioVal">男
<input type="radio" value="2" v-model="radioVal">女
<input type="radio" value="3" v-model="radioVal">不知道
{{radioVal}}<br/>
<!--下拉框-->
<select v-model="selectVal">
<option value="请选择">请选择</option>
<option value="1">成都</option>
<option value="2">北京</option>
<option value="3">郑州</option>
</select>
{{selectVal}}<br/>
<hr/>
<textarea v-model="textareaVal"></textarea>{{textareaVal}}
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
inputVal:"请填写",
checkboxVal:["2","3"],
radioVal:1,
selectVal:"请选择",
textareaVal:"请填写相关内容"
}
});
</script>