新特性
#1. let
-- let 声明变量有作用域；var声明变量没有作用域
-- let 同名变量只能声明一次；var可以声明多次
-- var 会变量提升；let 不存在变量提升
#2. const
-- 使用 const 声明常量
#1. 数组解构
-- 解构获取数组元素,语法：
1 let arr = [1,2,3];
2 let [a,b,c] = arr;
#2. 对象解构
-- 解构获取对象属性值,语法：
1 const person = {name: 'lisi', age: 24, language: ['java', 'python']};
2 const {name:abc, age, language} = person; //将name的值赋值给abc
//字符串扩展
#1. includes()
-- 表示是否找到了参数字符串，返回类型布尔。
1 "hello.vue".includes("v") //true
#2. startsWith()
-- 表示参数字符串是否在原字符串的头部，返回类型布尔。
1 "hello.vue".startsWith("hello") //true
#3. endsWith()
-- 表示参数字符串是否在原字符串的尾部，返回类型布尔。
1 "hello.vue".endsWith(".vue") //true
#4. 字符串模板
-- 使用 `` 声明字符串,``里面可以使用 ${} 读取变量值,也可以调用方法
1 let name = 'zhangsan';
2 function fun(){ return '吃东西吗？' };
3 console.log(`hello ${name},${fun()}`) //hello zhangsan,吃东西吗？
#1. 函数默认值
-- 函数在没有传参数时使用默认值
1 function fun(n, m = 2)
#2. 函数不定参数
-- 可以传递任意多个参数
1 function fun(...vals)
#3. 箭头函数
-- 箭头函数表达式更简洁,适用于那些本来需要匿名函数的地方,箭头函数不能使用 this
1 let sum = (a, b) => {
2 let c = a + b;
3 return c;
4 }
-- 箭头函数 + 解构
1 person = {name = 'lisi', age = 24}
2 hello = ({name}) => console.log(`hello ${name}`)
3 hello(person) //hello lisi
//Object 拓展的API
#1. keys
-- 获取对象所有key,返回数组
1 Object.keys({name='lisi', age = 20}) //["name", "age"]
#2. values
-- 获取对象所有 value,返回数组
1 Object.keys({name='lisi', age = 20}) //["lisi", 20]
#3. entries
-- 获取对象所有key和value,返回二维数组。格式: [[k1, v1],[k2, v2],...]
1 Object.keys({name='lisi', age = 20}) //[["name", "lisi"], ["age", 20]]
#4. assign
-- 将多个源对象的值拷贝到目标对象中。
1 let target = {a: 1}
2 Object.assign(target, {b:2}, {c:3}) //target {a:1, b:2, c:3};参数1是目标对象,将后面参数对象中的值赋值给目标对象
#1. 对象声明简写
-- 属性名和属性值的变量名一样,可以省略
1 let name = 'lisi';
2 let age = 20;
3 person = {name, age}
#2. 对象函数属性简写
-- 省略function定义
1 let person = {
2 let name = 'zhangsan';
3 eat(food){ console.log(`${this.name}在吃${food}`) },
4 eat2: food => console.log(`${person.name}在吃${food}`)
5 }
#3. 拷贝对象(深拷贝)
-- 取出参数对象所有可遍历属性然后拷贝到当前对象
1 person = {name: 'lisi', age: 20};
2 someone = {...person} // someone {name: 'lisi', age: 20}
#4. 合并对象
-- 将多个参数对象的属性值合并到一个对象中
1 let obj1 = {age: 18};
2 let obj2 = {name: 'lisi'};
3 let person = {...obj1, ...obj2} //person {name: 'lisi', age: 18}
#1. map
-- 接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回
1 let arr = ['1', '3', '-5', 9];
2 arr.map((item) => { return item * 2 }); // [2, 6, -10, 18]
reduce
- reduce() 方法接收一个函数
- 接收的函数的参数有四个
– pre: 初始值（之后为上一操作的结果）
– cur: 当前元素之
– index: 当前索引
– arr: 数组本身
#1. 数组求和
[1,2,3,4].reduce((pre, cur) => pre + cur)//10; pre是上次调用回调函数的返回值,假如：curr=2,那么 pre=1
promise
Promise可以封装异步操作，接收两个回调函数
- 请求成功调用第一个回调函数
- 请求失败调用第二个回调函数
// 创建 promise
const promise = new Promise((resolve, reject) => {
$.ajax({
url: 'http://www.baidu.com',
success: res => resolve(res),
error: err => reject(err)
})
});
// 调用 promise
promise.then((res) => {
//请求成功, res请求结果
}).catch((err) => {
//请求失败, err错误信息
})
// 多层封装 promise
promise.then((res) => {
//请求成功, 返回的还是 Promise,
return new Promise((resolve, reject) => {
$.ajax({
url: 'http://www.taobao.com',
success: res => resolve(res),
error: err => reject(err)
})
})
})then(res => { //继续可以调用 then, 因为上面返回的是 Promise对象
//请求成功,res结果
})
//封装请求
function get(url, data){
return new Promise((resolve, reject) => {
$.ajax({
url: url,
data: data || {},
success: resolve,
error: reject
})
})
}
//调用封装好的 get 函数
get('http://www.baidu.com').then(res => {
//请求baidu成功,继续请求
return get('http://www.taobao.com')
}).then(res => {
//请求taobao成功,这里可以一直调用get
})
//模块化
#1. export
-- export 可以导出一切JS变量,如:对象、函数、数组...
1 let name = 'lisi';
2 let age = 21;
3 function fun(){ console.log('hello') }
4 export {name, age, fun}
//文件名为,hello.js
-- default 导出方式:不指定导出时对象的名字,在导入时就可以使用任意名字作为导出对象
1 export default {
2 sum(a, b){
3 return a + b;
4 }
5 }
//文件名为,def.js
#2. import
-- 导入其他js文件中的对象、函数、数组...
1 import {name, age, fun} from "./hello.js"
-- 导入default方式js,
1 import abc from "./def.js";
2 abc.sum(1,2); //3
Vue
创建 Vue 项目
- 创建一个文件夹
- npm init -y 初始化项目
- npm install vue 为项目安装 vue 组件
- 页面引用 vue
<!-- html -->
<dev id="app">
<div>
Hello,{{msg}}
</div>
</dev>
<!-- js -->
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'Vue'
}
})
</script>
浏览器打印：Hello,Vue
el：选择元素，选中的元素会被vue解析
data：页面的一些数据
指令
#1. v-model & 双向数据绑定
<input v-model="{{count}}" />
v-model修饰符:
v-model.lazy：失去焦点后同步
v-model.number：只同步数字部分
v-model.trim：同步时去除前后空格
#2. v-on:click & 单击事件
-- html
<button v-on:click="onClick"></button>
-- js
let vm = new Vue({
data:{
num: 1
},
methods:{
onClick(){
this.num++
}
}
})
#3. v-text、v-html
<div v-text="{{msg}}"></div> //不解析html标签
<div v-html="{{msg}}"></div> //解析html标签
#4. {{xxx}} & 插值表达式
<div>{{msg}}</div>
#5. v-bind & html标签属性绑定
//简写 ":属性名"
<a v-bind:href="link">baidu</a>
<div v-bind:class="{cls1:true, cls2:false, cls3:true}">hello</div> // class -> [cls1, cls3]
#6. v-if
-- 值为bool类型，为true表示创建元素，false表示删除元素
#7. v-show
-- 值为bool类型，为true表示显示元素，false表示隐藏元素(display:none)
事件修饰符
- .stop：阻止事件冒泡到父元素
- .prevent：阻止默认事件发生
- .capture：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
- .once：只执行一次
<button v-on:click.stop="onClick">点赞</bottom>
<a href="http://www.baidu.com" @:click.prevent.stop="{{onClickToBaidu}}">百度一下</a>
按键修饰符
v-on 在监听键盘事件时添加案件修饰符
<!--只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input @keyup.13="submit" />
<!-- 使用按键别名，效果一样 -->
<input @keyup.enter="submit"/>
全部的案件别名：
- .enter
- .tab
- .delete
- .esc
- .space
- .up
- .down
- .left
- .rigth
组合按钮
可以用如下修饰符来实现仅在按下相应案件时才触发鼠标或者键盘事件的监听器。
- .ctrl
- .alt
- .shift
<!-- Alt + C -->
<input @keyup.alt.67="cliear"/>
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">do</div>
v-for
遍历对象或数组
语法：
- <li v-for="变量名 in 数组或对象">{{ 变量名 }}</li>
- <li v-for="(变量名, index) in 数组或对象">{{ 变量名 }}</li>
:key：遍历的时候加上:key来区分不同数据，提高vue渲染效率
<!-- html 遍历数组 -->
<div v-for="(user,index) in users" :key="user.id">
{{index}} => {{user.name}} - {{user.age}}
</div>
<!-- 遍历对象 -->
<div v-for="(val, key) in person" :key="key">
{{key}} => {{val}}
</div>
//vue-data
data:{
users: [
{id: 1, name: 'zhangsan', age: 20},
{id: 2, name: 'lisi', age: 24}
],
person: {
name: 'wangwu',
age: 22
}
}
计算属性和侦听器
计算属性
计算属性类似函数调用，以函数返回值作为属性值
<!--html-->
<div id="app">{{totalPrice}}</div> <!--150-->
//js
let vm = new Vue({
el: "#app",
data:{
price1: 60,
price2: 90
},
computed: {
totalPrice(){
return this.price1 + this.price2;
}
}
})
计算属性声明写到 computed 里面，当所依赖的属性发生改变时（如：this.price1 = 100），计算属性会重新计算并且渲染到页面中
侦听器
监听某个属性，当属性值发生改变后触发监听事件
例子：监听 count 的值，当值超过3时提示超出
<!-- html -->
<input v-model="count" />
//js
let vm = new Vue({
el: "#app",
data: {
count: 1
},
watch: {
count(newVal, oldVal){
if(newVal>3){
alter('库存超出限制!')
this.count = 3;
}
}
}
})
监听器声明在 watch 中，需要监听哪个属性就使用该属性名作为监听器名。
当属性发生改变时，触发监听事件。
newVal 改变后的值, oldVal 改变前的值
过滤器
可以对需要过滤的值，进行特殊操作后返回一个新值，如: 运算、拼接字符串...
示例：student对象有 name 和 sex属性，sex以0和1表示。 0 代表男，1代表女，通过过滤器将其转换成对应的性别。
<!-- html -->
<div v-for="stu in studens">
姓名：{{stu.name}}, 性别：{{stu.sex | sexFilter}}, 成绩：{{stu.score | gScoreFilter}}
</div>
//js
//全局过滤器
Vue.filter("gScoreFilter", val =>{
return val >= 60? "及格": "不及格"
})
let vm = new Vue({
el: "#app",
data: {
students: [
{name: 'zhangsan', sex: 0, score: 59},
{name: 'lisi', sex: 1, score: 70}
]
},
filters:{
//局部过滤器
sexFilter(val){
return val == 0?"男":"女";
}
}
})
使用 | 调用过滤器，将左边的值作为参数传给右边过滤器，过滤器经过处理或返回新的值。
局部过滤器在 filters 中声明，类似函数
全局过滤器使用 Vue.filter，参数1: 过滤器名字，参数2: 过滤器处理函数
组件化
在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。
但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
在 vue里，所有的 vue 实例都是组件。
<!-- html -->
<div id="app">
<counter></counter>
<counter></counter>
<myButton></myButton>
</div>
//js
//全局组件
Vue.component("counter", {
template: `<button @click="count++">次数{{count}}</button>`,
data(){
return {
count: 1
}
}
})
let vm = new Vue({
el: "#app",
components: {
//局部组件
'myButton': {
template: `<button @click="count++">次数{{count}}</button>`,
data(){
return {
count: 1
}
}
}
}
})
生命周期和钩子函数
Vue 实例在创建的时候会经过一系列的初始化过程：创建实例、装载模板、渲染模板等等。生命周期中每个状态都设置钩子函数（监听函数）。每当 vue 实例处于不同生命周期时，对应的函数就会被触发调用。
Vue的生命周期：
- beforeCreate
创建 vue 实例之前调用
- created
创建好 vue 实例后调用
- beforeMount
模板渲染前调用
- mounted
模板渲染后调用
- beforeUpdate
数据（data）修改前调用
- updated
数据（data）修改后调用
模块开发
#1. 全局安装 webpack
npm install -g webpack
#2. 全局安装vue脚手架
npm install -g @vue/cli-init
#3. 初始化vue项目
vue init webpack appname
- vue：vue脚手架
- webpack：模板
- appname：项目名
-- 使用webpack模板初始化一个appname项目
#4. 启动vue项目
npm run dev
模块化开发组件的基本组成：
<template>
<div>
</div>
</template>
<script>
export default{
data(){
return {
}
}
}
</script>
//
<style>
</style>
整合 ElementUI
#1. 安装element-ui
npm i element-ui -S
#2. main.js用使用
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use({ElementUI})
1.network 网络
2.service 服务
3.firewall 防火墙
4.start 启动
5.restart 重启
6.quit 退出
7.install 安装
8.images 图像
9.settings 设置
10.properties 属性窗口
11.Spring cloud
12.dependencies依赖性
13.Controller 控制器
14.application 应用
15.Config 配置
16.Scope 范围
17.GateWay 网关
18.Filter 过滤器
19.code 编码
20.Javascript 脚本语言
21.project 项目
22.import 导入
23.element 基本
24. view 视图
25.function 功能
26.display 显示
27.content 内容
28.request 请求
29.result 结果
30.scroll 目录
31.framework 框架
32.environment 环境
33.session factory 接口
34.parameter 参数
35.Executor 执行器
36.statement 声明
37.query 查询
38.transaction 事务
39.Struts1 源代码
40.nacos
41.Response 响应
42.Interval 间隔
43.Attribute 特质
44.localhost 本地主机
45.Standard 标准
46.characterEncoding 字符编码