VScode
前端代码的编译工具,对于前端代码注释,提示更专业
ES6
ECMAScript浏览器的脚本语言的规范,Javascript是规范的具体实现
快捷键!+回车直接生成html文档
1.变量声明
var会出现越域,可以多次声明,会变量提升
let有严格的作用域,只能声明一次,不存在变量提升
const声明变量(只读变量),声明之后不允许改变,一旦声明必须初始化,否则会报错
2.解构表达式
//数组解构
let arr=[1,2,3];
let [a,b,c]=arr; //解构表达式
console.log(a,b,c)//1 2 3 //解构对象
const person={
name:"jack",
age:21,
language:['java','js','c']
}
const {name,age,language}=person; //解构表达式
console.log(name,age,language);// jack 21 ['java','js','c']扩展
const {name:abc,age,language}=person;//把person的name属性取出来赋值给abc
console.log(abc,age,language);// jack 21 ['java','js','c']3.字符串扩展
1)扩展的API(starsWith,endWith,includes)
2)字符串模板
多行字符串使用反引号``
字符串插入变量和表达式,使用${}占位,${}中也可以放JavaScript表达式,也可以调用函数
4.函数优化
1)在ES6之前,无法给函数的参数设定默认值
优化后可以直接设定默认值
2)可以传不定参数
3)箭头函数(用的多)
扩展(箭头函数+解构表达式)
5.对象优化
1.新增的API
keys:生成一个数组,获取对象的属性
values:生成一个数组,获取每一个属性的值
entries:生成一个数组,获取对象的属性和value,生成'key'和'value'数组
assign:把第一个参数作为目标对象,后面的都是源对象,把源对象的属性和值赋值给目标对象
2.声明对象的简写方式
3.对象函数属性的简写
4.对象的扩展运算符
运算符(...)取出参数对象的所有可遍历属性拷贝到当前对象
1.拷贝对象(深拷贝)
2.合并对象
6.map和reduce
1.map
map():接收一个函数()里放的是一个函数,会把原来数组中的所有元素经过()里的函数处理后放入新数组返回
2.reduce
//reduce
//reduce(callback,[initialValue])
//callback函数,回调函数,有四个参数,(previousValue,currentValue,index,array)
//previousValue:上一次处理后的值(a+b),(或者提供的初始值,initialValue),(或者数组的第一个元素,第一次调用callback的时候且没有initialValue)
//currentValue:当前正在处理的元素,(数组的第一个元素,前提是有initialValue),(或者是数组的第二个元素,没有initialValue时)
//index:当前元素在数组中的索引
//array:调用reduce的数组
let arr=[10,20,30]
let result=arr.reduce((a,b)=>{
console.log("上一次处理后的值:"+a);
console.log("当前正在处理的元素:"+b);
return a+b;
},100)
console.log(result)运行结果为:
7.Promise
优化异步操作
1.可以封装异步操作
1. Promise()中包含两个参数resolve:请求成功后,将data向下传递;reject是传递失败信息
let p = new Promise((resolve, reject) => {
//1.异步操作
$.ajax({
url: "mock/user.json",
success: function (data) {
console.log("查询用户成功:", data)
resolve(data);
},
error: function (err) {
reject(err);
}
});
})
p.then((obj) => {
$.ajax({
url: `mock/user_corse_${obj.id}.json`,
success: function (data) {
console.log("查询用户课程成功:", data)
resolve(data)
},
error: function (err) {
reject(err)
}
})
})
p.then((data) => {
$.ajax({
url: `mock/corse_score_${data.id}.json`,
success: function (data) {
console.log("查询用户课程成功:", data)
resolve(data)
},
error: function (err) {
reject(err)
}
})
})以前是用嵌套方法去做,现在用promise更适应人类思维,做完第一步请求,使用.then再做第二步请求,再做第三步请求,以此类推
如果我们将promise进行包装
let p = new Promise((resolve, reject) => {
//1.异步操作
$.ajax({
url: "mock/user.json",
success: function (data) {
console.log("查询用户成功:", data)
resolve(data);
},
error: function (err) {
reject(err);
}
});
})
p.then((obj) => {
return new Promise(()=>{
$.ajax({
url: `mock/user_corse_${obj.id}.json`,
success: function (data) {
console.log("查询用户课程成功:", data)
resolve(data)
},
error: function (err) {
reject(err)
}
});
})
}).then((data) => {
$.ajax({
url: `mock/corse_score_${data.id}.json`,
success: function (data) {
console.log("查询课程得分成功:", data)
},
error: function (err) {
}
})
})但是还是比较复杂,我们来进行抽取代码
//写一个方法 抽取ajax请求,封装Promise
function get(url, data) {
return new Promise((resolve, reject) => {
$.ajax({
url: url,
data: data,
success: function (data) {
resolve(data);
},
error: function (err) {
reject(err);
}
})
})
}
//使用该方法
get("mock/user.json")
.then((data)=>{
//用户已经查询成功,正在查课程
return get(`mock/user_corse_${data.id}.json`);
})
.then((data)=>{
//课程已经查询成功,正在查成绩
return get (`mock/corse_score_${data.id}.json`);
})
.then((data)=>{
//成绩查询成功,可以继续
})
//任何一步有问题就会走到这,打印异常
.catch((err)=>{
console.log(err);
});
8.模块化
1.什么是模块化
2.export
"export" 不仅可以导出对象,一切js变量都可以导出,例如:基本类型变量,函数,数组,对象;
export导出的名字不可以在需要导入的地方随意更改,如需更改,在导出前可以这样写
3.import
Node.js
Vue(使用Vue2)
1.MVVM思想
M:model,模型,包括数据和一些基本操作
V:View,视图,页面渲染效果
VM:View-Model,视图与模型双向操作(从DOM操作中解放出来)
2.声明式渲染
3.双向绑定
视图变化引起数据的变化,数据的变化引起视图变化
eg:
4.事件处理
5.指令
v-xx就叫指令,例如v-model,v-on等等
1.插值表达式 {{}}
{{ }}中可以加 Vue实例中任何数据和函数(data和methods), 计算 ,拼串, 等有返回结果的
只能用在标签体里 eg:<div>{{}}</div>
直接使用插值表达式{{}}网速慢时会出现插值闪烁(在页面没渲染完成之前,将表达式渲染出来)
解决插值闪烁可以用v-text和v-html
2.v-bind
给HTML标签的属性绑定
语法: v-bind:属性名
v-bind对标签的class,style做了增强
语法为v-bind:class="{属性名:属性值,属性名:属性值}"
简写 v-bind:等于: eg:v-bind:class等价于:class
单向绑定,数据变化可以引起视图变化
3.v-model
一般用于表单项,vue的自定义组件,实现双向绑定
4.v-on
可以简写成@
事件修饰符:
由点开头的指令后缀来表示,包括:
.stop:阻止冒泡到父元素
.prevent:阻止默认事件的发生
.capture:使用事件捕获模式
.self:只有元素自身触发事件才执行(冒泡,捕获都不执行)
.once:只执行一次
按键修饰符:
语法:v-on:keyup.按键名或者键码
组合键语法:v-on:keyup.按键名或者键码.按键名或键码
5.v-for
语法1:显示user信息
v-for="item in items"
语法2:获取数组下标
v-for="(item,index) in items"
语法3:遍历对象
v-for="value in item"
v-for="(value,key) in item"
v-for="(value,key,index) in item"
建议:
在遍历时加上:key来区分不同数据,能提高Vue渲染效率
常规数组可以用索引
6.v-if和v-show
条件判断来决定元素是否显示
区别:v-if是直接去掉标签,v-show是利用样式不显示
v-if常用来和v-else-if来做更复杂显示,或者与v-for做简单的条件查询显示(因为v-if优先级低于v-for)
点击后:
6.计算属性和侦听器
计算属性:
里面的值有任何一个发生变化,就会导致重新计算
监听器:
当有数据变化时做相应操作
方法中含有两个参数(newValue,oldValue)
过滤器:
用法{{user.sex | sexFilters}},上图为局部过滤器,仅可用在id为app的元素中
7.组件化
1.全局组件
全局直接使用<counter></counter>标签即可
2.局部组件
声明
使用
8.生命周期和钩子函数
1.生命周期
一个对象从创建到销毁的完整过程
Vue在Vue实例的生命周期的各个环节都创建了钩子函数(监听函数)当Vue实例处于某一个生命周期中的状态时,相应的钩子函数就会被调用,可以通过钩子函数来实时感知当前vue实例的生命周期,来做出相应的处理
9.Vue模块化开发
1.全局安装webpack
npm install webpack -g
2.全局安装vue脚手架
npm install -g @vue/cli-init
3.初始化vue项目
找到文件夹,在这个文件夹下
vue init webpack 应用名
根据提示创建
创建完成,进入项目启动
访问本机8080
也可以使用VSCode打开
build:和打包工具webpapck有关的代码
config:配置信息,端口信息等
node_modules:给当前项目的所有依赖
src:写代码的地方
static:静态资源文件,如图片字体等
index:首页
4.第一个组件
在components下创建Hello.vue
写入代码
<template>
<div>
<h1>你好,Hello,{{ name }}</h1>
</div>
</template>
<script>
export default{
data(){
return{
name:"张三"
}
}
}
</script>
添加路由
在router文件夹下,index.js文件里
5.引用ElementUI
1.安装ElementUI
npm install element-ui
2.导入
在main.js文件中
(导入其他的UI也是一样,在main.js里导入,使用就行)
3.试用:
复制代码,到相应位置即可
4.改造
改选项1为用户列表(抽出main的表格)
新建Mytable.vue文件
将app.vue中main原先的表格换成router-view
再把表格加数据粘贴进新建的Mytable.vue中
再在index.js中添加路由
更改app.vue中el-menu的属性,改router属性为true,再更改用户列表的标签中index属性值为路由的path值
改造结束(点击用户列表,显示表格)
8.总结(对Vue的使用)
1.创建vue实例,关联页面的模板,将关联的数据(data)渲染到关联的模板上(自动渲染)(响应式的)
2.指令来实现简化dom操作
v-model,v-on来实现对数据,视图的绑定操作
3.也可以声明方法来做更复杂的操作
效果如下
4.概述
扫一扫
103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
