Vue
关注
分享
扫一扫
ywb201314
兵法有言，知己知彼，百战不殆
展开
-
bootstrap-datetimepicker当隐藏时间选择器时触发hide事件
在开发过程中我们时常用到时间选择器，bootstrap-datetimepicker无疑是当下使用比较多的时间选择插件。在项目开发中遇到如下需求： 根据给定的起始时间及结束时间自动生成天数或小时数bootstrap-datetimepicker提供了hide事件!if (!ace.vars['old_ie']) $('#startTime1').datetimepicker({ format: 'YYYY-MM-DD HH:mm',//use this opti.转载 2020-09-24 15:42:22 · 906 阅读 · 0 评论 -
daterangepicker与vue集成，vue无法获得日期控件时间的修改解决方法
在后端管理项目中使用vue来进行前端项目的开发，但我们都知道Vue实际上无法监听由第三方插件所引起的数据变化。也无法获得JQuery这样的js框架对元素值的修改的。而日期控件daterangepicker又基于JQuery来实现的。因此，在实践中会出现在日期控件中点击修改了日期，而无法通过vue来获得对应的值。下面来说一下其中一种解决方案：主动触发Event事件。以下为相关内容的部分代码。首先引入日期控件daterangepicker相关依赖的js和css。<script type=转载 2020-09-24 15:11:16 · 608 阅读 · 0 评论 -
vue的axios拦截器实现未登录页面跳转
1.拦截器分为request请求拦截器和response响应拦截器PS：request请求拦截器：发送请求前统一处理，如：设置请求头headers、应用的版本号、终端类型等。response响应拦截器：有时候我们要根据响应的状态码来进行下一步操作，例如：由于当前的token过期，接口返回401未授权，那我们就要进行重新登录的操作。2.main.js文件中（先安装axios）import axios from 'axios'// 给Vue函数添加一个原型属性$axios指向axios.转载 2020-09-21 10:08:36 · 4131 阅读 · 0 评论 -
vue-cli3之router 和 router.beforeEach妙用
路由是前端非常重要的部分，那么在使用vue开发中也是必不可少的。vue router官方文档详细的介绍的关于router的一些功能和用法。这里呢我简单的记录下，在真实项目中，基于vue-cli3构建工具下，router 和 router.beforeEach的搭配使用。在讲之前呢，我们先简单了解一下beforeEach。constrouter=newVueRouter({...})router.beforeEach((to,from,next)=&...转载 2020-09-18 18:04:08 · 4109 阅读 · 0 评论 -
Vue.js中过滤器（filter）的使用
Vue.js 过滤器的基本使用（filter）vue中的过滤器分为两种：局部过滤器和全局过滤器1、定义无参全局过滤器 Vue.filter('msgFormat', function(msg) { // msg 为固定的参数 即是你需要过滤的数据 return msg.replace(/单纯/g, 'xxx') })完整示例 <div id="app"> <p>{{ ms转载 2020-09-18 17:15:01 · 460 阅读 · 0 评论 -
03 vue组件技术
系列文章导航01 Vue语法基础02 vue数据绑定与指令03 vue组件技术04 vue单文件组件定义与使用1 组件介绍组件是Vue.js最强大的功能之一。组件是可复用的Vue实例，且带有一个名字，通过组件封装可重用的代码，在较高层面上，组件是自定义元素。2 组件注册1.1 组件注册方式1组件名对应标签名，标签名不允许出现大写字母，因此组件名包含多个单词时需要采用kebab-case (短横线分隔命名) 命名。组件名称中如果用了大写字母，使用组件的时候需要转成keb转载 2020-09-10 11:52:24 · 162 阅读 · 0 评论 -
04 vue - 单文件组件定义与使用
系列文章导航01 Vue语法基础02 vue数据绑定与指令03 vue组件技术04 vue单文件组件定义与使用1 单文件组件的好处2 单文件组件的运行场景hbuilderx工具一下两种方式创建的项目才允许使用单文件组件：1）方式1：Vue项目(含vue-cli)2）方式2：uni-app项目3 组件的定义与使用3.1 组件的定义语法规范 1 2 3 4 5 6 7 8 9 .转载 2020-09-10 11:52:47 · 441 阅读 · 0 评论 -
Vue组件component创建及使用
组件化与模块化的区别 什么是组件：组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么功能，就可以去调用对应的组件即可 组件化与模块化的不同： 模块化：是从代码逻辑的角度进行分析，方便代码分层开发，保证每个功能模块的只能单一 组件化：是从UI界面的角度进行划分，前端的组件化，方便UI组件的重用。<!DOCTYPE html><html lang="en"&...转载 2020-09-09 17:19:00 · 278 阅读 · 0 评论 -
Vuejs自定义组件的四种方式
有个笑话想写在文章顶部，等捋完整篇文章思路开始动手的时候。哦豁~ 忘了。这是空档~先留一个空档，万一又想起来呢。正文：四种组件定义方式都存在以下共性(血泪史)：1.组件只能有一个根标签2.记住两个词全局和局部3.组件名称命名中‘-小写字母’相当于大写英文字母(hello-com 相当于 helloCom)而对于在HTML中自定义组件的时候有4种写法，不过也只是殊途同归，都是用template属性对应的只有一个根标签的HTML代码。1.全局组件定义...转载 2020-09-09 17:07:54 · 1368 阅读 · 0 评论 -
vue 组件 Vue.component 用法
定义：组件是可复用的 Vue 实例，且带有一个名字可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用1. 定义一个新组件。命名为 counter格式：1.组件名为"conter";2.data 数据属性：写函数;3.template 模板：写组件的内容（元素和触发的事件） Vue.component("counter",{ //1.组件名为"conter"; 2.data 写函数; 3.template 写组件的内容（..转载 2020-09-09 16:49:46 · 1866 阅读 · 0 评论 -
关于Vue.use()详解
问题相信很多人在用Vue使用别人的组件时，会用到 Vue.use() 。例如：Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时，就不需要用 Vue.use(axios)，就能直接使用。那这是为什么呐？答案因为 axios 没有 install。什么意思呢？接下来我们自定义一个需要 Vue.use() 的组件，也就是有 install 的组件，看完之后就明白了。定义组件生成模版 vue init webpack-simple custom-gl转载 2020-09-09 16:38:21 · 383 阅读 · 0 评论 -
浅谈Vue.use
先举个?我们先来看一个简单的事例首先我使用官方脚手架新建一个项目vue init webpack vue-demo然后我创建两个文件index.js plugins.js.我将这两个文件放置在src/classes/vue-use目录下接下来对这两个文件进行编写// 文件: src/classes/vue-use/plugins.jsconst Plugin1 = { install(a, b, c) { console.log('Plugin1 第一个参数转载 2020-09-09 16:36:52 · 185 阅读 · 0 评论 -
使用env文件切换开发环境
开发过程中经常遇到不小心切换错了接口地址从而打错生产包， 为了避免再次发生这种不必要的错误，总结了一下关于env文件在实际开发中的使用。首先我们在根目录新建三个 .env的文件.env无论开发环境还是生成环境都会加载.env.development开发环境加载这个文件.env.production生成环境加载这个文件env 文件需要声明运行的环境.env.dev 本地运行时会执行这个文件.env.production 生产环境执行这个文件...转载 2020-09-09 15:57:23 · 997 阅读 · 0 评论 -
比官方文档更易懂的Vue.js教程！包你学会！
2016年，乃至接下来整个2017年，如果你要问前端技术框架什么最火，那无疑就是前端三巨头：React、Angular、Vue。没错，什么jQuery，seaJs，gulp等都逐渐脱离了热点。面试的时候不吹上一点新技术，好像自己就不是搞前端的似的。当然，希望大家都是抱着好学的心来开始一门学艺的，不管怎样，求求你，请接着看下去吧~本系列文将会通过很多一目了然的例子和一个实战项目——组件库，来帮助大家学习Vue，一步一步来，毕竟这篇文章还有接下来的【升学篇】和【结业篇】呢。什么是Vue.js不管你想转载 2020-09-09 15:43:54 · 171 阅读 · 0 评论 -
ES6：export default 和 export 区别
export default 和 export 区别：1.export与export default均可用于导出常量、函数、文件、模块等2.你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用3.在一个文件或模块中，export、import可以有多个，export default仅有一个4.通过export方式导出，在导入时要加{ }，export default则不需要1.export//a.jsexport .转载 2020-09-09 13:34:19 · 178 阅读 · 0 评论 -
export 和 export default 的区别
export命令用于规定模块的对外接口。一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个 JS 文件，里面使用export命令输出变量。// profile.jsexport var firstName = 'Michael';export var lastName = 'Jackson';export var year = 1958;上面代码是profile.js文件，保存了用户转载 2020-09-09 13:31:45 · 149 阅读 · 0 评论 -
vue create 和 vue init 的区别
1. vue create是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档。使用方式：vue create 项目名称2. vue initvue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目.转载 2020-09-09 11:09:07 · 537 阅读 · 0 评论 -
js(=＞) 箭头函数
ES6标准新增了一种新的函数：Arrow Function（箭头函数）。为什么叫Arrow Function？因为它的定义用的就是一个箭头：x => x * x上面的箭头函数相当于：function (x) { return x * x;}箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ ... }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ ... }和return：x ..转载 2020-09-08 16:00:15 · 2705 阅读 · 0 评论 -
require和import的区别
当前端应用越来越复杂时，我们想要将代码分割成不同的模块，便于复用、按需加载等。require 和 import 分别是不同模块化规范下引入模块的语句，下文将介绍这两种方式的不同之处。1. 出现的时间、地点不同 年份 出处 require/exports 2009 CommonJS import/export 2015 ECMAScript2015（ES6） 2. 不同端(客户端/服务器)的使用限制CommonJS 模块化方案 requir.转载 2020-09-08 15:38:59 · 576 阅读 · 0 评论 -
require和import区别
区别1：模块加载的时间require：运行时加载import：编译时加载（效率更高）【由于是编译时加载，所以import命令会提升到整个模块的头部】test();import { test} from '/test';上面的代码不会报错，正常执行区别2：模块的本质require：模块就是对象，输入时必须查找对象属性import：ES6 模块不是对象，而是通过 export 命令显式指定输出的代码，再通过 import 命令输入（这也导致了没法引用 ES6 模块本身，因为它不是对转载 2020-09-08 15:37:47 · 168 阅读 · 0 评论 -
module.exports与exports，export与export default之间的关系和区别
首先我们要明白一个前提，CommonJS模块规范和ES6模块规范完全是两种不同的概念。CommonJS模块规范Node应用由模块组成，采用CommonJS模块规范。根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.expo转载 2020-09-08 15:36:20 · 122 阅读 · 0 评论 -
export default {} 和new Vue()区别
1.export default 的用法：相当于提供一个接口给外界，让其他文件通过 import 来引入使用。而对于export default 和export的区别:在JavaScript ES6中，export与export default均可用于导出常量、函数、文件、模块等，你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用，但在一个文件或模块中，export、import可以有多个，export default...转载 2020-08-28 10:07:00 · 182 阅读 · 0 评论 -
vue中export和export default的使用
1 export的使用比喻index.js要使用test.js中的数据首先在test.js文件中进行导出操作在index.js文件进行导入操作第一种方法:此时的输出结果是：注意:export 不能直接写成这样子 export{ "":"" // 这样会报错 ....}2 export default的使用test.js文件index.js文件中:输出的结果:注意:e...转载 2020-08-28 10:04:53 · 175 阅读 · 0 评论 -
npm 和 cnpm 的区别，你真的搞懂了嘛
1、 npm 和 cnpm 的区别相信很多人都不太明白 npm 和 cnpm 到底是什么东东， 为啥在国内要用 淘宝镜像使用 cnpm，（1） 两者之间只是 node 中包管理器的不同哟，（2） npm是node官方的包管理器。cnpm是个中国版的npm，是淘宝定制的cnpm(gzip 压缩支持) 命令行工具代替默认的npm:（3）如果因为网络原因无法使用npm下载，那cnpm这个就派上用场了。 一定切记切记，npm和cnpm只是下载器的不同，好像npm用人力板车去拉包，而cnp...转载 2020-08-26 17:41:42 · 19082 阅读 · 0 评论 -
最值得拥有的免费Bootstrap后台管理模板
在PHP开发项目中，后台管理因为面向群体相对比较固定，大部分以实现业务逻辑和功能。使用Bootstrap后台模板可以让后端开发很轻松的就展现给客户一个响应式的后台，节约前端开发的时间。下面PHP程序员雷雪松给大家分享一下最值得拥有的免费Bootstrap后台管理模板。AdminLTEAdminLTE是一个完全响应的后台管理模板。基于Bootstrap3框架。高度可定制，易于使用。适合许多屏幕分辨率从小型移动设备到大型台式机。GitHub AdminLTE地址：https://github.com/al转载 2020-08-26 13:24:44 · 339 阅读 · 0 评论 -
‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件
vue时，报’vue-cli-service’ 不是内部或外部命令，也不是可运行的程序 或批处理文件。罪该万死，怎么能忘记 npm install，如果你下载的淘宝镜像，也可以cnpm install。转载于:https://www.cnblogs.com/hellohero55/p/11162197.html...转载 2020-08-20 19:25:40 · 4971 阅读 · 0 评论 -
Vue前端开发报错提示“npm ERR! missing script: dev”的解决方案
记得刚开始学习vue的时候，问题各种loading，有点“举步维艰”的感觉，现在回想起来，这些都是你掌握一门技术的必经之路。最近团队里有个新来的童鞋，问到一个问题：执行npm run dev的时候出现“npm ERR! missing script: dev”报错。熟悉VUE的童鞋应该初步可以判断是配置的问题，应该是没有dev这个命令属性。解决方案根据同事的配置，可以了打开项目的配置文件：package.js里，找到"scripts": {}，如图：我们发现根本没dev的属性。正..转载 2020-08-19 12:03:23 · 23667 阅读 · 13 评论