(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中被勾选的项用一个过滤器过滤器来 然后用一个循环相加,把商品的价格乘以商品的数量, 把这个总值返回出去, 然后组 ...
随机推荐
- 贴一个markdown语法,mweb自带的说明
Markdown 语法和 MWeb 写作使用说明 Markdown 的设计哲学 Markdown 的目標是實現「易讀易寫」.不過最需要強調的便是它的可讀性.一份使用 Markdown 格式撰寫的文件應 ...
- js加减乘除函数
经常用到算数的时候,可以直接用:// 除法函数function accDiv(arg1, arg2) { var t1 = 0, t2 = 0, r1, r2; try { t1 = arg1.toS ...
- CSS3 @font-face 规则
指定名为"myFirstFont"的字体,并指定在哪里可以找到它的URL: @font-face { font-family: myFirstFont; src: url('San ...
- Unity VS2017 调试外部DLL
之前写的C++ DLL VS2012 都可以附加进程的方式调试Unity中的调用 这次用了一个C# DLL VS2017 在Unity 2018上无法附加进程的方式调试 经过一番折腾, 主要是两个问题 ...
- 【转载】 C#中使用CopyTo方法将List集合元素拷贝到数组Array中
在C#的List集合操作中,有时候需要将List元素对象拷贝存放到对应的数组Array中,此时就可以使用到List集合的CopyTo方法来实现,CopyTo方法是List集合的扩展方法,共有3个重载方 ...
- Linux的网络不通流程
a:xshell连不上的问题第一步:检查网络适配器,是否禁用vmware的虚拟机网卡第二步:检查vmware net8的地址是否为10.0.0.1第三步:检查系统的vmware服务是否启动第四步:检查 ...
- 初始化构建React+Ts项目时出现:Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError
具体错误 ERROR in ./src/index.tsx Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssS ...
- 用c#监控网络流量
using System; using System.Text; using System.Net; using System.Net.Sockets; using System.Runtime.In ...
- WebStorm 2019激活方法
1.先下载安装JetBrains WebStorm 2019,安装完成先不要运行2.接下来对软件进行注册破解,首先以记事本的方式打开hosts文件,将代码添加至hosts文件屏蔽软件联网:hosts文 ...
- kubeadm添加新master或node
一.首先在master上生成新的token kubeadm token create --print-join-command [root@cn-hongkong nfs]# kubeadm toke ...