![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
【VUE】
shenzhen_zsw
这个作者很懒,什么都没留下…
展开
-
chrome 67版本后无法拖拽离线安装CRX格式插件的解决方法
chrome 67版本后无法拖拽离线安装CRX格式插件的解决方法第一种:开启开发者模式即可 (推荐)第二种方法:修改参数第三种:修改文件格式,加载扩展程序有一部分网友反映子chrome 67版本以后以前离线安装chrome插件的方法无法使用,虽然小编的电脑仍然可以使用,但是既然有那么多用户反映,自然是存在这种问题的,小编收集整理了三种解决chrome 67版本后无法拖拽离线安装CRX格式插件的解...原创 2019-08-13 11:27:45 · 647 阅读 · 0 评论 -
Vue入门-Node和NPM
Vue入门-Node和NPM2.Node和NPM2.1.下载Node.js2.2.NPM2.Node和NPM前面说过,NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架,包括Jquery、AngularJS、VueJs都有。为了后面学习方便,我们先安装node及NPM工具。2.1.下载Node.js下载地址:https://nodejs.org/en/推荐下载LTS...原创 2019-06-12 17:48:21 · 351 阅读 · 0 评论 -
Vue入门-认识Vue
Vue入门-认识Vue1.认识Vue1.认识VueVue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 前端框架三巨头:...原创 2019-06-12 17:44:19 · 260 阅读 · 0 评论 -
Vue入门-前言
Vue入门-前言0.前言0.前言前几天我们已经对后端的技术栈有了初步的了解、并且已经搭建了整个后端微服务的平台。接下来要做的事情就是功能开发了。但是没有前端页面,我们肯定无从下手,因此今天我们就要来了解一下前端的一些技术,完成前端页面搭建。先聊一下前端开发模式的发展。静态页面最初的网页以HTML为主,是纯静态的网页。网页是只读的,信息流只能从服务端到客户端单向流通。开发人员也只关心页...原创 2019-06-12 17:41:27 · 177 阅读 · 0 评论 -
Vue传递参数不在URL路径拼接显示方法
第一种:params方法。此方法传递不会在URL路径中显示拼接参数接收方法:this.$route.params.one,one是参数名第二种:query方法。此方法传递会在URL路径中显示拼接参数接收方法:this.$route.query.one,one是参数名==============================QQ群:143522604...原创 2019-04-23 12:24:06 · 1329 阅读 · 0 评论 -
插件Vue.Draggable
安装资源库:从Vue资源:https://github.com/vuejs/awesome-vue下载Libraries/UI Components/Form/Drag and Dropyarn addvuedraggable (5000转载 2018-11-30 14:51:26 · 662 阅读 · 0 评论 -
Vue 修改data中的数组和对象,DOM却不刷新
问题如题。看了官方文档。给出了这样的解释。由于 JavaScript 的限制,Vue 不能检测以下变动的数组:当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue当你修改数组的长度时,例如:vm.items.length = newLength举个例子:var vm = new Vue({ data: { ...原创 2018-11-21 10:38:15 · 8263 阅读 · 1 评论 -
vue路由history模式_如何去除vue项目中的#
在使用vue-cli搭建的环境中,浏览器上URL地址中是存在'#'的,这是由于vue-router 默认 hash 模式,不难发现#的出现真的很丑陋。官网给出了如何使用history模式,例如:const router = new VueRouter({ mode: 'history',})对于VUE的router[mode: history]模式在开发的时候,一般都不出问题...原创 2018-09-30 14:02:39 · 2461 阅读 · 0 评论 -
如何获取一个div的top高度和left值
首先要取得top值和left值,先要把这个div的定位设为 relative 或者 absolute比如: <div id="mydiv" style="position:relative" ></div>top值:document.getElementById('mydiv').offsetTopleft值:document.getElementById('m...原创 2018-09-22 06:34:35 · 4767 阅读 · 0 评论 -
解决vue+element 键盘回车事件导致页面刷新的问题
背景今天发现输入框输入内容后回车就会刷新页面解决<el-form :inline="true" @submit.native.prevent></el-form>el-from 加上@submit.native.prevent具体是参考element-ui文档解决的W3C 标准中有如下规定:When there is only one...原创 2018-10-01 05:22:47 · 1445 阅读 · 0 评论 -
Vue传递参数不在URL路径拼接显示方法
多参数传递的两种方法:第一种:params方法。此方法传递不会在URL路径中显示拼接参数接收方法:this.$route.params.one,one是参数名说明: 1)这里的路由传递,需要指定路由的名称,若只有路径,会报错,必须指定路由的名称;第二种:query方法。此方法传递会在URL路径中显示拼接参数接收方法:this.$route.quer...原创 2018-09-13 14:01:55 · 9369 阅读 · 0 评论 -
axios请求,服务端接收不到参数
axios请求,服务端接收不到参数,data和params之间应用场合data//`data`选项是作为一个请求体而需要被发送的数据 //该选项只适用于方法:`put/post/patch` //当没有设置`transformRequest`选项时dada必须是以下几种类型之一 //string/plain/object/ArrayBuffer/ArrayB...原创 2018-09-11 00:14:20 · 774 阅读 · 0 评论 -
使用vue-element-admin框架开发时遇到的跨域问题
开发环境所用工具1)webpack2)vue3)vue-element-admin4)http-proxy-middleware[解决跨域的webpack插件]解决步骤一,安装http-proxy-middleware 插件$ npm install --save-dev http-proxy-middleware二,配置de...原创 2018-09-11 00:08:58 · 8769 阅读 · 0 评论 -
vue路由传参的三种基本方式
现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据。父组件中:<liv-for="article in articles"@click="getDescribe(article.id)">methods:方案一: getDescribe(id) {// 直接调用$router.push 实现携带参数的跳...原创 2018-09-12 22:21:46 · 162 阅读 · 0 评论 -
js对象克隆
大家都知道,js的对象是引用类型,如果直接var obj2 = obj,obj2和obj是共享同一个对象实体的,这往往不是我们想要的结果。官方并没有给出通用的对象克隆方法:我们给出以下几种写法:1.通用对象克隆:function clone(obj){ let temp = null; if(obj instanceof Array){ temp ...原创 2018-09-16 03:27:12 · 295 阅读 · 0 评论 -
vue项目导入外部css样式和js文件
css文件放入static文件夹下。 <template> <div id="app" > </div></template><script src="/static/js/easydialog.min.js" ></script><script>exp原创 2018-09-08 19:21:57 · 1218 阅读 · 0 评论 -
Vue入门-vue入门案例
Vue入门-Node和NPM3.3.vue入门案例3.3.1.HTML模板3.3.2.vue声明式渲染3.3.3.双向绑定3.3.4.事件处理3.3.vue入门案例3.3.1.HTML模板在hello-vue目录新建一个HTML在hello.html中,我们编写一段简单的代码:h2中要输出一句话:xx 非常帅。前面的xx是要渲染的数据。3.3.2.vue声明式渲染然后我们通过Vu...原创 2019-06-12 17:53:20 · 258 阅读 · 0 评论 -
Vue入门-Vue实例
Vue入门-Vue实例4.Vue实例4.1.创建Vue实例4.2.模板或元素4.3.数据4.4.方法4.5.生命周期钩子4.5.1.生命周期4.5.2.钩子函数4.5.3.this4.Vue实例4.1.创建Vue实例每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:var vm = new Vue({ // 选项})在构造函数中传入一个对象,并且在对象中...原创 2019-06-12 18:00:06 · 316 阅读 · 2 评论 -
Vue中watch的简单应用
Vue中watch的简单应用Vue中watch的简单应用demo1demo2demo3Vue中watch的简单应用Vue.js 有一个方法 watch,它可以用来监测Vue实例上的数据变动。如果对应一个对象,键是观察表达式,值是对应回调,值也可以是方法名,或者是对象,包含选项。下面写两个demo,参考demo来了解一下demo1<template> <div>...原创 2019-08-16 06:41:19 · 488 阅读 · 0 评论 -
商城项目-ES6 语法指南
商城项目-ES6 语法指南商城项目-ES6 语法指南4、ES6 语法指南4.1.什么是ECMAScript?4.2.ECMAScript的快速发展4.3.ES5和6的一些新特性4.3.1.let 和 const 命令4.3.2.字符串扩展4.3.3.解构表达式4.3.4.函数优化4.3.5.map和reduce4.3.6.promise4.3.7.set和map(了解)4.3.8.模块化4.3....原创 2019-06-11 23:45:31 · 158 阅读 · 0 评论 -
商城开发-实用技术
1、异步查询工具axios原创 2019-06-25 14:44:29 · 336 阅读 · 0 评论 -
商城-修改品牌
商城-修改品牌4.修改品牌4.1.点击编辑出现弹窗4.2.回显数据4.3.商品分类回显4.3.1.后台提供接口controller4.3.2.前台查询分类并渲染4.3.3.新增窗口数据干扰4.3.4.提交表单时判断是新增还是修改4.修改品牌修改的难点在于回显。当我们点击编辑按钮,希望弹出窗口的同时,看到原来的数据:4.1.点击编辑出现弹窗这个比较简单,修改show属性为true即可实现...原创 2019-06-14 14:06:25 · 216 阅读 · 0 评论 -
商城-品牌的新增
商城-品牌的新增1.品牌的新增1.1.页面实现1.1.1.初步编写弹窗1.1.2.实现弹窗的可见和关闭1.1.3.新增品牌的表单页1.1.4.编写表单1.1.4.1.表单1.1.4.2.文本框1.1.4.3.级联下拉选框1.1.4.4.文件上传项1.1.4.5.按钮1.1.5.表单校验1.1.5.1.校验规则1.1.5.2.项目中代码1.1.6.表单提交1.2.后台实现新增1.2.1.contro...原创 2019-06-14 13:22:14 · 219 阅读 · 0 评论 -
商城-实现商品分类查询
商城-实现商品分类查询5.实现商品分类查询5.1.导入数据5.2.页面实现5.2.1.页面分析5.2.2.树组件的用法5.3.实现功能5.3.1.url异步请求5.3.2.实体类5.3.3.controller5.3.4.service5.3.5.mapper5.3.6.启动并测试5.实现商品分类查询商城的核心自然是商品,而商品多了以后,肯定要进行分类,并且不同的商品会有不同的品牌信息,其关系...原创 2019-06-13 15:20:58 · 5193 阅读 · 1 评论 -
商城-使用域名访问本地项目
商城-使用域名访问本地项目4.使用域名访问本地项目4.1.统一环境4.2.域名解析4.3.解决域名解析问题4.4.nginx解决端口问题4.4.1.什么是Nginx4.4.2.nginx作为web服务器4.4.3.nginx作为反向代理4.4.4.安装和使用安装反向代理配置使用4.5.测试4.使用域名访问本地项目4.1.统一环境我们现在访问页面使用的是:http://localhost:90...原创 2019-06-13 14:53:43 · 417 阅读 · 0 评论 -
商城-项目结构
商城-项目结构6.项目结构6.1.目录结构6.2.调用关系6.3.页面布局6.项目结构开始编码前,我们先了解下项目的结构:6.1.目录结构首先是目录结构图:6.2.调用关系我们最主要理清index.html、main.js、App.vue之间的关系:理一下:index.html中定义了空的div,其id为app。main.js中定义了Vue对象,并且绑定通过id选择器,绑定...原创 2019-06-13 14:44:16 · 435 阅读 · 0 评论 -
UI-Vuetify框架
UI-Vuetify框架5.Vuetify框架5.1.为什么要学习UI框架5.2.为什么是Vuetify5.3.怎么用?5.Vuetify框架5.1.为什么要学习UI框架Vue负责的是虽然会帮我们进行视图的渲染,但是样式是有我们自己来完成。这显然不是我们的强项,因此后端开发人员一般都喜欢使用一些现成的UI组件,拿来即用,常见的例如:BootStrapLayUIEasyUIZUI...原创 2019-06-13 13:25:37 · 16110 阅读 · 0 评论 -
商城-搭建后台管理前端
商城-搭建后台管理前端4.搭建后台管理前端4.1.导入已有资源4.2.安装依赖4.3.运行一下看看4.搭建后台管理前端4.1.导入已有资源后台项目相对复杂,为了有利于教学,我们不再从0搭建项目,而是直接使用课前资料中给大家准备好的源码:我们解压缩,放到工作目录中:然后在IDEA中导入新的工程:选中我们的工程:这正是一个用vue-cli构建的webpack工程,是不是与昨天的一...原创 2019-06-13 13:14:23 · 1846 阅读 · 0 评论 -
Vue入门 - vue-cli
Vue入门 - vue-cli9.vue-cli9.1.介绍和安装9.2.快速上手9.3.项目结构9.4.单文件组件9.5.运行9.vue-cli9.1.介绍和安装在开发中,需要打包的东西不止是js、css、html。还有更多的东西要处理,这些插件和加载器如果我们一一去添加就会比较麻烦。幸好,vue官方提供了一个快速搭建vue项目的脚手架:vue-cli使用它能快速的构建一个web工程模...原创 2019-06-13 13:04:54 · 279 阅读 · 0 评论 -
Vue入门 - webpack
Vue入门 - webpack8.webpack8.1.安装8.2.核心概念8.3.编写webpack配置8.3.1.入口entry8.3.2.出口output8.4.执行打包8.5.测试运行8.6.打包CSS8.6.1.安装加载器8.6.3.index.js引入css文件8.6.4.配置加载器8.6.5.重新打包8.7.script脚本8.8.打包HTML8.9.热更新的web服务8.webp...原创 2019-06-13 12:57:24 · 237 阅读 · 0 评论 -
Vue入门 - 路由vue-router
Vue入门 - 路由vue-router7.路由vue-router7.1.场景模拟7.1.1.编写父组件7.1.2.编写登录及注册组件7.1.3.在父组件中引用7.1.5.问题7.2.vue-router简介和安装7.3.快速入门7.路由vue-router7.1.场景模拟现在我们来实现这样一个功能:一个页面,包含登录和注册,点击不同按钮,实现登录和注册页切换;7.1.1.编写父组件...原创 2019-06-13 12:34:33 · 206 阅读 · 0 评论 -
Vue入门-组件化
Vue入门-组件化6.组件化6.1.全局组件6.2.组件的复用6.3.局部注册6.4.组件通信6.4.1.props(父向子传递)6.4.2.props验证6.4.3.动态静态传递6.4.4.子向父的通信6.组件化在大型应用开发的时候,页面可以划分成很多部分。往往不同的页面,也会有相同的部分。例如可能会有相同的头部导航。但是如果每个页面都独自开发,这无疑增加了我们开发的成本。所以我们会把页面...原创 2019-06-13 12:06:11 · 224 阅读 · 0 评论 -
Vue入门-指令
Vue入门-指令5.指令5.1.插值表达式5.1.1.花括号5.1.2.插值闪烁5.1.3.v-text和v-html5.2.v-model5.3.v-on5.3.1.基本用法5.3.2.事件修饰符5.3.3.按键修饰符5.3.4.组合按钮5.4.v-for5.4.1.遍历数组5.4.2.数组角标5.4.3.遍历对象5.4.4.key5.5.v-if和v-show5.5.1.基本使用5.5.2.与...原创 2019-06-12 18:57:25 · 517 阅读 · 0 评论 -
JS将字符串转换成JSON
JS将字符串转换成JSONconst strToJson = function(data){ var jsonObj = (new Function("return " + data))(); //或者采用此方法:var d = eval("(" + data + ")"); return jsonObj;};==============================...原创 2018-09-11 13:08:09 · 157 阅读 · 0 评论 -
vue element隐藏组件滚动条scrollbar使用
<el-scrollbar style="height: 100%"> <app-main></app-main> </el-scrollbar>原创 2018-09-02 07:40:15 · 2371 阅读 · 0 评论 -
VUE-axios的用法
概述 VUE-axios的用法 一、安装1、 利用npm安装npm install axios --save2、 利用bower安装bower install axios --save3、 直接利用cdn引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script&g...原创 2018-07-16 05:50:45 · 139 阅读 · 0 评论 -
Vue-子组件改变父级组件的信息
概述Vue-子组件改变父级组件的信息 在Vue2.0,已经不允许子组件给父组件赋值了,但是如果我们有这个需求应该怎么做呢,下面介绍一个方法,原理就是对象的引用 <body> <div id="box"> <h2>父组件=>{{ParData.a}}</h2> ...原创 2018-07-20 10:49:15 · 264 阅读 · 0 评论 -
VUE-Vue.js之$refs,父组件访问、修改子组件中 的数据
概述Vue.js之$refs,父组件访问、修改子组件中 的数据尽管有 prop 和事件,但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。ref 为子组件指定一个引用 ID,使父组件能通过 ref 直接访问子组件中的数据 子组件<template> <div> <!--显...原创 2018-07-20 10:49:02 · 5856 阅读 · 0 评论 -
用vue官方提供的模板vue-cli搭建一个helloWorld案例
概述用vue官方提供的模板vue-cli搭建一个helloWorld案例 安装环境安装node.js并配置环境变量 安装淘宝镜像,npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack,cnpm install webpack -g 安装脚手架npm install v...原创 2018-07-14 07:25:20 · 396 阅读 · 0 评论 -
VUE-路由的用法
路由vue-router的基本用法 导入路由import VueRouter from 'vue-router';加载路由插件Vue.use(VueRouter) 路由数据//路由配置const Routers = [ { path:'/index', meta: { title: '首页' },...原创 2018-07-16 05:49:09 · 454 阅读 · 0 评论