养肥胖虎

摘要： 好家伙， 1.什么是自定义指令？ vue官方提供了v-text，v-for，v-model，v-if等常用的指令。除此之外vue还允许开发者自定义指令。 2.自定义指令的分类 vue中的自定义指令分为两类,分别是: ~私有自定义指令 ~全局自定义指令 3,私有自定义指令 在每个vue组件中,可以再d 阅读全文

摘要： 好家伙, 1.作用域插槽 插槽在定义的时候,可以定义一些属性,便于在父组件中使用 来看看代码: Article.vue组件中: <template> <div class="article-container"> <!-- 文章内容 --> <div class="header-box"> <!-- 阅读全文

摘要： 好家伙 1.什么是具名插槽？ 来简单理解一下， 具有自己名字的插槽，就是具名插槽 我们来尝试使用一下具名插槽: 在Article.vue组件中: <template> <div class="article-container"> <!-- 文章内容 --> <div class="header-b 阅读全文

摘要： 好家伙, 1.什么是插槽? 插槽是vue为组件的封装者提供的能力.允许开发者在封装组件时, 把不确定的,希望由用户指定的部分定义为插槽 我们依然可以把它理解为一个占位符 1.1.插槽的基本用法 试例项目目录如下: 在Left.vue组件中: <template> <div> <!-- 声明一个插槽区 阅读全文

摘要： 好家伙, 1.关于keep-alive 这是一个用于阻止组件自行销毁的插件 <!-- keep-alive可以把内部组件进行缓存,而不是销毁组件 --> 那么我们什么时候会用到他呢? 举个栗子 他来了,他来了,经典自增1按钮(太TM经典了) 上代码: Left.vue组件中: <template> 阅读全文

摘要： 好家伙， 1.什么是动态组件？ 动态组件指的是动态切换组件的限制与隐藏 2.如何实现动态组件渲染 vue提供了一个内置的<component>组件,专门用来实现动态组件的渲染. 可以将其看最占位符来用 2.1.其基本用法 <component is="Left"></component> //其中i 阅读全文

摘要： 好家伙, 1.实现总价的动态计算 商品数量被动态的改变后, 相应的总价同样会改变 所以我们需要重新计算总价格了 这个的实现并不难 我只要拿到商品的数量就好了 我们用一个计算属性计算出已勾选商品的总数量 在App.vue中 total(){ return this.list.filter(item=> 阅读全文

摘要： 好家伙, 1.商品数量的增减 我们把商品的数量增减独立出来,写成一个独立的组件Counter <template> <div class="number-container d-flex justify-content-center align-items-center"> <!-- 减 1 的按钮 阅读全文

摘要： 好家伙， 1.总价计算 来了,又先是一波分析: 我们用一个计算属性amt 我们把item中被勾选的项用一个过滤器过滤器来 然后用一个循环相加,把商品的价格乘以商品的数量, 把这个总值返回出去, 然后组件传值,把它渲染出来 App.vue中用于计算总价的计算属性amt: amt(){ //1.先fil 阅读全文

摘要： 好家伙， 继续完善购物车相应功能 1.如何实现全选和反全选 1.1.全选框的状态显示(父传子) 来一波合理分析: 在页面中,有三个商品中 三个商品中的第二个未选择, 我么使用一个计算属性(fullState)来遍历一遍三个商品的选择状态 遍历过程中发现第二个是false,另外两个为true 那么计算 阅读全文