(33)Vue购物车

作者: 魔王哪吒 | 来源:发表于2019-07-09 21:00 被阅读69次

(33)Vue购物车
2018-09-16
购物车页面
5.vue组件间的数值传递（兄弟）
子组件向父组件传值，自定义事件
用vue以对象的形式添加删除元素和购物车
vue购物车
vue 购物车
vue购物车
vue购物车

示意图

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 实例销毁后调用