标签:交换 css 圆角 异步处理 email isp 文本 show 自定义
1、百度统计是什么?
百度统计是百度推出的一款免费的专业网站流量分析工具,能够告诉用户访客是如何找到并浏览用户的网站,在网站上做了些什么,有了这些信息,可以帮助用户改善访客在用户的网站上的使用体验,不断提升网站的投资回报率。“世界很复杂,百度更懂你”,百度统计提供了几十种图形化报告,全程跟踪访客的行为路径。同时,百度统计集成百度推广数据,帮助用户及时了解百度推广效果并优化推广方案。
2、H5和CSS3新增特性?
CSS3:
选择器:属性选择器、伪类选择器、伪元素选择器。
特性:
1.颜色:新增RGBA,HSLA模式
2. 文字阴影(text-shadow)
3.边框: 圆角(border-radius)边框阴影: box-shadow
4. 盒子模型:box-sizing
5.背景:background-size 设置背景图片的尺寸background-origin 设置背景图片的原点
background-clip 设置背景图片的裁切区域,以”,”分隔可以设置多背景,用于自适应布局
6.渐变:linear-gradient、radial-gradient
7. 过渡:transition,可实现动画
8. 自定义动画
9. 在CSS3中唯一引入的伪元素是 ::selection.
10. 媒体查询,多栏布局
11. border-image
12.2D转换:transform:translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
13. 3D转换
伪类:
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked,单选框或复选框被选中。
------------------------------------------------------------------------------------------------------------------------
H5:
1. 拖拽释放(Drag and drop) API
2. 语义化更好的内容标签(header,nav,footer,aside,article,section)
3. 音频、视频API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
7. sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件,calendar、date、time、email、url、search
9. 新的技术webworker, websocket, Geolocation支持HTML5标签;
* IE8/IE7/IE6支持通过document.createElement方法产生的标签,
可以利用这一特性让这些浏览器支持HTML5新标签,
浏览器支持新标签后,还需要添加标签默认的样式:
* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
10.本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除。
3、JavaScript基础(内置对象、BOM、DOM、JSON、AJAX)
1、数据类型
基本数据类型:字符串、数字、布尔值、空、未定义;
引用数据类型:对象、数组、函数;
2、转义字符
\n 换行
\r 回车
\t tab
\b 退格
\f 换页符
3、浏览器对象BOM
(1)window对象的属性(窗口高度)
(2)浏览器存储
sessionStorage :在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。
localStorage: 在浏览器中存储 key/value 对。没有过期时间。
cookie: 存储于访问者的计算机中的变量,当同一台计算机通过浏览器请求某个页面时,就会发送这个cookie,识别用户。
(3)计时器
setInterval();每隔指定的时间执行
setTimeout();在指定时间后执行
(4)开启/关闭窗口
window.resizeTo(width,height);把窗口的大小调整到指定的宽度和高度。
window.scrollTo(x,y) ;把内容滚动到指定的坐标。
window.open([URL], [窗口名称], [参数字符串])打开窗口
(5)History 对象
包含用户(在浏览器窗口中)访问过的 URL。可通过window.history进行访问。
**window.history.back() 加载历史列表中的前一个 URL。
window.history.forward() 加载历史列表中的下一个 URL。
window.history.go();加载历史列表中的某个具体页面
(6)location对象,用于获取或设置窗体的URL。
(7)Navigator 对象
包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本。
4、HTML DOM操作
1、DOM方法
节点访问: getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
创建节点: createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
添加/删除/替换元素
appendChild(新元素) 追加元素,新元素作为父元素的最后一个子元素进行添加
insertBefore(新节点,指定节点) 在指定的子节点前面插入新的子节点。
removeChild() 删除子节点,必须清楚该元素的父元素。
replaceChild(新节点,指定节点) ;:替换子节点。
2、DOM属性
innerHTML 用于获取或替换 HTML 元素的内容。
element.style.样式属性名=新样式内容,改变html样式。
3、元素对象
nodeName 属性返回节点的名称。
nodeValue 属性返回节点的值。
nodeType 属性返回节点的类型。nodeType 是只读的。
parentNode - 元素的父节点
childNodes - 元素的子节点
firstChild: 元素的第一个子元素
lastChild: 元素的最后一个子元素
4、DOM事件
onclick 点击
onblur:失去焦点
onfocus 得到焦点
onkeydown 按下键盘
onkeyup 松开键盘
onkepress 按住键盘
onmousedown 按下鼠标
onmouseup 松开鼠标
onmouseover 鼠标悬浮
ommousemove 移动鼠标
onmouseout 移开鼠标
select 选中
onload :页面加载
onchange:改变
onsubmit :表单提交
5、JSON数据
用于存储和传输数据的格式,通常用于服务端向页面传递数据;
JSON.stringify(): JavaScript -> JSON js值转换成JSON字符串
JSON.parse() : JSON-> JavaScript 字符串转换成js对象
6、Ajax更新部分页面
(1)创建 XMLHttpRequest 对象
XMLHttpRequest 用于在后台与服务器交换数据。
(2)向服务端发送请求(异步/同步)
xmlhttp.open(“GET/POST”,url,异步true/同步false);规定请求类型、服务器上文件的地址以及是否异步处理请求。
xmlhttp.send(string);将请求发送到服务器。string:仅用于 POST 请求。
(3)服务器响应
7、Vue、Vuex、Vue-router分别是什么?有什么作用?
vue:
1、核心:实现数据双向绑定和组件化模式。
2、单向数据流:简单来说就是数据是单向的,数据流动方向可以追踪,流向单一,追踪问题可以更快捷,缺点是写起来不方便。
双向数据流:数据之间是相通的,将数据变更的操作隐藏在框架内部。优点是表单交互较多的场景下,会简化大量与业务无关的代码。 缺点是无法追踪局部状态的改变,增加了出错时debug的难度。
3、对MVC、MVVM的理解
MVC:
特点 :(1)view传送命令到controller(控制器)
(2)controller完成业务逻辑后,要求model(模型)改变状态
(3)model将新的数据发送到view,用户得到反馈。
MVC所有的通信都是单向的。
MVVM:
特点:(1)各部分之间的通信都是双向的
(2)采用双向绑定:view的变化。自动反应在viewModel(视图模型)。
4、vue的生命周期
beforeCreated()
在实例创建之间执行,数据未加载状态created()
在实例创建、数据加载后,能初始化数据,dom
渲染之前执行beforeMount()
虚拟dom
已创建完成,在数据渲染前最后一次更改数据mounted()
页面、数据渲染完成,真实dom
挂载完成beforeUpadate()
重新渲染之前触发updated()
数据已经更改完成,dom
也重新 render
完成,更改数据会陷入死循环beforeDestory()
和 destoryed()
前者是销毁前执行(实例仍然完全可用),后者则是销毁后执行5、组件通信
父传子:将父组件的数据绑定到使用子组件的自定义标签上,子组件在选项中添加一个props属性来接 受数据;
子传父:在响应该点击事件的函数中使用$emit来触发一个自定义事件,并传递一个参数。
6、v-if 和 v-show 区别
使用了 v-if
的时候,如果值为 false
,那么页面将不会有这个 html
标签生成。
v-show
则是不管值为 true
还是 false
,html
元素都会存在,只是 CSS
中的 display
显示或隐藏
7、$route和$router的区别
$router
为 VueRouter
实例,想要导航到不同 URL
,则使用 $router.push
方法
$route
为当前 router
跳转对象里面可以获取 name
、 path
、 query
、 params
等
8、NextTick 是做什么的
$nextTick
是在下次 DOM
更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick
,则可以在回调中获取更新后的 DOM
9、Vue 组件 data 为什么必须是函数
因为js本身的特性带来的,如果 data
是一个对象,那么由于对象本身属于引用类型,当我们修改其中的一个属性时,会影响到所有Vue实例的数据。如果将 data
作为一个函数返回一个对象,那么每一个实例的 data
属性都是独立的,不会相互影响了
10、计算属性computed 和事件 methods 有什么区别
computed: 计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值
method
:只要发生重新渲染,method
调用总会执行该函数
11、 对比 jQuery ,Vue 有什么不同
jQuery 专注视图层,通过操作 DOM 去实现页面的一些逻辑渲染; Vue 专注于数据层,通过数据的双向绑定,最终表现在 DOM 层面,减少了 DOM 操作
Vue 使用了组件化思想,使得项目子集职责清晰,提高了开发效率,方便重复利用,便于协同开发
12、Vue 中怎么自定义过滤器
可以用全局方法 Vue.filter()
注册一个自定义过滤器,它接收两个参数:过滤器 ID
和过滤器函数。过滤器函数以值为参数,返回转换后的值
13、Vue 中怎么自定义指令
全局注册
// 注册一个全局自定义指令 `v-focus`
Vue.directive(‘focus‘, {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
局部注册
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
14、对 keep-alive 的了解
keep-alive
是 Vue
内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染
15、Vue 中 key 的作用
key
的特殊属性主要用在 Vue
的虚拟 DOM
算法,在新旧 nodes
对比时辨识 VNodes
。如果不使用 key
,Vue
会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key
,它会基于 key
的变化重新排列元素顺序,并且会移除 key
不存在的元素。
有相同父元素的子元素必须有独特的 key
。重复的 key
会造成渲染错误
16、vue 等单页面应用的优缺点
优点:
缺点:
Vuex
1、vuex是什么
vuex是状态管理器。统一管理和维护各个vue组件的可变状态。
vuex相当于一个全局变量,用来存储状态和管理数据。
2、五个模型
vue-router
1、vue-router是什么?有哪些组件?
动态路由是单页面的路径管理器,vue页面应用是基于路由和组件的,路由用于设定访问路径 ,并将路径和组件映射起来。也就是说组件之间的切换。
就是从列表页跳转到详情页,列表页是一些接近或者重复的内容,所以详情页的页面结构是比较接近的,但是数据不一样。因此需要一个组件来渲染不同的页面,数据不一样是受到url的影响。所以url的值不一样,url不一样拿到的数据也不一样,因此渲染出来的页面也不一样。同一个结构渲染出来的页面不一样。因此是路由不一样,所以叫动态路由。这次的路由结构是和上次类似但不完全一样,是一个变化的值,可以调整和改变的值,经常用于列表页调整到详情页。
<router-link>
和<router-view>
和<keep-alive>
2、active-class 是哪个组件的属性?
active-class是router-link终端属性,用来做选中样式的切换,当router-link标签被点击时将会应用这个样式
3、怎么定义vue-router的动态路由?
动态路由的创建,主要是使用path属性过程中,使用动态路径参数,以冒号开头
4、vue-router响应路由参数的变化
// 监听当前路由发生变化的时候执行 watch: { $route(to, from){ console.log(to.path) // 对路由变化做出响应 } }
beforeRouteUpdate(to, from, next){
// to do somethings
}
5、vue-router 传参
Params// 传递参数 this.$router.push({ name: Home, params: { number: 1 , code: ‘999‘ } }) // 接收参数 const p = this.$route.params
Query:
// 传递参数 this.$router.push({ name: Home, params: { number: 1 , code: ‘999‘ } }) // 接收参数 const p = this.$route.params
6、vue-router实现路由懒加载(动态加载路由)
const router = new VueRouter({ routes: [ { path: ‘/home‘, name: ‘Home‘, component:() = import(‘../views/home‘) } ] })
标签:交换 css 圆角 异步处理 email isp 文本 show 自定义
原文地址:https://www.cnblogs.com/yjf713/p/13252585.html