----前端开发
该栏目为前端开发相关分享
互联网极客
执行力+团队合作+思考力=成功
展开
-
JavaScript获取时间工具类
在平时写报表的时候,经常会使用到获取今日、昨日、明日、星期、月、年等信息的函数,使用JS工具类可以很容易的实现上述功能,下面是我平时使用的getTime.js工具类获取日期,dates为0代表今日、为-1代表昨日、为1代表明日:function getDate(dates){var dd = new Date(); dd.setDate(dd.getDate()+dates)原创 2015-05-28 16:01:21 · 631 阅读 · 0 评论 -
vue系列文章(14)vue-cli脚手架,组件嵌套,全局组件注册和局部组件注册
首先新建我们自定义组件Users组件,并在组件中加入我们自己的内容,如下所示,自定义Users组件,并对users进行循环输出。<template> <div class="users"> <ul> <li v-for="user in users">{{user}}</li> </ul&...原创 2019-07-06 17:49:13 · 2604 阅读 · 0 评论 -
vue系列文章(15)属性传值props
父组件想往子组件进行传输数据,可以采用props进行传输。如下面的app.vue对users数据进行传输。如app.vue里面的users如下:data () { return { users:[ {name:"MiaoJie",position:"Web开发",show:false}, {name:"MiaoJie"...原创 2019-07-06 17:49:07 · 349 阅读 · 0 评论 -
vue系列文章(16)传值和传引用的类型和区别
父组件在向子组件进行传输内容的时候,如果传输的类型是array object,那么传递的是一个引用。如果父组件向子组件传递的是一个String,Number,boolean则传递的是一个值。下面对这两种情况进行代码演示。在子组件里增加一个按钮修改传递的值的情况,观察两个组件的内容是否变化。app.vue<template> <div id="app"> ...原创 2019-07-06 17:48:59 · 1099 阅读 · 0 评论 -
vue系列文章(17)利用事件传递将子组件值传递给父组件
从上一篇文章中可以看到。现在我们希望header里面的值传递给app父组件,将其title进行改变,并改变header和footer的title值。那么首先需要在子组件header里面进行声明一个方法methods: { changeTitle: function() { // this.title = "这是更改过后的title" this.$emit(...原创 2019-07-06 17:48:53 · 750 阅读 · 0 评论 -
vue系列文章(18)vue生命周期
vue文档上面提供的生命周期图示很详细,具体看下面生命周期中提供的一系列钩子函数非常重要,包含有:beforeCreate() ,created(),beforeMount(),mounted(),beforeUpdate(),updated(), beforeDestroy(),desctroyed(),下面对上面的一些钩子函数采用我们前面案例中的header.vue进行代码演...原创 2019-07-06 17:48:47 · 300 阅读 · 0 评论 -
vue系列文章(19)vue路由配置
vue路由配置相当重要,可以参考官方的路由文档。https://router.vuejs.org/zh/首先需要在我们的项目中安装路由模块npm install vue-router --save-dev安装以后我们就可以在我们的项目中引用vueRouter首先在main.js中引入下面的配置import VueRouter from 'vue-router'Vue.use...原创 2019-07-06 17:48:41 · 312 阅读 · 0 评论 -
vue系列文章(20) vue网络请求vue-resource
vue-resource和vue-router配置大致相同,它的目的就是讲后台的接口数据传输给前端进行显示。首先需要安装vue-resourcenpm install vue-resource --init-dev安装完成后需要在main.js里面引用vue-resourceimport VueResource from 'vue-resource'Vue.use(VueRes...原创 2019-07-06 17:48:34 · 324 阅读 · 0 评论 -
vue系列文章(21)路由指定名字和路由跳转方法
上一节对路由的跳转及路由的配置进行过简单介绍,首先是安装路由模块,采用npm install vue-router --save安装完成后引入路由模块在main.js中进行引入import VueRouter from 'vue-router';Vue.use(VueRouter)const routes = [{path: '/' ,name: 'homeLink',...原创 2019-07-16 20:24:59 · 2399 阅读 · 0 评论 -
vue系列文章(22)路由之二级路由和三级路由
上节中讲解了一级路由,不过大多数的网站,系统,都由二级路由及多级路由组成,下面讲述二级路由及三级路由,大多数以此类推。我们在main.js中引入二级路由所需要的页面// 二级路由import Contact from './components/about/Contact'import Delivery from './components/about/Delivery'imp...原创 2019-07-16 20:26:13 · 1887 阅读 · 0 评论 -
vue系列文章(23)vue路由的全局守卫路由router.beforeEach
正如其名,vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这些变化,或使用beforeRouteUpdate的组件内守卫。例如当一个导航在跳转时,用户未进行登录不进行跳转,需要登录后才能进行跳转到后...原创 2019-07-16 20:27:08 · 705 阅读 · 0 评论 -
vue系列文章(24)vue路由的路由独享守卫和组件内守卫-管理台权限控制案例
上节中对登录和注册的权限进行控制,采用的是全局路由守卫。但部分路由中遇到的是点击管理台的权限判断,如果有权限则进行跳转,如果没有则没法跳转,就用到了路由的独享守卫和组件内守卫的方法。路由独享守卫,可以在main.js的路由配置中加入你可以在路由配置上直接定义beforeEnter守卫:const routes = [ {path: '/',name: 'homeLi...原创 2019-07-16 20:28:16 · 1349 阅读 · 0 评论 -
vue系列文章(25)vue自定义指令,钩子函数
前面文章中,我们使用了很多vue提供 的指令,如v-mode ,v-on,v-show等。Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。举个聚焦输入框的例子,如下:我们在html中使用自定义的指令<template> <div id...原创 2019-07-16 20:29:15 · 303 阅读 · 0 评论 -
vue系列文章(26)vue路由传参
经常遇到这样的问题,某个连接中需要根据id或者value的值进行更改路由连接的值,那么如何给连接中带上参数呢,这就需要在router的连接中带上我们自己的参数值。如下面的路由连接是这样书写的。import ShowBlogs from './components/ShowBlogs'import AddBlog from './components/AddBlog'import Si...原创 2019-07-16 20:30:22 · 177 阅读 · 0 评论 -
vue系列文章(27)axios替换vue-resource
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。vue2.0之后,就不再对vue-resource更新,而是推荐使用axios,基于promise的HTTP请求客户端,可同时在浏览器和Node.js中使用。功能特性:1、在浏览器中发送XMLHttpRequests请求。2、在node.js中发送http请求。3、支持Promise...原创 2019-07-16 20:31:32 · 554 阅读 · 0 评论 -
Vue系列文章(13)vue cli脚手架
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供通过@vue/cli搭建交互式的项目脚手架。 通过@vue/cli+@vue/cli-service-global快速开始零配置原型开发。 一个运行时依赖 (@vue/cli-service),该依赖: 可升级; 基于 webpack 构建,并带有合理的默认配置; 可以通过项目内的配置文件进行配置...原创 2019-07-06 17:49:37 · 362 阅读 · 0 评论 -
vue系列文章(12)初始组件的应用
在注册一个组件的时候,我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了:Vue.component('my-component-name', { /* ... */ })该组件名就是Vue.component的第一个参数。你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候,我们强烈推荐遵循W3C ...原创 2019-07-06 17:49:22 · 275 阅读 · 0 评论 -
Select下拉框动态获取数据,并触发事件
做项目中遇到了Select动态获取数据,并当选中Select某个下拉框的时候,获取数据的ID,触发事件在页面中很简单的几行代码:队列: 对与下拉框中的数据,初始化的时候显示出来:在body里面这么写://初始化图形function init(){initServiceId();}对于initServiceId()函数用于初始化下拉框原创 2015-05-28 15:47:41 · 23623 阅读 · 0 评论 -
vue结合element-ui 的select 全选问题
下拉列表多选 问题通过操作 所有来进行全选 全不选问题element-ui 中 select记录下自己最近使用element-ui中的select多选问题在element中默认是指单纯多选,但是公司要求,需要有一个控制选择多选的值。测试许久终于整出来,特意记录一下思路element 中的组件<template> <el-select ...转载 2019-03-20 16:42:04 · 3627 阅读 · 3 评论 -
vue2.0使用transition过渡效果
先树下下过渡的CSS类名,1、v-enter-active:可以理解为组件显示的整个过程。2、v-enter:是组件显示的起始状态3、v-enter-to:是组件最后展示的状态4、v-leave-active:是组件隐藏的整个过程5、v-leave:是组件隐藏的起始状态。6、v-leave-to:是组件隐藏后的最终状态。一般来说2和6展示的效果一致。因为我们之前使用&l...原创 2019-06-24 21:47:11 · 261 阅读 · 0 评论 -
vue系列文章(1):对象绑定,属性绑定
html页面代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue.js</title> <script src="https://cdn.jsdelivr.net/npm/vue"></scri...原创 2019-07-05 16:26:52 · 1286 阅读 · 0 评论 -
Vue系列文章(2)事件绑定,鼠标点击事件
html代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue.js</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script&g...原创 2019-07-05 16:28:24 · 2069 阅读 · 0 评论 -
vue系列文章(3):事件修饰符
在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。为了解决这个问题,Vue.js 为v-on提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。<!-- 阻止单击事件继续传播 ...原创 2019-07-05 16:29:49 · 341 阅读 · 0 评论 -
Vue系列文章(4)键盘事件及键盘修饰符
在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为v-on在监听键盘事件时添加按键修饰符:<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="submit">你可以直接将KeyboardEvent.key暴露的任意有效按键名转换为 kebab-case 来作...原创 2019-07-05 16:30:45 · 551 阅读 · 0 评论 -
vue系列文章(5)双向数据绑定
你可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。v-model会忽略所有表单元素的value、checked、s...原创 2019-07-05 16:31:53 · 313 阅读 · 0 评论 -
vue系列文章(6)计算属性computed
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ message.split('').reverse().join('') }} </div>在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量message的翻转字符串。当...原创 2019-07-05 16:32:47 · 318 阅读 · 0 评论 -
vue系列文章(7)动态CSS类型绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用v-bind处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将v-bind用于class和style时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。<!DOCTYPE html><h...原创 2019-07-05 16:34:24 · 455 阅读 · 0 评论 -
vue系列文章(8)条件渲染
v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue.js</title> <script src="htt...原创 2019-07-05 16:35:24 · 217 阅读 · 0 评论 -
vue系列文章(9)v-for条件循环
基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法alias in expression,为当前遍历的元素提供别名:<div v-for="item in items"> {{ item.text }} </div>例子:<!DOCTYPE html><html lang="en"><head> &...原创 2019-07-05 16:39:23 · 2325 阅读 · 0 评论 -
vue系列文章(10)vue实战项目demo
我们要实现的图类似于下面的这样:点击使劲敲,下面的进度条进行减少,敲完后出现下面的图片。同时使劲敲的button消失,恢复原状后变成最上面的图。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue.js</ti...原创 2019-07-05 16:44:31 · 887 阅读 · 0 评论 -
vue系列文章(11):初始化多个实例对象
初始化多个vue实例对象很简单,需要对每个Vue赋值个对象,对每个对象进行操作即可。每个对象里面有各自的data,methods等<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue.js</title> <...原创 2019-07-06 17:49:28 · 909 阅读 · 0 评论 -
vue系列文章(28)axios全局配置
上节中我们对axios进行了简单的配置,对于每个文件都需要引入axios,现在我们可以对axios进行全局的配置,。在main.js中引入axiosimport axios from 'axios'// axios全局配置axios.defaults.baseURL = 'http://jsonplaceholder.typicode.com'这样的话,我们就可以在单页面中直接...原创 2019-07-16 20:32:55 · 431 阅读 · 0 评论