vuejs仿美团,饿了么项目之——商品数量加减篇

JavaScript017

vuejs仿美团,饿了么项目之——商品数量加减篇,第1张

首先,新增个商品数量的加减功能组件,就叫cartcontrol.vue吧。新增个底部购物车组件,叫shopcart.vue吧。在good.vue中引入并注册组件。

cartcontrol.vue中,通过props来接收list对象

因为我在json中没有设置数量这个key,所以需要全局用vue.set进行注册这个属性。在add方法中,如果没有这个属性,那么就注册,如果有,那么就count++

这里增加了一点小效果。应用了<transition>。 并且当数量减到0的时候。通过v-show来控制减号和数值是否显示。

写的比较粗糙,估计只有我自己能懂。这里要注意一下,在BScroll实例中要配置下click:true。使better-scroll滚动部分支持点击事件。否则加减号的点击事件无效。好吧~下篇写下底部的购物车功能。

内容简介:

1)Vue指令

2)computed和watch

3)生命周期钩子

4)组件间的传参

5)插槽

6)修饰符

7)nextTick()

前端三大框架:

Vue:尤雨溪开发

React:Facebook主导开发

Angular:谷歌主导开发

为什么选择Vue?

1.国内Vue的市场份额占比多

2.简单易上手,非常适合前端开发初学者学习

前置知识:

1.HTML、CSS和JS基础

2.了解Node和npm

3.webpack(可选,vue-cli已经封装了打包功能)

使用Vue的两种方式:

1.直接script标签引入vue.js文件

2.基于Node环境创建Vue项目(使用vue-cli初始化一个Vue项目)

前端框架与库的区别

• jquery 库 ->DOM(操作DOM) + 动画+ ajax请求

• 框架 ->全方位功能

一、指令

指令(Directives)是带有 v- 前缀的特殊属性。

插值表达式和v-text指令被直接解析为字符串;元素绑定 v-html 指令后,解析了msg 变量值里面的html标签,输出真正的html元素。

v-model也可用在自定义组件上。

5.v-for(列表渲染)

使用v-for时应绑定key属性,key属性可以用来提升v-for渲染的效率

Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括:

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

由于 JavaScript 的限制,Vue 不能检测数组、对象的以下变化:1. 利用索引直接设置数组的某一项 2. 对象属性的添加或删除

二、computed和watch

三、生命周期钩子

什么是Vue生命周期?

Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。

总共分为8个阶段:创建前/后,挂载前/后,更新前/后,销毁前/后。

1)beforeCreate

此时实例上只有一些生命周期函数和默认的事件,此时data computed watch methods上的方法和数据均不能访问。

2)created

此时可以读取data的值,并可以对其进行操作,把方法、计算属性也都挂载到了实例。但是依旧不能访问el,不能获取到DOM元素。

在这个钩子函数中,我们可以进行http请求,把请求到的数据储存在data中。

3)模板编译,把data里面的数据和vue语法写的模板编译成HTML

4)beforeMount

将编译完成的HTML挂载到对应虚拟DOM,此时还未挂载到页面上

5)mounted

编译好的HTML已挂载到页面上

6)beforeUpdate和updated

数据更新时调用,通常使用计算属性或侦听器取而代之

7)beforeDestroy

销毁所有观察者、组件及事件监听

8)destroyed

组件已经完全销毁,组件中的数据、方法、计算属性、过滤器等都已不可用。

四、组件间的通信

1.父子组件间的通信

父子组件通信可以总结为props向下传递,事件向上传递。

单向数据流:父级 prop 的更新会向下流动到子组件中,但反过来不行。

每个Vue实例都实现了事件接口:子组件使用 this.$emit(eventName,optionalPayload) 触发自定义事件。父组件在使用子组件的地方直接用v-on来监听子组件触发的事件。

父组件通过ref直接调用子组件中的方法。

子组件调用父组件中的方法:

1)子组件中通过 this.$parent.fatherMethod() 来调用父组件的方法

2)子组件用$emit向父组件触发一个事件,父组件监听这个事件

3)父组件通过props把方法传入子组件中(type: Function),在子组件里直接调用这个方法

2.兄弟组件间的通信

其中一种方法是让父组件充当两个子组件之间的中间件(中继);

另一种就是使用EventBus(事件总线),它允许两个组件之间直接通信,而不需要涉及父组件:

Vue原型上的方法:

五、插槽

3)作用域插槽

使用场景:

在使用ElementUI组件库的el-table组件时,表格的编辑和删除操作要用到作用域插槽。因为el-table组件,就是当前组件的子组件。通过作用域插槽很容易拿到当前表格行的索引和内容,这样就可以很方便地进行编辑、删除的操作。v-slot指令是Vue2.6之后,作用域插槽的新语法,旧语法(slot-scope)现在还保留,但3.0之后会移除。

六、修饰符

2.事件修饰符

vue提倡的是在方法中只有纯粹的数据逻辑,而不是去处理 DOM 事件细节,所以提供了事件修饰符用于DOM的事件处理。

3.按键修饰符

七、nextTick()

定义:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。(当数据更新了,在dom中渲染后,自动执行nextTick的回调)

应用场景:需要在视图更新之后,基于新的视图进行操作。

html>

<head>

<title>Hover</title>

<style type="text/css">

*{

padding: 0

margin: 0

font-size: 11pt

}

div{

float: left

width: 100px

margin-right: 20px

padding: 5px

border: 1px solid #999

background-color: #eee)

Vue.js介绍:

Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。

如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM。它通过一些特殊的HTML语法,将DOM和数据绑定起来。一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新。

当然了,在使用Vue.js时,你也可以结合其他库一起使用,比如jQuery。