(33)Vue购物车

旧城等待， 2021-09-29 09:56 437阅读 0赞

![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC01NDE3ZDE4ZWMyMzBhYjQxLnBuZw]

![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC03MTEzMTVlZWJiNTA4ZTk5LnBuZw]

computed:{ 
       lists(){
          return this.$store.state.list
       },
    },

用v-model来双向绑定input控制checkbox是否选中

![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC0wODVkYTNkNDAwZmQ1ZGI1LnBuZw]

![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC0yNzBmZTBlMDk4MDg2YWVkLnBuZw]

![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODUwOTA2My05MDkzY2Q2NjA1ZjhiMDcwLnBuZw]

![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODUwOTA2My1mZDdhYjM0NjNjOGY0Y2Y1LnBuZw]

Vue中双向数据绑定是如何实现的

![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC00Y2FlOGQ5NjVhZGMyNzU4LnBuZw]

![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC1iNTQ0OGY0NzIwZTQzYTUwLnBuZw]

![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC01MmZlNmVjMGMyODA0YTA4LnBuZw]

## 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 个

单层for循环

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的理解 ##

![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODUwOTA2My0yNjE1N2RlMGE5ZjlhZDVlLnBuZw]

Models: 数据层  
View: 展示层  
Controller: 控制器层

![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODUwOTA2My00NjU2ZWJkZGQ3ZmQxZjcxLnBuZw]

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

![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC1iMDQzNzBmYzhhYWZlNmRjLnBuZw]

![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC1kMTNmMGE4NWJiM2FjMDI2LnBuZw]

## v-show 与v-if的区别 ##

v-show 有更高的渲染成本 v-if有更高的切换成本  
![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC0zMzhiMzNhMDhmYWE4YzI3LnBuZw]

![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC1iNTg0MWFmN2JjYjE3Y2M4LnBuZw]

## 什么是Vuex？ ##

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC0xNDU3M2M2MTkwNjBkNzE2LnBuZw]

![image][]

HTTP（HyperText Transfer Protocol：超文本传输协议）是一种用于分布式、协作式和超媒体信息系统的应用层协议

HTTPS  
HTTPS（Hypertext Transfer Protocol Secure：超文本传输安全协议或HTT Pover SSL）是一种透过计算机网络进行安全通信的传输协议

![image.png][]

![image.png][image.png 1]

![image][image 1]

--------------------

## 请点赞！因为你的鼓励是我写作的最大动力！ ##

![官方微信公众号][aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWYwYzExMDQxYTc2NTYzZTc]

吹逼交流群：**711613774**

![吹逼交流群][aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWQ5ZDY0ZmEyOTAzNzFlYTUucG5n]

[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC01NDE3ZDE4ZWMyMzBhYjQxLnBuZw]: /images/20210724/48465279d8dd4fdd884d9ce54e1a3a63.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC03MTEzMTVlZWJiNTA4ZTk5LnBuZw]: /images/20210724/94e9fc575acf46769646e6327e0fb6d4.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC0wODVkYTNkNDAwZmQ1ZGI1LnBuZw]: /images/20210724/7a6d6aa333c044bd9d741fd4a4aea43c.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC0yNzBmZTBlMDk4MDg2YWVkLnBuZw]: /images/20210724/600a26e8b1754e8ea4cb75badf818db4.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODUwOTA2My05MDkzY2Q2NjA1ZjhiMDcwLnBuZw]: /images/20210724/3a91fc97786944d4a137119f89d81897.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODUwOTA2My1mZDdhYjM0NjNjOGY0Y2Y1LnBuZw]: /images/20210724/bfad2fdb2049444b912af8420f9d62b1.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC00Y2FlOGQ5NjVhZGMyNzU4LnBuZw]: /images/20210724/77e6d69cbbc7419c99b856fe19fa8a86.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC1iNTQ0OGY0NzIwZTQzYTUwLnBuZw]: /images/20210724/60b586cbadbb4d48b97cb9217ae2ed5c.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC01MmZlNmVjMGMyODA0YTA4LnBuZw]: /images/20210724/ddb0bcff44a443fc8312ff0d5622c1cf.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODUwOTA2My0yNjE1N2RlMGE5ZjlhZDVlLnBuZw]: /images/20210724/4127fb230aef46a4afef96203dd38dfb.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODUwOTA2My00NjU2ZWJkZGQ3ZmQxZjcxLnBuZw]: /images/20210724/f9ce4939fc634658a18b0838dd3a7926.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC1iMDQzNzBmYzhhYWZlNmRjLnBuZw]: /images/20210724/1e672aaee9424b3182848d637fd3dbaf.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC1kMTNmMGE4NWJiM2FjMDI2LnBuZw]: /images/20210724/5975efe007bf48078ce7b210b8a62f6f.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC0zMzhiMzNhMDhmYWE4YzI3LnBuZw]: /images/20210724/284507476de847e3ac0c2e6441f61c2d.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC1iNTg0MWFmN2JjYjE3Y2M4LnBuZw]: /images/20210724/b7caff5ef8c54e58ba3b093bbf130039.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTE1ODYxOC0xNDU3M2M2MTkwNjBkNzE2LnBuZw]: /images/20210724/2b079c2bfd7346a5995f7513b663d514.png
[image]: /images/20210724/418bfe5d6fcf4e5bb16777d3c2832904.png
[image.png]: /images/20210724/a6e190746c8749748b785d6859307bf0.png
[image.png 1]: /images/20210724/3cccfa5b630948ad8894751bf0eb6b6c.png
[image 1]: /images/20210724/be7f9a07017e4c9086c2353e896b61e1.png
[aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWYwYzExMDQxYTc2NTYzZTc]: /images/20210724/ae33e72789484f158aec4abd1c005dba.png
[aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWQ5ZDY0ZmEyOTAzNzFlYTUucG5n]: /images/20210724/b39d5b2f8c5b4ae398f92b2099d37477.png