专栏首页达达前端(33)Vue购物车

(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-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


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 哥们,你真以为你会做这道JVM面试题?

    我这里捞出一道code题要各位大佬来把玩把玩,如果你一眼就看出了端倪,那么恭喜你,你可以下山了:

    秃头哥编程
  • java内存分配

    转自:http://www.iteye.com/topic/634530 1.寄存器:最快的存储区, 由编译器根据需求进行分配,我们在程序中无法控制. 2...

    qubianzhong
  • 【C语言笔记】使用notepad++、MinGW来开发C程序

    Visual C++是Microsoft公司推出的用于开发C/C++程序的一款经典的IDE,很多高校都使用其作为教学工具来讲解C和C++。但是,Visual C...

    正念君
  • 深入理解CAS

    首先这篇文章是对前文深入理解ConcurrentHashMap中提到的CAS概念做补充的。其次是讲解CAS理论,我也看过很多关于CAS的博客,重复性,概念性都太...

    胖虎
  • 【C语言笔记】关于随机数的总结

    该函数返回0~RAND_MAX之间的随机数,在stdlib.h中可知道,RAND_MAX为0x7FFF,如:

    正念君
  • 【C语言笔记】static关键字

    C语言代码是以文件为单位来组织的,在一个源程序的所有源文件中,一个外部变量(注意不是局部变量)或者函数只能在一个源程序中定义一次,如果有重复定义的话编译器就会报...

    正念君
  • 【C语言笔记】extern关键字

    extern “C”的主要作用就是为了能够正确实现C++代码调用其他C语言代码。加上extern “C”后,会指示编译器这部分代码按C语言的进行编译,而不是C+...

    正念君
  • 【C语言笔记】内存笔记

    C语言程序需要载入内存才可以运行,其不同的数据保存在不同的区域。所使用的内存可以分成两类:一类是静态存储区,另一类是动态存储区。

    正念君
  • 程序员C语言快速上手——进阶篇(六)

    由上例可验证,数组的内存空间是连在一起的,它的第一个元素地址是0x22fe30,第二个元素的地址是0x22fe34,紧随其后。因为是int数组,每个元素都需要占...

    arcticfox
  • 【C语言笔记】char *str与char str[]的区别

    C语言中没有特定的字符串类型,常用以下两种方式定义字符串:一种是字符数组,另一种是指向字符串的指针。如下:

    正念君

扫码关注云+社区

领取腾讯云代金券