示意图
示意图
computed:{
lists(){
return this.$store.state.list
},
},
用v-model来双向绑定input控制checkbox是否选中
示意图
示意图
示意图
示意图
Vue中双向数据绑定是如何实现的
示意图
示意图
示意图
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用于超链接
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;
}
}
XML 是 可扩展标记语言
HTML 是超文本标记语言
XHTML 是基于XML的 HTML, 作用与HTML相同
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都可以进行构建
示意图
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等
1.beforeCreate 创建前的状态 2.created 实例创建完成后 3.beforeMount 挂钩前 4.mounted 挂载结束 5.beforeUpdate 数据变化前的调用 6.updated 数据变化后的钩子 7.beforeDestroy 实例销毁之前调用 8.destroyed Vue 实例销毁后调用
示意图
示意图
v-show 有更高的渲染成本 v-if有更高的切换成本
示意图
示意图
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
示意图
image
HTTP(HyperText Transfer Protocol:超文本传输协议)是一种用于分布式、协作式和超媒体信息系统的应用层协议
HTTPS HTTPS(Hypertext Transfer Protocol Secure:超文本传输安全协议或HTT Pover SSL)是一种透过计算机网络进行安全通信的传输协议
image.png
image.png
image