vue
文章平均质量分 77
茅坤宝骏氹
语言:Java、C/C++、C#、Python、Linux Shell。
框架:Spring、Spring MVC、Spring Boot、Spring Cloud、Hibernate、Mybatis、Freemarker、Velocity。
前端:HTML5、CSS3、JavaScript、Bootstrap、JQuery、Vue、React。
数据库:oracle、mysql、MongoDB、HBase。
缓存:Memcache、Redis。
消息队列:kafka。
大数据:Hadoop、Hive、Sqoop、Flume、Spark、Strom、OpenTSDB、Druid。
展开
-
详解Vue中watch的高级用法
转载自详解Vue中watch的高级用法我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下。假设有如下代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <div> <p>FullName: {{fullN...转载 2021-01-03 20:58:25 · 274 阅读 · 0 评论 -
vue-cli2、vue-cli3脚手架详细讲解
转载自vue-cli2、vue-cli3脚手架详细讲解前言: vue脚手架指的是vue-cli它是vue官方提供的一个快速构建单页面(SPA)环境配置的工具,cli 就是(command-line-interface ) 命令行界面。vue-cli是基于node环境利用webpack对文件进行编译、打包、压缩、es6转es5等一系列操作。目前vue-cli已经升级到了3....转载 2020-03-29 12:25:26 · 1624 阅读 · 0 评论 -
vue 动态修改路由参数
转载自 vue 动态修改路由参数import merge from 'webpack-merge'; 修改原有参数 this.$router.push({ query:merge(this.$route.query,{'maxPrice':'630'})}) 新增一个参数:this.$router.push({ query:merge(this.$ro...转载 2018-07-08 09:45:55 · 4258 阅读 · 2 评论 -
vue-beauty 的v-data-table数据单元不换行
原因由于css样式.ant-table-tbody>tr>td, .ant-table-thead>tr>th { padding: 16px 8px; word-break: keep-all; white-space: nowrap; /*强制不换行*/}只需覆盖white-space的值就可以如:.ant-table...原创 2018-07-09 19:35:52 · 3804 阅读 · 0 评论 -
Vue.js 定义组件模板的七种方式
转载自 Vue.js 定义组件模板的七种方式在 Vue 中定义一个组件模板,至少有七种不同的方式(或许还有其它我不知道的方式):字符串模板字面量x-template内联模板render 函数JSF单文件组件在这篇文章中,我将通过示例介绍每个选项,并探讨利弊。以便你知道在任何特定情况下最适合的是哪一种。1. 字符串默认情况下,模板会被定义为一个字符串。我想我们的观点会达成一致:字符串中的模板是非常...转载 2018-07-08 09:46:08 · 488 阅读 · 0 评论 -
vue.js 接收url参数
转载自 vue.js 接收url参数1) 路由配置传参方式在配置路由时 例如 "/firewall/authorize/:uid/:uname/:token"页面url为 http://XXX.com/firewall/authorize/23/zhangman/232454js 接收方式 this.$route.params.uid,2) ?传参方式例 http://XXX.com/fire...转载 2018-07-08 09:46:30 · 1092 阅读 · 0 评论 -
Vue开源项目库汇总
转载自 Vue开源项目库汇总最近做了一个Vue开源项目库汇总,里面集合了OpenDigg 上的优质的Vue开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star。UI组件element ★9305 - 饿了么出品的Vue2的web UI工具套件Vux ★6802 - 基于Vue和WeUI的组件库mint-ui ★4776 - Vue 2的移动UI元素...转载 2018-07-09 19:35:44 · 510 阅读 · 0 评论 -
优化 Vue 项目编译文件大小
转载自 优化 Vue 项目编译文件大小与其说是优化 Vue,不如说主要是在 webpack 打包的配置中做些文章,使得 Vue 编译后的文件尽可能的小。以下介绍自己在项目中进行优化的过程,其中的内容也许并不适合于每个项目,但整体思路是差不多的。定位问题要想进行优化,首先我们得清楚问题所在。即:是哪些代码/依赖包导致最后的编译文件过大?这里,我们需要使用 webpack-bundle-analyz...转载 2018-07-14 10:57:49 · 1437 阅读 · 0 评论 -
Vue动态组件
转载自 Vue动态组件在动态组件上使用 keep-alive我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件:<component v-bind:is="currentTabComponent"></component>当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。例如我们来展开说一说这个多标签界面:Posts...转载 2018-07-15 09:36:46 · 518 阅读 · 0 评论 -
Vue异步组件
转载自 Vue异步组件在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块。为了简化,Vue 允许你以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数,且会把结果缓存起来供未来重渲染。例如:Vue.component('async-example', function ...转载 2018-07-15 09:36:30 · 1065 阅读 · 2 评论 -
Vue的this
一、vue编译模块(1)模块域中导出对象域export default { data() { return { msg: '' }; }};A.function定义函数I、模块导出对象的各关键字的属性值如data的值export default { props:['propA'}, ...原创 2018-07-16 12:33:51 · 1086 阅读 · 0 评论 -
vue-router 如何在当前路由下重新点击当前路由的router-link实现刷新
转载自 vue-router 如何在当前路由下重新点击当前路由的router-link实现刷新代码:<router-link to="/home" @click.native="flushCom">首页</router-link> export default { ... ... methods:{ flushCom:functi...转载 2018-09-16 13:47:23 · 3102 阅读 · 1 评论 -
vue开源项目
转载自 vue开源项目一、前台UI组件库1.Element优点:中文文档,ui种类比较全,ui设计简洁清晰缺点:不够有特点 2.iView优点:和element的UI很相似,有一些多的补充,可以相互替换缺点:仍然没有什么特色 3.Vuetify优...转载 2018-09-15 11:06:50 · 1475 阅读 · 0 评论 -
vue2.0 $router和$route的区别
转载自 vue2.0 $router和$route的区别在vue2.0里页面参数是 this.$route.query或者 this.$route.params 接收router-link传的参数。在路由跳转的时候除了用router-link标签以外需要在script标签在事件里面跳转,所以有个方法就是在script标签里面写this.$router.push('要跳转的路径名'), 在写的时候...转载 2018-07-08 09:45:40 · 167 阅读 · 0 评论 -
require.ensure与require AMD的区别
转载自 webpack: require.ensure与require AMD的区别webpack: require.ensure与require AMD的区别简介require-ensure和require-amd的区别:require-amd 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调函数语法: require(depe...转载 2018-07-14 10:19:45 · 844 阅读 · 0 评论 -
Vue组件异步加载
一、vue的非编译模式基于requireJS+VUE搭建的环境(1)异步加载组件路由配置信息define(function(){ return [{ name: "my-component", path: "/myComponent", component: resolve => requ...原创 2018-07-14 10:41:05 · 2832 阅读 · 0 评论 -
Vue.js2.0开发环境搭建(二)
转载自 Vue.js 2.0从入门到放弃---入门实例(二)前面一篇博客介绍了从零开始准备Vue.js所需的一些环境和工具。这片博客就来跟大家探讨一下Vue.js 2.0中的一些特性,以及一个小实例,通过实例来跟大家分享,想必更容易理解。先来看一下,看完这篇博客,你会做出什么样的效果吧。就是这样的一个小的demo,其中主要用到了vue-router 2.0 和vue的单文件组件,这里再细分一下如...转载 2018-07-09 19:31:39 · 416 阅读 · 0 评论 -
Vue.js2.0开发环境搭建(三)
转载自 Vue.js2.0从入门到放弃---入门实例(三)今天就来简单说一下vue-resource,这是vue的一个与服务器端通信的HTTP插件,用来从服务器端请求数据。话不多说,直接上干货吧。这里PS一下,有人反映之前的代码下载下来,运行会报错而且会有上百个之多,这是因为在我初始化项目的时候没有启用eslint,eslint是用来检测代码风格的,我是觉得格式要求严的有点过分,所以禁用了esl...转载 2018-07-09 19:31:49 · 249 阅读 · 0 评论 -
Vue.js2.0开发环境搭建(四)
转载自 vuejs2.0从入门到放弃--入门实例(四)最近,很多小伙伴有疑惑,想学vuejs必须先了解复杂的构建工具和命令行操作吗!!答案是否定的!对于很多做前端的同学,涉及到命令行和构建工具,想必大家都比较发憷,没有人指导,根本就不理解不了命令行的操作,导致好多想学习vue的同学被扼杀在摇篮里。今天就跟大家一起开启,没有命令行的vue学习之旅,本文适合小白,高手自动忽视。现在,大部分的vue...转载 2018-07-09 19:32:01 · 192 阅读 · 0 评论 -
axios使用说明
转载自 axios使用说明安装使用 npm:$ npm install axios使用 bower:$ bower install axios使用 cdn:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>Example执行 GET 请求// 为给定 ID 的 user 创建请求axi...转载 2018-07-09 19:31:11 · 332 阅读 · 0 评论 -
vue 指令基本使用大全
转载自 vue 指令基本使用大全指令解释:指令 (Directives) 是带有 v- 前缀的特殊属性作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM常用指令v-textv-htmlv-bindv-text解释:更新元素的 textContentv-html解释:更新元素的 innerHTMLv-bind作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM语...转载 2018-07-09 19:30:27 · 21084 阅读 · 1 评论 -
Vue动态路由匹配
转载自 动态路由匹配我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果:const User = { template: '<div>User</di...转载 2018-07-09 19:27:36 · 1588 阅读 · 0 评论 -
Vue 阻止事件冒泡
转载自 Vue2学习笔记:事件对象、事件冒泡、默认行为1.事情对象<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/d转载 2018-07-08 09:39:18 · 1766 阅读 · 0 评论 -
vue-beauty UI库
vue-beauty UI库文档地址一、全局配置全局CSS样式Polyfill二、组件(1)普通Button 按钮Icon 图标(2)布局Grid 栅格Layout 布局MorePanel 更多条件(3)导航Affix 固钉Breadcrumb 面包屑Menu 导航菜单Dropdown 下拉菜单Pagination 分...原创 2018-07-08 09:39:35 · 4909 阅读 · 0 评论 -
vue的Prop属性
转载自 PropProp 的大小写 (camelCase vs kebab-case)HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:Vue.component('blog-post', { // 在 Ja...转载 2018-07-08 09:41:08 · 2264 阅读 · 0 评论 -
vue非编译的模块化写法
一、构建require.js环境(1)网页设置require.js<!DOCTYPE html><html lang="en"><head> </head><body><div id="app"> <transition name="tsfade&原创 2018-07-08 09:42:03 · 1961 阅读 · 0 评论 -
vue组件自定义v-model
转载自 vue组件,自定义v-model方法1<my-component v-model="obj"></my-component> 在使用my-component组件时,为了实现双向绑定。1234567891011121314Vue.component('my-component', { props: { obj: Object, }, ...转载 2018-07-08 09:44:29 · 1154 阅读 · 0 评论 -
vue watch监听对象
一、watch的APIvm.$watch( expOrFn, callback, [options] ) 参数: {string | Function} expOrFn {Function | Object} callback {Object} [options] {boolean} deep {boolean} immediate 返回值:{Fun...原创 2018-07-08 09:44:45 · 1963 阅读 · 0 评论 -
Vue.js2.0开发环境搭建(一)
转载自 Vue.js2.0从入门到放弃---入门实例(一)最近,vue.js越来越火。在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用Vue.js 的构建工具都已经升级到2.0版本了),经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好...转载 2018-07-09 19:31:27 · 1455 阅读 · 0 评论