前端
1 dom操作
1、获取dom对象
1)document.getElementById(‘id的值’);
2)document.getElementsByClassName(‘class的值’);
3)document.getElementsByTagName(‘标签名字’)
4)document.getElementsByName(‘name属性的值’);
2、dom操作
1)操作标签的本体(
对象.innerText = ‘文本内容’;
对象.innerHTML = ‘html内容’;
2)操作标签的属性
getAttribute(‘属性’) 获取对应属性的值
setAttribute(‘属性’,值) 修改对应属性的值
3)操作css
对象.style.样式名=值
3、dom高级查找
1)查找子元素
对象.children;-获取所有的子元素
2)查找父元素
对象.parentNode–获取子元素的父元素
3)相邻元素的查找
上一个:previousElementSibling
下一个:nextElementSibling
4)创建新的元素
document.createElement(‘标签名’)
5)追加元素:
对象.appendChild(要追加的对象)
6)移除对象:
对象.removeChild(要移除对象的引用);
2 ajax:asynchronous javascript and xml
XMLHttpRequest的对象:可以用来发送http请求,接收http响应
1、XMLHttpRequest的对象的建立
let xhr = new XMLHttpRequest();
2、XMLHttpRequest的对象的属性
1)readyState 用来返回请求的状态
0: 未初始化状态
1: 打开状态 对象的open方法
2: 发送状态 对象的send方法,并没有接收到结果
3: 正在接收状态 响应头已经接收到,但响应体没有接收完毕
4: 已加载状态 表示响应已经完全被接收
2)status 返回服务器的响应状态码
200: OK
404
500
3)response属性获取返回结果
4)onreadystatechange -注册状态改变事件
3、方法
open(method,url,isAsync) : 建立http连接
send(参数) : 发送请求
4、js-ajax 连接步骤
1)建立对象
let xhr = new XMLHttpRequest();
2)注册状态改变监听事件
xhr.onreadystatechange = function(){
//判断请求状态和响应状态码
if(xhr.readyState 4 && xhr.status200){
let obj = JSON.parse(xhr.response);//获取到的结果是字符串,将字符串转换成对象
console.log(obj.list);
//操作dom,把数据放在对应的dom上
…
}
}
3)调用open方法,建立连接
xhr.open(‘get’,‘http://localhost:8080/ajax-server/userinfo/getAll’,true or false)
4)调用send方法,发送请求
xhr.send(null);
3 es6新特性
1、块级作用域变量
1)let定义块级作用域变量
2)const 定义只读变量
const声明变量的同时必须赋值,const声明的变量必须初始化,一旦初始化完毕就不允许修改
2、函数
1)可以给形参函数设置默认值
function fun2(a=1,b=2){
console.log(a,b)
}
2)箭头函数
var fun3 = (a)=>{console.log(a);}
3、数组的展开运算
在数组之前加上三个点(…)
var arr = [1,2,3,4,5];
console.log(arr);//[1, 2, 3, 4, 5]
console.log(…arr)// 1 2 3 4 5
4、apply和call
apply(this的指向,数组/arguments)
call(this的指向,参数1,参数2,参数3)
5、解构赋值
1)数组的解构赋值
var [a,b,c]=[11,22,33]
console.log(a,b,c)//11 22 33
2)对象的解构赋值
var{name,age}={name:“张三”,age:“20”}
console.log(name,age)//张三 20
3)解构json
var jike = {“name”:“tom”,“age”:“23”,“sex”:“男”};
var {name,age,sex}=jike;
console.log(name,age,sex)//tom 23 男
6、string中加入include方法
1)includes(“字符”); 用于判断字符串中是否包含某个字符
2)includes(“字符”,startIndex); 用于判断字符串中下标startIndex是否是某个字符
7、Set()和Map()
1)Set有序列表集合,包含的方法:add()、has()、delete()、clear()等
2)Map键值对的集合 key/value,包含的方法:get(key)、has()、clear()等
4 vue
1、生命周期:
1)beforeCreate:在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
2)created:实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始, e l 属 性 目 前 不 可 见 。 3 ) b e f o r e M o u n t : 在 挂 载 开 始 之 前 被 调 用 : 相 关 的 r e n d e r 函 数 首 次 被 调 用 。 该 钩 子 在 服 务 器 端 渲 染 期 间 不 被 调 用 。 4 ) m o u n t e d : e l 被 新 创 建 的 v m . el 属性目前不可见。 3)beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。 4)mounted: el 被新创建的 vm. el属性目前不可见。3)beforeMount:在挂载开始之前被调用:相关的render函数首次被调用。该钩子在服务器端渲染期间不被调用。4)mounted:el被新创建的vm.el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。该钩子在服务器端渲染期间不被调用。
5)beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。该钩子在服务器端渲染期间不被调用。
6)updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。该钩子在服务器端渲染期间不被调用。
7)beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
8)destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
2、常用指令
1)绑定本体 <标签>{{变量名}}</标签>
2)属性的绑定 v-bind:属性
xxxx
3)元素的显示和隐藏 v-if=“boolean值”
yyyy
4)数组与dom的绑定 v-for=“数组元素 in 数组”
5)元素事件的绑定 v-on:事件名=“vue对象methods属性中的方法名”
按钮
6)表单输入和应用状态之间的双向绑定
3、Vue.js 组件
1)注册组件Vue.component(tagName,options)
Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。
Vue.component( ‘my-component’, {
template: <div>这是一个全局注册的组件</div>
});
var Child = {template: <div>局部注册组件的内容</div>
};
new Vue({
el: ‘#app’,
components: {
‘my-component’: Child
}
});
2)调用组件
3)组件通信
在 Vue 中,父子组件的关系可以总结为 props down、events up
父子组件通信:父组件通过 props 向下传递数据给子组件
子父组件通信:子组件通过 events 给父组件发送消息
-使用 $on(eventName) 监听事件
-使用
e
m
i
t
(
e
v
e
n
t
N
a
m
e
)
触
发
事
件
非
父
子
组
件
通
信
:
使
用
一
个
空
的
V
u
e
实
例
作
为
中
央
事
件
总
线
4
、
模
板
语
法
(
数
据
绑
定
语
法
)
1
)
文
本
绑
定
<
标
签
>
d
a
t
a
中
的
属
性
<
/
标
签
>
i
n
n
e
r
T
e
x
t
2
)
h
t
m
l
绑
定
i
n
n
e
r
H
T
M
L
<
标
签
v
−
h
t
m
l
=
"
d
a
t
a
中
的
属
性
"
>
<
/
标
签
>
v
−
h
t
m
l
不
是
v
u
e
推
荐
的
数
据
绑
定
的
方
式
3
)
元
素
属
性
的
绑
定
:
(
v
−
b
i
n
d
)
:
属
性
<
i
n
p
u
t
t
y
p
e
=
"
t
e
x
t
"
:
r
e
a
d
o
n
l
y
=
"
i
s
R
e
a
d
o
n
l
y
"
>
n
e
w
V
u
e
(
d
a
t
a
:
i
s
R
e
a
d
o
n
l
y
:
f
a
l
s
e
,
,
m
e
t
h
o
d
s
:
c
h
a
n
g
e
(
)
t
h
i
s
.
i
s
R
e
a
d
o
n
l
y
=
!
t
h
i
s
.
i
s
R
e
a
d
o
n
l
y
;
,
,
)
.
emit(eventName) 触发事件 非父子组件通信:使用一个空的 Vue 实例作为中央事件总线 4、模板语法(数据绑定语法) 1)文本绑定 <标签>{{data中的属性}}</标签> innerText 2)html绑定 innerHTML <标签 v-html="data中的属性"></标签> v-html不是vue推荐的数据绑定的方式 3)元素属性的绑定: (v-bind):属性 <input type="text" :readonly="isReadonly"> new Vue({ data:{ isReadonly: false, }, methods:{ change(){ this.isReadonly = !this.isReadonly; }, }, }).
emit(eventName)触发事件非父子组件通信:使用一个空的Vue实例作为中央事件总线4、模板语法(数据绑定语法)1)文本绑定<标签>data中的属性</标签>innerText2)html绑定innerHTML<标签v−html="data中的属性"></标签>v−html不是vue推荐的数据绑定的方式3)元素属性的绑定:(v−bind):属性<inputtype="text":readonly="isReadonly">newVue(data:isReadonly:false,,methods:change()this.isReadonly=!this.isReadonly;,,).mount(’#app’);
4)在以上的绑定中,可以使用js的表达式
{{msg+1}}
{{ok?‘YES’:‘NO’}}
{{str.split(’’).reverse().join(’’)}}
错的:
{{var x}}
{{if(ok){return ‘OK’}}
5)指令
v-if=“boolean”
v-bind:属性名
v-on:事件
6)修饰符
@事件.修饰符 = “处理方法指针”
<button @click.prevent=“fun”>按钮
相当于js中直接写 event.preventDefault();
7)缩写:(vue推荐的写法)
v-bind: 写成 :
v-on: 写成 @
5、计算属性和侦听器
1)计算属性: