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。