VUE+CSS基础知识整理 部分
前端
1 dom操作
1、获取dom对象
1）document.getElementById(‘id的值’);
2）document.getElementsByClassName(‘class的值’);
3）document.getElementsByTagName(‘标签名字’)
4）document.getElementsByName(‘name属性的值’);
2、dom操作
1）操作标签的本体（
XXXX
XXX）
对象.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:
这是一个全局注册的组件});
var Child = {template:
局部注册组件的内容};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):属性 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）修饰符
@事件.修饰符 = “处理方法指针”