(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 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
HTTP(HyperText Transfer Protocol:超文本传输协议)是一种用于分布式、协作式和超媒体信息系统的应用层协议
HTTPS
HTTPS(Hypertext Transfer Protocol Secure:超文本传输安全协议或HTT Pover SSL)是一种透过计算机网络进行安全通信的传输协议
请点赞!因为你的鼓励是我写作的最大动力!
吹逼交流群:711613774
(33)Vue购物车的更多相关文章
- Vue购物车实例
<div class="buyCarBox" id="buyCarBox" v-cloak> <div class="haveClo ...
- vue 购物车练习
本人看了vue官网上的教程后,感觉对vue的依稀有点了解,决定动手练习个小功能项目,就找了购物车本项目.原文链接:http://blog.csdn.net/take_dream_as_horse/ar ...
- vue购物车和地址选配(三)
参考资料:vue.js官网 项目演示: 项目源代码: 核心代码及踩坑 删除: new Vue({ el:'#app', data:{ productlist:[], totalMoney:0, che ...
- vue购物车功能源码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- Vue购物车
index.html <!DOCTYPE html><html> <head> <meta charset="utf-8&quo ...
- VUE购物车示例
代码下载地址:https://github.com/MengFangui/VueShoppingCart 1.index.html <!DOCTYPE html> <html lan ...
- vue购物车的实现
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue购物车动画效果
使用动画的三个函数 v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter=&q ...
- 第八十三篇:Vue购物车(四) 总价计算
好家伙, 1.总价计算 来了,又先是一波分析: 我们用一个计算属性amt 我们把item中被勾选的项用一个过滤器过滤器来 然后用一个循环相加,把商品的价格乘以商品的数量, 把这个总值返回出去, 然后组 ...
随机推荐
- ADO,net 实体数据模型增、删、改,浅谈
第一步:建立ADO.net数据模型,一步步操作就行 第二步:画个简单的测试界面 第三步铺代码 using DevComponents.DotNetBar.SuperGrid; using DevCom ...
- OpenJML入门
目录 OpenJML 获取 下载 使用 Linux Windows Parsing and Type-checking Extended Static Checking Runtime Asserti ...
- IOS - 总结下swift使用GCD 多线程(二)GCD和DispatchQueue
1.前言 iOS中处理多核并发的技术有两种分别是:`Grand Central Dispatch`(以下简称`GCD`)和`NSOperationQueue`框架.iOS开发的老司机们在程序开发中处 ...
- 【转载】C#中List集合使用Remove方法移除指定的对象
在C#的List集合操作中,有时候需要将特定的对象或者元素移除出List集合序列中,此时可使用到List集合的Remove方法,Remove方法的方法签名为bool Remove(T item),it ...
- 关于移动端图片浏览,previewimage的使用
我相信在移动端项目中,大家都会遇到图片浏览的问题,像qq,微信,微博,淘宝,当你点击图片时,图片会放大全屏显示,双击图片时图片继续放大查看,双指左右滑动也可以放大,当你再次点击时图片,图片恢复原始大小 ...
- JavaScript前端图片压缩
实现思路 获取input的file 使用fileReader() 将图片转为base64 使用canvas读取base64 并降低分辨率 把canvas数据转成blob对象 把blob对象转file对 ...
- java设计模式--观察者模式和事件监听器模式
观察者模式 观察者模式又称为订阅—发布模式,在此模式中,一个目标对象管理所有相依于它的观察者对象,并且在它本身的状态改变时主动发出通知.这通常透过呼叫各观察者所提供的方法来实现.此种模式通常被用来事件 ...
- django learn step
django开发: 1 安装python环境 官网下载后安装 或者安装anacondaconda env list anaconda相关操作: 查看环境 conda env list 创建环境 con ...
- 【MySQL】SQL语句基础
一.操作数据库 1.1 创建数据库 1.2 查看数据库 1.3 修改数据库 1.4 删除数据库 1.5 选择数据库 二.操作表 2.1 创建表 2.2 查看表 2.3 修改表 2.4 删除表 三.操作 ...
- c# Group类