Vue
文章平均质量分 75
bugsayend
海纳百川
展开
-
Vue中基于moment.js实现日期格式化
一. moment.js模块的安装moment.js模块是一个优秀的js日期处理模块,支持UTC格式时间的序列化npm install --save-dev moment@2.22.2二. 基于moment实现日期格式化1.1 当前日期减一年moment().add(-1, 'year').format('YYYY-MM-DD')1.2 获取当天结束的时间moment().endOf('day').format("YYYY-MM-DD hh:mm:ss")1.3 获取一天前开始的时间原创 2021-06-30 11:05:45 · 614 阅读 · 0 评论 -
iview组件篇之布局
一.iview中24栅格布局介绍1.1 iview24列栅格布局介绍引入概念:Row代表一行Col代表一列Card代表着卡片<template> <div> <Row> <Col v-for='n in 24' span="1" :key='n'> <Card :title=n> {{ n }}列 </Card> </Col&g原创 2021-05-31 00:05:49 · 1371 阅读 · 0 评论 -
IView-UI组件篇之主题,语言,导航,路由
一.IView组件项目目录结构iview-ui一套基于vue.js的前端组件库,iview中定制了一些自己组件的样式以及组件标签的书写规范,是一套非常流行的前端组件1.1 基于iview创建的项目基于ivew创建的项目和我们通过webpack创建的项目区别在于会新增plugins插件目录,而且下面会新建一个iview.js的js文件,其中就是用来对iview进行实例和引入import Vue from 'vue'import ViewUI from 'view-design'Vue.use(原创 2021-05-30 13:54:56 · 1585 阅读 · 4 评论 -
Vue组件开发之插槽
一.Vue组件开发中插槽1.1 插槽的作用插槽的作用是为了拓展组件的灵活性,因为我们定义组件时,组件中的内容基本被固定,所以在组件中预备插槽时可以拓展组件的功能,在引用组件时可以修改组件内容的显示<!DOCTYPE html><html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content="width=device-w原创 2021-04-20 02:06:50 · 176 阅读 · 0 评论 -
Vue父子组件之间属性访问
一.父子组件之间属性访问通常父子组件是可以进行属性访问的,例如父组件调用子组件中的方法,变量等,这些都是可以通过拿到各自对应的父子组件对象,然后调用其属性,例如:父组件访问子组件中的属性有两种方式在父组件中使用this.$children拿到所有的子组件数组对象,然后索引访问对应子组件中的方法,变量等属性通过this.$refs(子组件名称来访问),这种相比于第一种就是可以通过子组件的具体名称来访问了,避免索引顺序改变问题1.1 父组件访问子组件(this.$children,this.$re原创 2021-04-20 01:30:00 · 383 阅读 · 0 评论 -
Vue进阶之组件化开发
一.组件化思想介绍组件化开发,本质就是将相同功能的模块开发成 一个个可以复用的小组件,然后通过引入各个组件实现一个完整页面的开发,组件化开发就像树结构一样,每一个组件都是树形结构上的一个分支节点1.1 Vue实例创建组件在Vue中创建组件构造器有几种实现方式,但是大体思想包含3步,如下:1.创建组件构造器2.注册组件3.在Vue实例对象中使用组件组件第一种创建使用方法,基于extend方式:<!DOCTYPE html><html lang="zh"> &l原创 2021-04-18 16:07:41 · 284 阅读 · 0 评论 -
Vue中v-model表单绑定几种实现方式
一.单个复选框checkbox单个复选框对应v-model绑定的数据类型为bool值类型,即选中后v-model绑定的值被修改成true,否则为false,因为只有两种状态,选中和不选中,废话不多说,直接上代码:<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewpot" content="width=de原创 2021-04-18 01:50:38 · 1960 阅读 · 0 评论 -
Vue实战小案例
一.表格数据添加,删除,搜索功能第一个小案例我们模拟购物车效果,实现表格中数据添加,删除,以及搜索功能,废话不多说,直接上代码<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewpot" content="width=device-width, initial-scale=1.0">原创 2021-04-17 19:01:09 · 1978 阅读 · 1 评论