![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
蔡俊锋
这个作者很懒,什么都没留下…
展开
-
vue与thymeleaf结合使用注意事项
1.html模板页面中需要加入如下代码 <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">2.scrip...转载 2018-08-22 17:44:00 · 17971 阅读 · 4 评论 -
echart 不立即更新 解决首次加载动画问题 vue watch immediate
echart 不立即更新 解决首次加载问题 vue watch immediate watch:{ data:{ handler(val){ this.$nextTick(() =>{ this.init() }) }, immediate:false } },原创 2020-06-05 17:38:37 · 989 阅读 · 0 评论 -
我为什么要立刻放弃 React 而使用 Vue?
现在,Vue.js 在 Github 上得到的星星数已经超过了 React。这个框架的流行度在不断增长,由于它并没有像 Facebok(React)或 Google(Angular)那样的大公司支持,这种增长让人非常惊讶。我会在这篇文章里说明我对 Vue 流行的一些看法,以及为什么它能超过竞争者。由于 Vue 的设计哲学和特性与 React 十分相似,我会比较这两者,并说明为什么 Reac...原创 2018-12-05 17:20:18 · 457 阅读 · 0 评论 -
响应式滚动图懒加载 element ui el-carousel 组件优化代码
响应式滚动图懒加载 element ui el-carousel 组件优化代码 懒加载插件vue-lazyload//main.jsimport VueLazyload from 'vue-lazyload'Vue.use(VueLazyload, { preLoad: 1.3, attempt: 1, // 加载图片数量 listenEvents...原创 2018-11-27 10:33:37 · 5014 阅读 · 0 评论 -
Vue生命周期和钩子函数的一些理解
vue生命周期简介咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了。生命周期探究对于执行顺序和什么时候执行,看上面两个图基本有个了解了。下面我们将结合代码去看看钩子函数的执行。ps:下面代码可以直接复制出去执行<!DOCTYPE html><html><head> <title><...原创 2018-11-27 10:12:12 · 369 阅读 · 0 评论 -
element ui el-carousel 滚动图 vue 基于vue-lazyload图片懒加载、延迟加载 解决方案
vue-lazyload插件github地址:https://github.com/hilongjw/vue-lazyload#requirements效果是默认不加载图片,先用一个占位符图来代替,等使用图片的时再进行加载(比如滚动到图片的时候),如果真正的图片请求出错了,用默认的出错图片来进行占位一、安装插件$ npm install vue-lazyload --save二...原创 2018-11-06 15:14:51 · 6590 阅读 · 3 评论 -
vue 牛人发布的优秀资源 vue资源大全
Awesome Vue.js A curated list of awesome things related to Vue.jsResources Official Resources External Resources Job Portal Community Conferences Podcasts Youtube Channels Offici...转载 2018-10-18 14:35:33 · 11814 阅读 · 2 评论 -
vue的style绑定background-image url 写法
.login-container { background: url(‘~@/assets/login_images/login_background.png’);原创 2018-09-05 14:42:50 · 12725 阅读 · 4 评论 -
vue前端框架面试问题汇总,附答案
1、active-class是哪个组件的属性?嵌套路由怎么定义?答:vue-router模块的router-link组件。 2、怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 答:在router目录下的index.js文件中,对path属性加上/:id。 使用router对象的params.id 3、vue-router有哪几种导航钩子? 答:三种,一...转载 2018-08-06 15:31:14 · 2102 阅读 · 0 评论 -
vue-router路由懒加载(解决vue项目首次加载慢)
懒加载:----------------------------------------------------? 也叫延迟加载,即在需要的时候进行加载,随用随载。为什么需要懒加载? 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用...转载 2018-06-29 14:56:02 · 1291 阅读 · 0 评论 -
vue开发看这篇文章就够了 vue知识大全
Vue -渐进式JavaScript框架介绍vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的区别?Library库,本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用者代表:jQuery jQuery这个库的核心:DOM操作,即:封装DOM操...原创 2019-01-11 11:23:21 · 531 阅读 · 0 评论 -
vue echarts动态数据定时刷新
关键代码截图完整代码<template> <div class="block"> <div :class="className" :id="id" :style="{height:height,width:width}" /> </div></template><script&g...原创 2019-07-24 17:13:09 · 12539 阅读 · 3 评论 -
vue.js+webpack 为 img src 赋值的路径问题解决方法
首先,如果使用的是img标签那么可以这样data () { return { img: require('@/assets/SavingOverview/1.png') }}然后在template中<img :src="img" />如果使用的是背景图的方式,那么可以这样data () { return { ...原创 2019-03-25 14:31:27 · 1724 阅读 · 0 评论 -
vue面试题总汇
vue面试题总汇vue的底层原理?vue组件之间的通信?JS中判断数据类型的方法有几种?最常见的判断方法:typeof判断已知对象类型的方法: instanceof根据对象的constructor判断: constructor无敌万能的方法:jquery.type()vue与angular的区别?1.vue仅仅是mvvm中的view层,只是一个如jquery般的...原创 2019-02-22 15:26:53 · 5384 阅读 · 1 评论 -
vue路由跳转时 判断用户是否处于 登录状态
vue路由跳转时 判断用户是否处于 登录状态原创 2019-02-15 13:31:48 · 1869 阅读 · 0 评论 -
vue 父子组件传值以及方法调用,平行组件之间传值以及方法调用大全
vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道。基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好。vue常用的传值方式以及方法有:1. 父值传子(props) 1-1:解决一个项目中遇到的问题,父组件给子组件传值第一次子组件是可以接受的, 但是在父组件中这个值改变了,在子组件中这个prop的值还是第一次父组件传给的值。2...原创 2019-02-15 13:16:57 · 1398 阅读 · 0 评论 -
【Vue】v-if与v-show的区别
相同点:v-if与v-show都可以动态控制dom元素显示隐藏不同点:v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css--display:none,dom元素还在。都修改为false后,第一个div是直接被移除掉了需要注意的是,当一个元素默认在css中加了display:none属性,这时通过if-show修改为true是无法让元素显示的。...原创 2019-02-15 13:11:36 · 441 阅读 · 0 评论 -
前端vue项目开发流程
产品给出需求文档,产品原型 阅读文档,梳理需求 评审需求(产品逻辑、交互是否合理) UI出图,交互设计稿 开始做详细设计(拆分需求模块,技术选型,调研技术方案中的不确定(用什么语言,什么框架等,demo验证)) 详细设计评审(开会决定设计是否可行) 出项目排期(做详细设计时已基本预估出时间安排,所以做详细设计是很重要的) 进入开发 搭建项目框架 模拟mock数据(mock.js模...原创 2019-01-19 11:27:57 · 2756 阅读 · 0 评论 -
element ui 表单验证残留提示处理
问题:如果vue的同一个页面拥有两个表单。验证第一个表单时没有通过就切换到第二个,那么第二个表单会出现验证错误的信息点击编辑框解决方法:添加表单重置验证我们可以通过为两个表单添加ref属性之后在通过调用resetFields()方法来解决问题代码如下<el-form :model="form" :rules="rules" ref="form" label-width="100px">...原创 2018-03-27 09:46:31 · 10291 阅读 · 1 评论 -
怎么处理table 与 form绑定的问题(现象:点击取消后 修改的值还是在table显示)
问题:表单中的用户名和模态框中的用户名没有绑定同一个model,但之后在模态框捏输入发现表单内的用户名也发生了改变。原本计划是想点保存之后再改变的。解决方法找到判断模态框是否显示的变量。之后用watch监听该属性。然后就不会发生上述问题。表单:<el-table :key='tableKey' :data="list" v-loading.body="listLoading" border ...原创 2018-03-27 09:43:21 · 610 阅读 · 0 评论 -
vue 常用命令
vue的安装 npm install vuevue的vue-cli 脚手架安装 cnpm install -g vue-cli创建vue项目模板vue init webpack projectName切换到项目目录cd projectName安装依赖模块npm install原创 2017-10-17 15:14:27 · 758 阅读 · 0 评论 -
Vue + ElementUI 手撸后台管理网站基本框架(二)权限控制
接口权限控制页面权限控制编写路由表页面访问权限页面元素操作权限路由控制完整流程图NEXT登录及系统菜单加载本系列目录后台管理系统中,权限控制一般分为两个部分。一个是接口访问的权限控制,一个是页面的权限控制。本章将讲述这两种权限控制如何实现。本章内容较多,请耐心阅读。接口权限控制相比于页面权限控制,接口权限控制简单很多,实现也很简单,所以写转载 2017-11-01 09:58:46 · 2932 阅读 · 0 评论 -
Vue相关开源项目库汇总(史上最全)
目录UI组件开发框架实用库服务端辅助工具应用实例Demo示例UI组件element ★13489 - 饿了么出品的Vue2的web UI工具套件Vux ★8133 - 基于Vue和WeUI的组件库iview ★6634 - 基于 Vuejs 的开源 UI 组件库mint-ui ★6253 - Vue 2的移动UI元素muse-ui ★原创 2017-10-13 08:39:29 · 35035 阅读 · 2 评论 -
vue.js 教程 思维导图 百度脑图分享 会持续更新
vue 教程 - 蔡俊锋 百度脑图 http://naotu.baidu.com/file/7021fe563b3f330b47646176a0f57ec7有什么建议也可以留言原创 2017-10-12 17:11:31 · 3450 阅读 · 0 评论 -
Awesome Vue.js vue.js学习资源链接大全 中文
策划列表相关的vue.js可畏的事资源官方资源外部资源工作门户社区会议播客官方的例子教程实例书项目采用vue.js开源商业产品应用/网站互动体验企业使用组件&图书馆用户界面组件表通知装载机进度条工具提示覆盖视差图标菜单旋转木马排行时间日历地图音频/视频无限滚动下拉刷新降价PDF树社会共享QR码搜索其他形式选择器原创 2017-10-12 16:51:35 · 14425 阅读 · 0 评论 -
Awesome Vue.js vue.js学习资源链接大全 英文
A curated list of awesome things related to Vue.jsResourcesOfficial ResourcesExternal ResourcesJob PortalCommunityConferencesPodcastsOfficial ExamplesTutorialsExamplesBooksProjects Using V原创 2017-10-12 16:43:38 · 11637 阅读 · 1 评论 -
vue.js学习资源大全
下面整理了一些关于Vue以及Vue衍生的学习资源:官网教程: https://cn.vuejs.org/v2/guide/installation.html官网API:https://cn.vuejs.org/v2/api/#silentECMAScript 6 入门:http://es6.ruanyifeng.com/30分钟掌握ES6/ES2015核原创 2017-10-12 16:38:56 · 1448 阅读 · 0 评论 -
Vue2.0 之 自带浏览器里无法打开(兼容IE处理) - 解决方案 命令
Vue 之 android内嵌H5页面不显示出现这个问题,原因有很多首先,别急,请看下面的推荐方案:1、找个android真机测试下(机型版本为4.4以上),真机联调测试(如果不知道怎么联调,那么请看这里:Android真机 - 联调chrome调试)2、如果报 报错 vuex requires a Promise polyfill in this browser.原创 2017-10-27 17:22:49 · 5223 阅读 · 0 评论 -
Vue2.0 新手入门 — 从环境搭建到发布
什么是 Vue.js?Vue.js 是用于构建交互式的 Web 界面的库。Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。本章节是关于 Vue1.x 版本的内容,如需查看 Vue2.x,可点以下链接。Vue.js2.0 教程:http://www.runoob.com/vue2/vue-tutorial.html转载 2017-10-17 15:29:53 · 846 阅读 · 0 评论 -
Vue+Webpack使用规范
一、注意事项1、开发尽量使用ES2015,遵循CommonJS规范2、切勿直接操作DOM,要操作数据3、尽量使用Vue的语法糖,比如可以用:style代替v-bind:style;用@click代替v-on:click二、规范1、命名组件名称(含路由组件)使用“-”分割,如person-new-com,不推荐驼峰2、事件事件名称使用“-”分割,且前缀为该组件的名称,例如当前组件为o原创 2017-10-26 16:14:48 · 1012 阅读 · 0 评论 -
vue 开发中element-ui库的switch开关绑定number类型数据不成功问题 解决方法
最近在使用element-ui库进行vue项目的开发,这个ui库对于一些后台管理项目的开发还是非常实用的,各种组件都比较齐全,而且文档也很详细。但是对于我这种初学者来说,部分组件的文档还需更加详细。其中的switch开关组件,我在这就花费了不少时间才完成自己想要的效果。 也就是说当value为Number类型的时候 on-value和off-value前边必须加:单项绑定一...原创 2017-11-14 11:29:48 · 21940 阅读 · 23 评论 -
vue如何让自定义函数挂到全局
在main.js里进行全局注册Vue.prototype.ajax = function (){}在所有组件里可调用this.ajax实例main.jsVue.prototype.ChangeDateFormat = function (row, column){ // ChangeDateFormat(row, column) { // var jsondate = ro...原创 2018-03-21 16:35:42 · 3236 阅读 · 0 评论 -
vue2.0的Element UI的表格table列时间戳格式化
表格属性[html] view plain copy<el-table :data="tableData" v-loading.body="loading" border @selection-change="selectionChange" ...原创 2018-03-14 14:45:14 · 3550 阅读 · 0 评论 -
vscode中使用beautify插件格式化vue文件
**点击设置,找到beautify.language并在html一栏里加上vue,so easy!**"beautify.language": { "js": { "type": [ "javascript", "json" ], "file.原创 2018-03-23 16:52:23 · 6097 阅读 · 1 评论 -
Element UI的表格table列的宽度自适应设置
不要设置 width="110px" <el-table-column prop="login_id" align="center" label="工号"> </el-table-column><el-table-column prop="login_id" width="110px" align="center" label="工号...原创 2018-03-23 16:05:22 · 98377 阅读 · 14 评论 -
vue element table 相关页面跳转实例代码
vue element table 相关页面跳转实例代码 el-table-column width="100px" align="center" label="样板名"> template scope="scope"> a > router-link to="/baseManager/customerinform"> {{ scope.row.mo原创 2018-02-07 17:02:12 · 2008 阅读 · 1 评论 -
el-table使用图片实例代码
el-table使用图片实例代码原创 2018-02-07 16:58:11 · 5509 阅读 · 1 评论 -
vue2.0的Element UI的表格table列时间戳格式化
表格属性[html] view plain copyel-table :data="tableData" v-loading.body="loading" border @selection-转载 2017-12-04 10:14:42 · 5394 阅读 · 1 评论 -
Vue.js 上传文件(后台使用.net)
页面部分"app"> "myform"> "file" name="fileup" id="fileup" v-on:change="fileChange($event)" /> {{img}}"text/javascript"> var app = new Vue({ el: "#app",转载 2017-11-06 14:28:24 · 4019 阅读 · 0 评论 -
Vue.js 组件编码规范
目标本规范提供了一种统一的编码规范来编写 Vue.js 代码。这使得代码具有如下的特性:其它开发者或是团队成员更容易阅读和理解。IDEs 更容易理解代码,从而提供高亮、格式化等辅助功能更容易使用现有的工具更容易实现缓存以及代码包的分拆本指南为 De Voorhoede 参考 RiotJS 编码规范 而写。目录将 this 赋值给 component 变量使用原创 2017-10-26 16:27:32 · 1161 阅读 · 0 评论