随笔分类 - Vue
摘要：在Vue的组件内也可以定义组件，这种关系成为父子组件的关系； 如果在一个Vue实例中定义了component-a，然后在component-a中定义了component-b，那他们的关系就是： Vue实例 -- 根组件 root component-a – 相对于root 这是子组件，相对于comp
阅读全文
摘要：template模板引用 在component的template中书写大量的HTML元素很麻烦。 Vue提供了<template>标签，可以在里边书写HTML，然后通过ID指定到组建内的template属性上； 示例： 由图可知自定义组件的count的值是自增的，是独立的，互不影响。 vue代码：
阅读全文
摘要：在上篇博客中介绍了组件，在注册组件的简写中就用到了全局组件 组件可分为全局组件与局部组件； 全局组件： 在全局API中的Vue.component注册；该项目中所有Vue实例内均可以使用； 局部组件： 在Vue实例中的components选项中注册； 只能在本实例中使用； 现在创建两个Vue实例来进
阅读全文
摘要：什么是组件？ 组件Component,可扩展HTML元素，封装可重用的代码。通俗的来说，组件将可重用的HTML元素封装成为标签方便复用； 组件的使用： 1、使用全局的方法Vue.extend创建构造器； 2、再使用全局的方法Vue.component注册组件； 注意：在Vue.component里需
阅读全文
摘要：在前面的博客我们一直在操作单个元素的过渡，如果是对多个元素过渡，例如列表，这时就要用到<transition-group>这个组件了； 如何使用：将要操作的列表元素放在<transition-group></transition-group>内，其他与<transition>基本一致； 注意：在<t
阅读全文
摘要：进入/离开过渡效果：Vue在插入、更新或移除DOM时，可以设置一些动画效果； 如何使用过渡效果：利用<transition></transition>组件将需要应用的过渡效果的DOM对象包裹住，然后书写对应的样式； 过渡的类名：过渡效果的样式是类样式，在进入/离开的过渡中有6个类样式的切换，分别是：
阅读全文
摘要：自定义指令 钩子函数 自定义指令 除了内置指令，Vue也允许用户自定义指令； 注册指令：通过全局API Vue.directive可以注册自定义指令； 自定义指令的钩子函数： bind； inserted； update； componentUpdated； unbind； 自定义指令的使用：在自定
阅读全文
摘要：在上一篇博客中我们知道生命周期的方法： 生命周期： vm.$mount：手动挂载Vue实例； vm.$destroy：销毁Vue实例，清理数据绑定，移除事件监听； vm.$nextTick：将方法中的回调函数，延迟到DOM更新后； 需要进行手动的挂载实例： 在vue中加入： 或者： vm.$dest
阅读全文
摘要：常用的实例方法： 数据： vm.$set：设置属性值； vm.$delete：删除属性值； vm.$watch：观测数据变化； 生命周期： vm.$mount：手动挂载Vue实例； vm.$destroy：销毁Vue实例，清理数据绑定，移除事件监听； vm.$nextTick：将方法中的回调函数，延
阅读全文
摘要：Vue实例属性： vue实例直接调用的属性； 常用的实例属性： vm.$data：获取属性； vm.$el：获取实例挂载的元素； vm.$options：获取自定义选项/属性； vm.$refs：获取通过ref属性注册的DOM对象； vm.$data：获取属性 vue代码； HTML： 在控制台可以
阅读全文
摘要：计算属性的基本使用 初始小示例： 代码： 直接在HTML中使用toUpperCase()方法，这样使得代码太长，影响代码的逻辑；因此就引入了计算属性的应用 Vue计算属性： 更强大的属性声明方式，可以对定义的属性进行逻辑处理与数据监视; 计算属性的使用； https://cn.vuejs.org/v
阅读全文
摘要：Vue生命周期 Vue生命周期：Vue实例从创建到销毁的过程，称为Vue的生命周期； Vue生命周期示意图：https://cn.vuejs.org/v2/guide/instance.html#生命周期图示； Vue生命周期钩子：又称为Vue生命周期钩子方法/函数，是Vue为开发者提供的方法，我们
阅读全文
摘要：代码学习过滤器 过滤器介绍：过滤模型数据，在数据显示前做预处理操作； 内置过滤器：在1.x中，Vue提供了内置过滤器，但是在2.x中已经完全废除； 解决办法： （1）使用第三方库来替代1.x中的内置过滤器； （2）使用自定义过滤器； 自定义过滤器： a.全局配置：Vue.filter( id, [d
阅读全文
摘要：实现修改商品的数量： 加入的代码： css: HTML： 由图可知点击商品数量减的时候会减到负数，所以需要做一个判断，如果数量为0，不能减下去： 加入判断之后的效果图： 加入判断的代码： 增加入库日期： 最终效果： 加入的代码： vue添加了addDate假数据，以及调节获取当前日期的格式： 添加的
阅读全文
摘要：通过索引进行删除，进行测试，是否获取其索引： 测试效果： 测试代码，在vue中定义一个空的数组，以便后面进行数据的绑定： 测试的HTML代码： 实现选择删除商品功能，通过遍历索引数组： 为了保证数据列表从小排到大: 测试使其列表从小排到大 测试代码： 最终实现该功能的总代码： 1 <!DOCTYPE
阅读全文
摘要：实现删除商品功能 根据索引来进行删除商品： 实现删除商品的HTML： 实现删除商品的vue： 实现删除商品后提示信息的显示： 实现提示信息的HTML： 其fontColor的css： 如果商品列表中无数据的话，就会合并7列，并且显示暂无商品的提示，该数量7在vue代码中进行定义变量属性值，使用时在H
阅读全文
摘要：最终修改的页面效果： 修改的css： 将 商品列表 和 添加商品 标题的class改为sub_title 总的代码： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>商品管理 创建页面与部分数据</title
阅读全文
摘要：进行添加button，以及商品列表的创建 html: 在vue代码中创建方法，以及创建假数据,进行对两个button事件处理： 添加的vue代码： html: 实现以上商品的添加以及重置信息总的代码： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta chars
阅读全文
摘要：logo的路径： 页面的初始布局： 初始的HTML： 初始css： 初始vue： 进行了定义变量和变量的引入以及使用了v-model与v-for进行遍历数组： 使用了v-model,v-for之后的代码： vue代码： 总的代码： 1 <!DOCTYPE html> 2 <html> 3 <head
阅读全文
摘要：普通的css引入： 变量引入： 通过定义一个变量fontColor来通过v-bind来进行绑定在h3z的class中 注意：v-bind后面必须跟一个属性或者一个方法 当然我们也可以通过数组的形式引入多个class： html: 使用json对象的方式，在json中也可以使用多种方式 key是样式的
阅读全文
浙公网安备 33010602011771号