vue
关注
分享
扫一扫
winner_corl
态度决定一切！
展开
-
CSS 为div单个角设置弧度 border-radius 同时显示边框线&& div宽度自适应
参考文章 CSS 为div单个角设置弧度 border-radius 百度知道 目标样式具体实现当前使用element-ui<el-divider content-position="left"> <div class="divider"><h4 class="divider_text">一年</h4></div></el-divider> .divider { width原创 2020-11-24 15:56:13 · 869 阅读 · 0 评论 -
element 的dialog弹出会被遮住，如何解决？
场景图：解决办法1：在dialog上面写<el-dialog :visible.sync="operateVisible" width="50%" top="5vh" append-to-body>解决办法2：<el-dialog :visible.sync="operateVisible" width="50%" top="5vh" :modal-append-to-body='false'>参考文章：element 的dialog嵌套问原创 2020-11-23 10:54:26 · 792 阅读 · 0 评论 -
element-ui cascader 重置按钮触发清空操作
前言 有时候我们的提交表单会存在重置操作，那么会重置element-ui中的联级选择器，如果你是自定义组件的联级选择器，你会发现无法清空的情况，实际上你已经在父页面的reset方法中已经重置了下拉组件为空，但是页面上依旧残留着文字，如下图所示：当点击重置按钮之后，新版用途文字虽然存在，但是已经和后面的clearable触发之后的结果是一样的！！也就是点击重置按钮的结果是我们想要的，但是页面上的文字是我们想要弄掉的。那么我们的问题就是如何把页面上的文字清空掉！因为我这个下拉组件是子..原创 2020-07-13 16:19:41 · 7043 阅读 · 0 评论 -
vue中如何实现双向绑定的3中方法（.sync/v-model和普通交互）
参考文章 vue 实现父组件和子组件之间的数据双向绑定 深入理解vue 修饰符sync【 vue sync修饰符示例】 彻底明白VUE修饰符sync 需求 父页面传入下拉组件的查询枚举值，子组件如果发生变化则需要更新父组件页面数据，当然我们可以通过props的方式去实现，然后再通过事件，在父页面接收，但是这样有点复杂了，所以我们可以通过其他方法实现。子页面影响父页面的方式：1、值变化（传入值变化） 2、事件变化（如弹窗关闭） 值变化 以对象的方式传入..原创 2020-05-26 16:49:30 · 1343 阅读 · 0 评论 -
.html工程使用vue.js组件之间相互如何调用(行政区下拉组件为例)
1、前言现在我在做一个项目，但是没有node环境仅仅就是单纯的html工程，所有的内容都是通过js来写，也就是说vue中import和require语法也不支持，在这种情况下我们原先在vue工程中使用import ｛x｝来引入的方式就会不适合了，当前使用的ui为element-ui。下面直接上手吧！2、初步代码首先我们先要写一个很基本vue页面在.html文件中：<!DOCTYPE html><html lang="en" xmlns:th="http://www.原创 2020-05-13 16:06:15 · 473 阅读 · 0 评论 -
初识 Webpack 配置 bannerPlugin （xxx归谁版权所有）
1、这个是webpack内部的插件，首先在webpack.config.js中先引入：var webpack = require('webpack');2、webpack.config.js配置...plugins: [ new webpack.BannerPlugin('make by xuhaiyan'), // 字符串就是版权声明 ]...3、效果图...原创 2020-02-10 10:14:44 · 2122 阅读 · 0 评论 -
初识 Webpack 配置source-map和watch的用法
source-map 即源码映射内容，在解析 js 的过程中可能需要将高级语法解析成低级语法，这里就需要配置label相关内容；1、安装依赖npm install @babel/core @babel/preset-env babel-loader webpack-dev-server -D2、添加index.js内容console.log('home')/* e...原创 2020-02-10 09:50:02 · 589 阅读 · 0 评论 -
webpack——多个entry和output配置、js不同文件的指定引用
0、依赖npm init -ynpm install webpack webpack-cli -Dnpm install html-webpack-plugin -D(作用：用模板生成html，自定引入js文件)1、在src下新增home.js和other.js2、新增index.html(./webpack-pages/index.html)3、webpack配置v...原创 2020-02-09 21:57:24 · 3486 阅读 · 0 评论 -
webpack中配置jquery暴露全局（expose-loader）
目录 源代码 普通引入 内联loader使用 webpack配置全部暴露jquery cdn配置 如何避免引入第三方模块 最终代码 源代码 链接：https://pan.baidu.com/s/1i45-_KqAgza4qNQfxKvAvQ提取码：0tgx 普通引入 1、在a.js中添加，npm run devvar $ = ...原创 2020-02-09 15:48:08 · 1371 阅读 · 2 评论 -
vue的webpack配置es6转换es5语法、@log、解析原生api、识别es7、代码校验eslint
1、在index.js中添加内容let fn = () => { console.log('log');}fn();2、源文件转换依赖安装npm install babel-loader @babel/core @babel/preset-env -D3、在webpack.config.js中添加内容module: { rules: [ // es6-&...原创 2020-02-09 14:53:41 · 1967 阅读 · 0 评论 -
vue中使用自定义注解（@log为例）
目录 一、代码资源 二、开发步骤 三、参考文章 四、webpack相关文章 一、代码资源 下面实战内容，是通过3个基本文件的基础上操作的，请自行下载！！！ ㊯百度网盘分享 二、开发步骤 1、jquery 安装npm install jquery2、es6 语法转换依赖安装npm install babel-...原创 2020-02-06 16:59:25 · 1475 阅读 · 0 评论 -
初识 webpack（十一）axios的post / get 请求封装 和状态返回通知
目录一、前期准备1.1 参考文章1.1 百度网盘资源1.2 webpack 三部曲一、axios 打包1.1 实战三、错误图例3.1 跨域问题3.2 定位异常四、vue整合4.1 百度网盘资源4.2关于请求通知Message.xx4.3关于请求通知Notification.xx 一、前期准备 1.1 参考文章 代码参考文章...原创 2020-01-30 16:27:46 · 1152 阅读 · 0 评论 -
初识 Webpack (九) 使用打印和url解析（vconsole、jsUri）
目录vconsole-webpack-plugin➊ 参考文章➋步骤➌效果图jsUri （一）vconsole-webpack-plugin ➊ 参考文章 npm 官方地址 Github 使用vconsole项目地址（效果图可放大） 移动端的打印神器 VConsole ➋步骤 <!-- ➀ 新建项目 -->vue init ...原创 2020-01-29 14:24:09 · 1094 阅读 · 0 评论 -
初识 Webpack (八) webpack documentwrite、引用第三方图标、使用template模板打包
目录0、document.write1、初始项目结构2、基本代码2.1 main.js2.2 style.css3、下载iconfont：https://iconfont.imweb.io/4、选中icon的预览html文件，快捷键ctrl+shift+c，在浏览器上预览是否正常显示3.1 部分代码：3.2 全部代码：5、执行打包命令6、预览效果7、...原创 2020-01-28 20:44:08 · 763 阅读 · 0 评论 -
Vue编译打包处理
1 npm run build 执行后会生成dist目录，这个从而用于生产环境2 config/ index.js3 build / utils.js4 配置原创 2020-01-27 19:27:21 · 723 阅读 · 0 评论 -
初识 Webpack (七) 其他配置(制定css、js添加域名，解析html中的image，跨域、devtool定位css和js异常位置、clean插件、图标等)
目录◆打包图片处理3个文件基础直接跳转至此操作：3个文件操作结束◆ 打包css和image分别指定文件夹（）◆ 访问图片时加上域名◆ 代理服务器◆ webpack其他属性（跨域）◆ devtool配置（定位异常）文章前言内容✔生产环境 js定位异常位置✔ 生产环境 css 定位异常位置◆ clean-webpack-plugin（...原创 2020-01-27 16:35:29 · 1233 阅读 · 0 评论 -
初识 Webpack (六) 安装第三方库依赖（jquery为例）
目录✦ 全局暴露expose-loader jquery✦ 参考文章通过npm安装webpack✦ 加速器配置✦ jquery第三方依赖添加0、 项目基本结构1、webpack.config.js2、jquery引入3、相应文件编译得到结果4、依赖安装 npm5、plugins设置6、创建public文件和整体代码7、打包完毕，到public文件...原创 2020-01-27 16:34:31 · 616 阅读 · 1 评论 -
初识 Webpack (五) 编译es6和样式分离
目录文档一、实战1——识别css和插入header标签1 .1 实战前期代码1.2 加前缀1.3 css压缩（terser-webpack-plugin）1.4 总结1.5 最终代码一、实战2——编译es61.1 百度网盘资源1.2推荐文章1.3 具体操作➀ 浏览器识别es6所需依赖➁ webpack.config内容配置二、将样式抽离...原创 2020-01-27 16:29:41 · 1049 阅读 · 0 评论 -
初识 Webpack (四) 解析stylus文件，将css内容单独分离（loader和plugs配置）
目录✦ 前言✦ 文章➬ 文档➬ 遇到的问题➬ 配置和实战✦本章节学习内容✔ 基本代码和目录结构➊模块安装➋ 添加html-webpack-plugin打包➌添加extract-text-webpack-plugin打包✦ 整体代码✦ 总结 ✦ 前言 普通webpack的打包css被打包到了js文件中，以字符串的形式存在，并且整...原创 2020-01-27 23:48:23 · 1525 阅读 · 0 评论 -
初识 Webpack (三) 功能讲解（配置文件可生成bundle.js的四种方式）
目录➣ 基本配置➣ 输出文件名称配置㊫配置文件生成bundle.js四大实战➊ [name].bundle.js➋ [id].bundle.js➌ [name].[hash].bundle.js(修改生新，无法缓存利用)➍ [chunkhash].bundle.js（特定修改文件，生新，未修改仍然使用缓存中hash名称）✔index.[chunkhash:8]...原创 2020-01-27 14:56:48 · 1140 阅读 · 0 评论 -
初识 Webpack 配置——导入导出等（二）
目录✎ 0配置——基本命令✎ node写法——主要内容✎Webpack核心概念导入（import）和导出（export）➊ 入口 / 输出➋Loader➌Plugins（插件）✎配置◆入口配置◆ 出口配置◆ 模块配置◆ 模块配置 resolve属性◆插件配置◆开发中服务器配置✎总结✎ 课程链接 ✎ 0配置——基本...原创 2020-01-27 13:25:22 · 1137 阅读 · 0 评论 -
初识 Webpack (一)
目录◆主要内容◆Webpack是什么Webpack为什么使用？Webpack实现过程◆Webpack安装配置（实战1）◆Webpack安装配置（实战2）◆ Webpack打包操作实战◆Webpack配置讲解◆Webpack其他知识 ◆主要内容 ✦Webpack是什么✦Webpack安装配置 ◆Webpack是什么 现今...原创 2020-01-27 13:27:33 · 1716 阅读 · 0 评论 -
vue-cli构建的vue项目中引入stylus文件(转)
目录使用教程1 参考文献2 使用stylus文件项目架构3 安装stylus（使用npm安装stylus和stylus-loader一个都不能少）4 ../build/webpack.base.conf.js 相关配置5我们将组合的样式汇集在index.styl中6 在content.vue组件中使用使用方法(@import)直接在a.vue中的styl...转载 2020-01-19 14:20:49 · 1264 阅读 · 1 评论 -
Vuex日志功能实现
目录✦ 前言✦参考文章✦Vuex中使用日志功能✦ 整体代码✦效果图✦ 前言本篇文章按照提供的GitHub上的代码，再去实现Vuex自带的日志功能，也就是说如果要使用Vuex自带的日志功能，需要先执行npm install --save vuex我们首先要知道的是Vuex是对状态的监控，不等同于logger✦参考文章vuex使用logger的日...原创 2020-01-18 16:40:55 · 1383 阅读 · 0 评论 -
a.vue基础入门项目实战——（awesome-vue、image require、slide实现）实战04
目录✎？什么是awesome-vueslide自我实现✎？如何将信息传到slideShow.vue中图片使用（require）✎ 实现动画vue内容如何绝对定位（translateX） ✎？什么是awesome-vue 查找vue组件方式(包含了很多一些人自己写的路由等组件)https://github.com/vuejs/awesome-vue如：...原创 2020-01-17 21:49:02 · 1118 阅读 · 0 评论 -
a.vue基础入门项目实战——（超出部分◤省略号...◥ express启动数据服务）实战03
目录 ✎ 超出部分省略号 ✎Express ✉ 官方文档 ➀ 使用教程 ➁ ../build/webpack.dev.conf.js 整体代码 ➂ 测试请求 ➃ 总结 ✎ 超出部分省略号 .new-item { display: inline-block; width: 230px; overflow: hidden; t...原创 2020-01-19 16:49:33 · 347 阅读 · 0 评论 -
a.vue基础入门项目实战——（vue-resource实现Ajax获取信息数据、json-server模拟数据）实战02
目录✎？如何使用json-server实战➀ 前期准备➁ 监控db.json➂ 接口约定➃ GitHub引入配置➊GitHub官方例子➋项目配置内容➌配置分析➍ 重启服务✎？在项目中查看json-server的使用效果➀ ../src/pages/index.vue➁➂➃➄➅➆➇➈➉ ✎？如何使用json-server实战 ...原创 2020-01-17 17:06:40 · 547 阅读 · 0 评论 -
a.vue基础入门项目实战——（项目初始化、修改根组件、首页页面、三要素基本搭建和json-server）实战01
目录百度网盘源代码my-sz-one项目CLI创建◆ 前提依赖构建1、router-view2、ajax（菜鸟教程）3、typicode/json-server4、json-server文章◆基础项目构建my-sz-one项目内容实现◆首页三要素（header、content、footer）➊ header➋ content部...原创 2020-01-16 19:33:14 · 873 阅读 · 0 评论 -
vuex——状态管理插件（转）
我在网上看到一篇很好关于vuex使用的文章（转）所以本知识要点按照那篇文章操作。我们在使用vuex插件的时候，一定要使用npm install --save vuex，不然程序会报错，并且提示你请安装。目录☪？数组状态管理► vuex状态管理〖实例〗◆？如何安装vuex◆？如何在项目中使用vuex☪Getters◆㊫ Demo实战⒈/src/store...原创 2020-01-15 21:42:10 · 374 阅读 · 0 评论 -
Vue 自定义指令
目录㋀㏭☪ 自定义指令 v-x◆菜鸟教程◆局部自定义——directives➊ directives➋ template➌ 效果◆全局自定义——Vue.directive➊ pic➋ 代码➌ 效果◆文章分享◆牛人分享☪ 自定义指令 v-x自定义指令分为局部自定义和全局自定义。◆菜鸟教程https://www.run...原创 2020-01-14 15:04:21 · 499 阅读 · 0 评论 -
Vue 学习11——Vue过渡与动画（二）【动态组件如何实现transition】/ 如何在vue中进入第三方依赖 / vue插件
目录㋀㏭☪ App.vue中如何进行组件A和组件B的切换◆transition❶a.vue❷b.vue❸App.vue㊫ 跟我写代码➫ 总结☪ CSS过渡☪ JS过渡◆ 内容Ⅰ 内容截图Ⅱ 方法Ⅲ 例子◆ 实战1.实现上面同样的效果只有监听三个阶段2.引入jquery第三方库（重点引入第三方依赖）3.写具体demo...原创 2020-01-14 12:24:48 · 541 阅读 · 0 评论 -
Vue——表单元素demo & watch 例子
目录㋀㏫ ㍩✎input 元素◆ v-model 修饰符❶ lazy❷ number◆ v-model 和 v-bind 区别✎单选框和多选框❶ radio和checkbox✎下拉框❶ select❷ select 和 v-for✎ watch◆ 前言❶练习（利用监听v-model绑定的myValue，并且执行tellUser...原创 2020-01-12 16:58:47 · 660 阅读 · 0 评论 -
Vue 学习0——API的使用
render内置方法前言：在页面上渲染数据，我们可以通过new Vue然后在components声明组件名称，也可以通过render内置方法，效果等同。demoApp.vue<template> <div id="app"> {{hello}} </div></template><script> exp...原创 2020-01-12 00:21:24 · 198 阅读 · 1 评论 -
Vue 学习17——歌曲列表实现
歌曲列表实现原创 2020-01-11 18:26:20 · 390 阅读 · 0 评论 -
Vue 学习17——轮播图-实现机制
轮播图-实现机制原创 2020-01-11 18:24:48 · 289 阅读 · 0 评论 -
Vue 学习17—— 轮播图-插槽实现
轮播图-插槽实现原创 2020-01-11 18:24:22 · 357 阅读 · 0 评论 -
Vue 学习17——推荐页面-页面结构
推荐页面-页面结构原创 2020-01-11 18:23:48 · 346 阅读 · 0 评论 -
Vue 学习17——路由实现组件切换
路由实现组件切换原创 2020-01-11 18:22:59 · 660 阅读 · 0 评论 -
Vue 学习17——项目实战（创建my-music项目）
目录㋀㋊✎ 项目实战❶ 静态资源引入、项目初始化◆ 百度网盘样式资料◆ 项目初始化和环境搭建❷ 将第一个组件引入到App.vue◆ 复制百度网盘中最简单的vue模板【没有vue语法】header.vue◆ header.vue添加到App.vue里面到◆ 因为已经引入了static静态文件，此时我的音乐image效果图就显示出来了，如图所示：◆ 把之前的...原创 2020-01-11 17:33:06 · 377 阅读 · 0 评论 -
Vue 学习16——CLI路由
目录㋀㋊菜鸟教程✎占位符✎ 从新定义组件和路由VueRouter作为插件import，紧接着就要使用Vue.use(VueRouter)作为全局变量◆ App.vue添加跳转信息◆ 路由配置◆ home.vue编写◆ /home 最终结果✎占位符✎ 从新定义组件和路由◆ App.vue添加跳转信息（router-link） ...原创 2020-01-11 15:45:24 · 315 阅读 · 0 评论