(33)Vue购物车

时间:2022-06-25
本文章向大家介绍(33)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-9u4e00-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