【VUE】
关注
分享
扫一扫
shenzhen_zsw
这个作者很懒，什么都没留下…
展开
-
chrome 67版本后无法拖拽离线安装CRX格式插件的解决方法
chrome 67版本后无法拖拽离线安装CRX格式插件的解决方法第一种：开启开发者模式即可 （推荐）第二种方法：修改参数第三种：修改文件格式，加载扩展程序有一部分网友反映子chrome 67版本以后以前离线安装chrome插件的方法无法使用，虽然小编的电脑仍然可以使用，但是既然有那么多用户反映，自然是存在这种问题的，小编收集整理了三种解决chrome 67版本后无法拖拽离线安装CRX格式插件的解...原创 2019-08-13 11:27:45 · 698 阅读 · 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 · 422 阅读 · 0 评论 -
Vue入门-认识Vue
Vue入门-认识Vue1.认识Vue1.认识VueVue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 前端框架三巨头：...原创 2019-06-12 17:44:19 · 300 阅读 · 0 评论 -
Vue入门-前言
Vue入门-前言0.前言0.前言前几天我们已经对后端的技术栈有了初步的了解、并且已经搭建了整个后端微服务的平台。接下来要做的事情就是功能开发了。但是没有前端页面，我们肯定无从下手，因此今天我们就要来了解一下前端的一些技术，完成前端页面搭建。先聊一下前端开发模式的发展。静态页面最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务端到客户端单向流通。开发人员也只关心页...原创 2019-06-12 17:41:27 · 198 阅读 · 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 · 1397 阅读 · 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 · 741 阅读 · 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 · 8323 阅读 · 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 · 2548 阅读 · 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 · 4897 阅读 · 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 · 1476 阅读 · 0 评论 -
Vue传递参数不在URL路径拼接显示方法
多参数传递的两种方法：第一种：params方法。此方法传递不会在URL路径中显示拼接参数接收方法：this.$route.params.one，one是参数名说明： 1）这里的路由传递，需要指定路由的名称，若只有路径，会报错，必须指定路由的名称；第二种：query方法。此方法传递会在URL路径中显示拼接参数接收方法：this.$route.quer...原创 2018-09-13 14:01:55 · 9468 阅读 · 0 评论 -
axios请求，服务端接收不到参数
axios请求，服务端接收不到参数，data和params之间应用场合data//`data`选项是作为一个请求体而需要被发送的数据 //该选项只适用于方法：`put/post/patch` //当没有设置`transformRequest`选项时dada必须是以下几种类型之一 //string/plain/object/ArrayBuffer/ArrayB...原创 2018-09-11 00:14:20 · 807 阅读 · 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 · 8849 阅读 · 0 评论 -
vue路由传参的三种基本方式
现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中：<liv-for="article in articles"@click="getDescribe(article.id)">methods：方案一： getDescribe(id) {// 直接调用$router.push 实现携带参数的跳...原创 2018-09-12 22:21:46 · 185 阅读 · 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 · 327 阅读 · 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 · 1264 阅读 · 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 · 305 阅读 · 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 · 406 阅读 · 2 评论 -
Vue中watch的简单应用
Vue中watch的简单应用Vue中watch的简单应用demo1demo2demo3Vue中watch的简单应用Vue.js 有一个方法 watch，它可以用来监测Vue实例上的数据变动。如果对应一个对象，键是观察表达式，值是对应回调，值也可以是方法名，或者是对象，包含选项。下面写两个demo，参考demo来了解一下demo1<template> <div>...原创 2019-08-16 06:41:19 · 566 阅读 · 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 · 228 阅读 · 0 评论 -
商城开发-实用技术
1、异步查询工具axios原创 2019-06-25 14:44:29 · 362 阅读 · 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 · 266 阅读 · 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 · 249 阅读 · 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 · 5416 阅读 · 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 · 594 阅读 · 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 · 465 阅读 · 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 · 16305 阅读 · 0 评论 -
商城-搭建后台管理前端
商城-搭建后台管理前端4.搭建后台管理前端4.1.导入已有资源4.2.安装依赖4.3.运行一下看看4.搭建后台管理前端4.1.导入已有资源后台项目相对复杂，为了有利于教学，我们不再从0搭建项目，而是直接使用课前资料中给大家准备好的源码：我们解压缩，放到工作目录中：然后在IDEA中导入新的工程：选中我们的工程：这正是一个用vue-cli构建的webpack工程，是不是与昨天的一...原创 2019-06-13 13:14:23 · 1928 阅读 · 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 · 326 阅读 · 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 · 307 阅读 · 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 · 235 阅读 · 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 · 306 阅读 · 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 · 804 阅读 · 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 · 182 阅读 · 0 评论 -
vue element隐藏组件滚动条scrollbar使用
<el-scrollbar style="height: 100%"> <app-main></app-main> </el-scrollbar>原创 2018-09-02 07:40:15 · 2531 阅读 · 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 · 159 阅读 · 0 评论 -
Vue-子组件改变父级组件的信息
概述Vue-子组件改变父级组件的信息 在Vue2.0,已经不允许子组件给父组件赋值了，但是如果我们有这个需求应该怎么做呢，下面介绍一个方法，原理就是对象的引用 <body> <div id="box"> <h2>父组件=>{{ParData.a}}</h2> ...原创 2018-07-20 10:49:15 · 292 阅读 · 0 评论 -
VUE-Vue.js之$refs，父组件访问、修改子组件中 的数据
概述Vue.js之$refs，父组件访问、修改子组件中 的数据尽管有 prop 和事件，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。ref 为子组件指定一个引用 ID，使父组件能通过 ref 直接访问子组件中的数据 子组件<template> <div> <!--显...原创 2018-07-20 10:49:02 · 5987 阅读 · 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 · 425 阅读 · 0 评论 -
VUE-路由的用法
路由vue-router的基本用法 导入路由import VueRouter from 'vue-router';加载路由插件Vue.use(VueRouter) 路由数据//路由配置const Routers = [ { path:'/index', meta: { title: '首页' },...原创 2018-07-16 05:49:09 · 497 阅读 · 0 评论