vue弹框修改
根据表ID 修改索引：弹框效果实现的代码：<el-table-column label="操作" width="200" align="center"> <template slot-scope="scope"> <div> <el-button size="mini" type="text" @...
2024-01-10
vue.js实现只弹一次弹框
核心代码是 getCookie()部分,控制弹框的显示隐藏则在 created()中。<template> <div v-if="isShow"> <!--最外层背景--> <div class="popup_container"> <!--居中的容器--> <img @click="noPopup" src="delete.png" alt=""> <!--关闭弹框--> <div class="popup_text"> <!--内容部分--> Lorem ipsum dolor sit ...
2024-01-10vue 弹框产生的滚动穿透问题的解决
最近开发过程中遇到一些小问题(似乎问题总是那么多)，但一直没什么时间去优化与解决。程序员不能被业务绑架，有时间还是花点在代码，开始这次的vue尝试吧。首先定义一个全局样式：.noscroll{ position: fixed; left: 0; top: 0; width: 100%;}创建一个dom.js文件，定义几个方法：export function hasClass(el, ...
2024-01-10
如何优雅的写一个Vue 的弹框
写Vue或者是react 都会遇见弹框的问题。也尝试了多种办法来写弹框，一直都不太满意，今天特地看了一下 Element UI 的源码，模仿着写了一个简易版。大概有一下几个问题：1、弹框的层级问题，如果在嵌套的组件里面使用了弹框，可能会出现弹框的层级不够高2、弹框的函数调用方式首先第一点：弹框...
2024-01-10通过vue.extend实现消息提示弹框的方法记录
前提回顾在项目开发中我们经常使用的组件注册分为两种，一个是全局注册和另一个是局部注册，假设我们的业务场景是用户在浏览注册页面时，点击页面中的注册按钮后，前端根据用户的注册信息先做一次简单的验证，并根据验证弹出一个对应消息提示弹框我们拿到这个需求后，便开始着手准备要...
2024-01-10
vue中超简单的方法实现点击一个按钮出现弹框，点击弹框外关闭弹框
效果图展示：View层<template> <div> <div class="mask" v-if="showModal" @click="showModal=false"></div> <div class="pop" v-if="showModal"> <button @click="showModal=false" class="btn">点击出现弹框</button> </div> <button @click="showModal=true" class=...
2024-01-10
vue实现骨架屏的示例
目录骨架屏用途Vue架构骨架屏思路大纲定义一个抽象组件获取插槽并初始化操作骨架屏循环slots操作类名操作vnode的静态类名使用方法传值效果如下完整地址骨架屏用途作为spa中路由切换的 loading, 结合组件的生命周期和ajax请求返回的时机来使用.（ 作为loading 使用）。作为与用户联系最为密切的前端...
2024-01-10
Vue框架快速入门
Vue是现在最流行的前端框架之一，而且相对于其他两个框架React和Angular来说也更加易学，而且它的作者是国人，中文文档也很完善。当然Vue框架算是比较高级的框架，所以在使用过程中还需要JavaScript、JavaScript 2015、WebPack、NodeJS、npm、ESLint、JavaScript单元测试框架等其他知识和框架的使用方法。在学习Vue...
2024-01-10
vue 二三倍图适配，1像素边框
//文件名为mixin.scss// 2,3倍图适配@mixin bg-image($url){ background-image: url("~imgs/icon/" + $url + "@2x.png"); @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){ background-image: url("~imgs/icon/" + $url + "@3x.png"); }}//一像素边框@media...
2024-01-10
vue框架整体流程
1、整体流程（1）模板解析成render函数（2）响应式监听（3）首次渲染，显示页面，绑定依赖（4）data属性变化，触发rerender2、模板解析为render函数参考上一篇博客。模板的所有信息都被render函数包含。模板中用到的data属性，都变成了js变量模板中的v-for等都变成了js逻辑render函数返回vnode3、响应...
2024-01-10
搭建vue框架
1到网上下载node.js,安装，（新版node，包括了npm ）。2下载Git安装。3.你需要的地方建一个文件夹。打开cmd,跳转到这个文件夹输入npm install -g vue-cli 完成安装。输入vue出来信息说明成功了。4.vue init webpack vue_project，...
2024-01-10
关于vue 框架与后台框架的混合使用的尝试
这几天我在研究前台框架和后台框架融合的问题,进行了一些尝试;我前台选择的是 vue,当然也可以选择 react 等其他 mvvm 框架,不过 vue 对于我来说是最熟悉的;后台话,我选择的是 php 的 lumen 框架,他是laravel 的简化版,因为比较轻量,所以这也是我的选择;先说下我这边的环境:系统:Mac os 10.12;服务器:apache 2.2;...
2024-01-10
vue实现带放大镜的搜索框
本文实例为大家分享了vue实现带放大镜的搜索框，供大家参考，具体内容如下字体图标在input单标签中的用法：第一步，先在main.js 中全局引入iconfont图标；第二步，给input 标签动态绑定一个属性，设置值为data中的变量；第三步，将字体图标代码中的 &#x 改为 \u代码如下：<template> <div class="logi...
2024-01-10
基于vue的前端测试框架
1、Vue Test Utils 官网https://vue-test-utils.vuejs.org/zh/2、推荐Jest库Jest特点有：一站式测试方案DOM API断言库Mock库快照覆盖率3、实践（待更新）...
2024-01-10
前端框架vue
现代前端框架大行其道，讲前端思想从操作dom的阶段，升级到操作数据的阶段。vue作为三大前端框架之一，其中平缓的学习曲线，让好多前端新手非常喜欢，应用也越来越广泛。虽然其他两个框架有facebook，和google撑腰，但是vue已然是不可小觑的对手了。无论你去做前端面试还是公司新项目技术选型，v...
2024-01-10
vue实现骨架屏的示例
目录骨架屏用途Vue架构骨架屏思路大纲定义一个抽象组件获取插槽并初始化操作骨架屏循环slots操作类名操作vnode的静态类名使用方法传值效果如下完整地址骨架屏用途作为spa中路由切换的 loading, 结合组件的生命周期和ajax请求返回的时机来使用.（ 作为loading 使用）。作为与用户联系最为密切的前端...
2024-01-10
vue渲染错误
vue 报错：[Vue warn]: Error in render: “TypeError: Cannot read property ‘1’ of undefined”原因：组件中，使用异步加载数据渲染组件。在组件第一次渲染时，数据对象还没有被赋值，此时组件渲染会因为缺少数据报错。解决：用v-if控制，在异步拿到数据之前，不渲染该组件。...
2024-01-10
vue实现右侧滑出层动画
本文实例为大家分享了vue实现右侧滑出层动画的具体代码，供大家参考，具体内容如下效果图：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="flexible" content="initial-dpr=2" />...
2024-01-10
vue实现树形表格
本文实例为大家分享了vue实现树形表格的具体代码，，供大家参考，具体内容如下效果如下：居中的图片：代码如下：<template> <div class="treeTable"> <table> <tr> <th>设备类型</th> <th>产品名称</th> <th>版本</th> <th>检查项</th> <th>检查子项</th> <th>检查大类</th> ...
2024-01-10
vue实现购物车案例
本文实例为大家分享了vue实现购物车的具体代码，供大家参考，具体内容如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>购物车案例</title> <script src="...
2024-01-10
vue部分
watch、computed、methods区别是什么watch是侦听属性；computed是计算属性；methods是方法。computed有缓存；如果computed属性依赖的属性没有发生变化，计算属性会立即返回之前的计算结果。而methods里面的函数在每次调用时都要执行。watch和computed都是以Vue的依赖追踪机制为基础的。methods里面是用来定义函数...
2024-01-10
vue数据请求
我是vue菜鸟，第一次用vue做项目，写一些自己的理解，可能有些不正确，欢迎纠正。vue开发环境要配置本地代理服务。把config文件加下的index.js里的dev添加一些内容，dev: { env: require(\'./dev.env\'), port: 8090, autoOpenBrowser: true, assetsSubDirectory: \'static\', assetsPublicPath: \'/\', proxyTable: { \...
2024-01-10
vue小白快速入门
一、vue是什么Vue 是一套用于构建用户界面的渐进式框架。压缩后仅有17kb二、vue环境搭建你直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。但在用 Vue 构建大型应用时推荐使用 NPM 安装。这里推荐一下是用淘宝的cnpm，非常的快npm install -g cnpm --registry=https://registry.npm.taobao.org然后进行...
2024-01-10
vue实现登录类型切换
本文实例为大家分享了vue实现登录类型切换的具体代码，供大家参考，具体内容如下运行效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录类型切换</title> <script src="../js/vuejs-2.5.16.js"></script></head><body><div id="app"> <span v-if="isUser"> <label for="userAccount">用户...
2024-01-10
vue总结
<!-- 1. MVC 和 MVVM 的区别 --><!-- 2. 学习了Vue中最基本代码的结构 --><!-- 3. 插值表达式 v-cloak v-text v-html v-bind（缩写是:） v-on（缩写是@） v-model v-for v-if v-show --><!-- 4. 事件修饰符 ： .stop .prevent .capture .self .once --><!-- 5. el 指定要控制的区域 data 是个对象，指定了控制的区域内要用到的数据 methods 虽然带个s...
2024-01-10
