示意图
- computed:{
- lists(){
- return this.$store.state.list
- },
- },
用 v-model 来双向绑定 input 控制 checkbox 是否选中
示意图
示意图
示意图
示意图
vue 中双向数据绑定是如何实现的
示意图
示意图
示意图
position 的取值
static,relative,absolute,fixed,inherit,sticky
static 标准文档流
relative 相对于自身移动
fixed 相对于 body 移动
inherit 继承父级的 position 属性
absolute 相对于离它最近的 position 属性为 absolute,relative 或者 fixed 移动
sticky 正常情况是 static, 超过设置的 top,left 变成 fixed 定位
什么是盒子模型?
由元素内容, border,margin,padding 四部分组成盒子模型
行内元素有哪些?
a,b,span,img,input,strong,select,label,em,button,textarea
块级元素有哪些?
div,ul,li,dl,dt,dd,p,h1-h6,blockquote
空元素有那些?
br,meta,hr,link,input,img
src 和 href 的区别?
src 引入外部资源
href 用于超链接
节点?
- createDocumentFragment() // 创建一个 DOM 片段
- createElement() // 创建一个具体的元素
- createTextNode() // 创建一个文本节点
- appendChild() // 添加
- removeChild() // 移除
- replaceChild() // 替换
- insertBefore() // 插入
- getElementsByTagName() // 通过标签名称
- getElementsByName() // 通过元素的 Name 属性的值
- getElementById() // 通过元素 Id, 唯一性
数组去重
[...new Set([1,2,3,1,'a',1,'a'])]
使用正则表达式验证邮箱格式?
^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$
捕获先于冒泡. 顶部捕获 => 底部冒泡 => 第二层捕获 => 第二层冒泡.
viewport 是用户网页的可视区域
rem 布局图片, 宽高, 布局等等
如何对数组去重
第一层 for 用来控制循环的次数
第二层 for 用于控制与第一层比较的元素
如果相等
删除后面的 即第 j 个位置上的元素 删除个数 1 个
- function noRepeat1(arr){
- // 第一层 for 用来控制循环的次数
- for(var i=0; i<arr.length; i++){
- // 第二层 for 用于控制与第一层比较的元素
- for(var j=i+1; j<arr.length; j++){
- // 如果相等
- if(arr[i] == arr[j]){
- // 删除后面的 即第 j 个位置上的元素 删除个数 1 个
- arr.splice(j,1);
- // j-- 很关键的一步 如果删除 程序就会出错
- //j-- 的原因是 每次使用 splice 删除元素时 返回的是一个新的数组
- // 这意味这数组下次遍历是 比较市跳过了一个元素
- /*
- 例如: 第一次删除后 返回的是 1 1 3 2 1 2 4
- * 但是第二次遍历是 j 的值为 2 arr[2] = 3
- * 相当于跳过一个元素 因此要 j--
- * */
- j--;
- }
- }
- }
- return arr;
- }
单层 for 循环
- function norepeat(arr){
- arr.sort();
- // 先排序让大概相同的在一个位置, 这里为什么说是大概相同 是因为 sort 排序是把元素当字符串排序的 它和可能排成 1 1 10 11 2 20 3 ... 不是我们想要的从小到大
- for(var i = 0; i < arr.length-1;i++){
- // 还是两两比较 一样删除后面的
- if(arr[i]==arr[i+1]){
- arr.splice(i,1);
- //i-- 和 j-- 同理
- i--;
- }
- }
- return arr;
- }
ES6 中新的 API - Array.from()
- function normalize (arr) {
- if (arr && Array.isArray(arr)) {
- var res = Array.from(new Set(arr));
- return res;
- }
- }
- function normalize (arr) {
- if (arr && Array.isArray(arr)) {
- var res = [...new Set(arr)];
- return res;
- }
- }
html,xml,xhtml 的区别
xml 是 可扩展标记语言
HTML 是超文本标记语言
XHTML 是基于 xml 的 HTML, 作用与 HTML 相同
new 与 Object.create 区别
- var Base = function () {}
- var o1 = new Base();
- var o2 = Object.create(Base);
- Object.create = function (o) {
- var F = function () {};
- F.prototype = o;
- return new F();
- };
new 关键字必须是以 function 定义的
Object.create 则 function 和 object 都可以进行构建
MVC ,MVVM,MVP 的理解
示意图
Models: 数据层
View: 展示层
Controller: 控制器层
示意图
View 只知道 Presenter, 不知道 Model .Presenter 去更新 View
MVVM
数据模型的数据双向绑定
viewModel 是一个同步 view 和 model 的对象
渐进式框架的理解
渐进式代表的含义是: 主张最少
sessionStorage 用于本地存储一个会话中的数据
sessionStorage 不是一种持久化的本地存储
localStorage 用于持久化的本地存储
除非主动删除数据, 否则数据是永远不会过期的
Cookie 的大小是受限的
同源策略是一种约定, 它是浏览器最核心也最基本的安全功能, 如果缺少了同源策略, 则浏览器的正常功能可能都会受到影响.
同源
域名, 协议, 端口相同, 也就是在同一个域里.
基本数据类型和引用数据类型
Number,String ,Boolean,Null 和 Undefined
引用类型数据:
比如: Object ,Array ,Function ,Data 等
Vue2.0 的生命周期有哪些?
1.beforeCreate
创建前的状态
2.created
实例创建完成后
3.beforeMount
挂钩前
4.mounted
挂载结束
5.beforeUpdate
数据变化前的调用
6.updated
数据变化后的钩子
7.beforeDestroy
实例销毁之前调用
8.destroyed
Vue 实例销毁后调用
示意图
示意图
v-show 与 v-if 的区别
v-show 有更高的渲染成本 v-if 有更高的切换成本
示意图
示意图
什么是 Vuex?
Vuex 是一个专为 vue.js 应用程序开发的状态管理模式. 它采用集中式存储管理应用的所有组件的状态, 并以相应的规则保证状态以一种可预测的方式发生变化.
示意图
image
HTTP(HyperText Transfer Protocol: 超文本传输协议) 是一种用于分布式, 协作式和超媒体信息系统的应用层协议
HTTPS
HTTPS(Hypertext Transfer Protocol Secure: 超文本传输安全协议或 HTT Pover SSL) 是一种透过计算机网络进行安全通信的传输协议
image.PNG
image.PNG
image
请点赞! 因为你的鼓励是我写作的最大动力!
官方微信公众号
吹逼交流群: 711613774
吹逼交流群
来源: http://www.jianshu.com/p/7bbcf6fbc086