vue实现员工信息录入功能
Vue通用信息录入界面，供大家参考，具体内容如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>员工信息录入</title> <style> .btn1{ color: blue; background: skyblue; text-align: center; } </style></head><body> <div id="div2"> <fieldset> <legend>员工信息录入</legend> ...
2024-01-10
vue(七)
给文件夹取别名通过import导入的时候可以直接应用别名而通过非import的方式引入的时候，要在别名前面加一个"~"PromisePromise是ES6的新增内容通过setTimeout模拟异步请求一秒钟后打印Hello WorldPromise的简单体会通过promise可以将回调地狱转化为链式编程，结构更清晰，代码更优雅Promise讲解Promise的三...
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系列——数据请求
数据请求有两个问题，一个是工具选择，一个是代码组织问题（一）工具选择 我看过一些别人写的项目，有直接用jquery提供的ajax接口，有自己封装了一个fetch接口，当然更多的是选择vue的第三方数据请求模块，说的最多的是vue-resource和axios；axios是目前最推荐的，但是我最终还是暂时选择了vue-resou...
2024-01-10
vue长列表优化
写在前面：不知不觉 ～2020年的日子已经过去了3/4，看到微博热搜说：2020年还剩下3个月的时候，心情突然骤降～哈哈哈哈切入正题：什么是长列表优化？我们为什么需要长列表优化？我们怎样进行长列表优化长列表优化 在我们的日常工作中，会越到各种各样的列表，比如，我们通常采用分页...
2024-01-10
vue知识点集锦
1、vue的优点？轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习双向数据绑定：保留了angular的特点，在数据操作方面更为简单组件化：保留了react的优点，实现了HTML的封装和重用，在构建单页面应用方面有...
2024-01-10
vue锚点
第一种：router.js中添加mode: 'history', srcollBehavior(to,from,savedPosition){ if(to.hash){ return {selector:to.hash } } }组件：<template><div><ul class="list"><li><a href="#1" rel="external nofollow" >星期1</a></li><li><a href="#2" rel="external nofollow" >星期2...
2024-01-10
vue的基本介绍
Vue 的基本介绍1. 库(library)和框架(Framework)的区别库: 是一系列函数的集合,如果想要实现某个功能,直接调用库里面的方法即可. 例如(jquery).使用库 : 开发人员起主导作用框架: 是一套完整的解决方案,它制定了一个规则,想要使用框架,就要按照框架的规则来编写代码,框架会在何时的时机执行我们编写...
2024-01-10
vue实现横向斜切柱状图
本文实例为大家分享了vue实现横向斜切柱状图的具体代码，供大家参考，具体内容如下实现效果：实现代码：<template> <div class="Consumption"> <div style="width: 350px; height: 180px" ref="ConsumptionChart" /> </div></template><script>import echarts from 'echarts'const myShape = { x: 0, y: 0, width: 10 ...
2024-01-10
vue注意内容
ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 $refs 对象上。一、1、如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过$ref可能获取到在子组件里定义的属性和方法。2、 如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获...
2024-01-10
Vue状态管理vuex
前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue提供了vuex。本文将详细介绍Vue状态管理vuex引入 当访问数据对象时，一个 Vue 实例只是简单的代理访问。所以，如果有一处需要被多个实例间共享的状态，可以简单地通...
2024-01-10
Vue状态管理：vuex基础
还是像以前一样用一个简单的案例来解释vuex首先，新建一个模板demo1 vue init webpack-simple demo我们需要两个组件：一个输入组件和一个显示组件在src文件夹中新建一个components文件夹，添加一个showInfo.vue1 <template>2 <h1>{{ msg }}</h1>3 </template>4 5 <script>6 export default {7 props: ['msg']8 }9 </script>然后，...
2024-01-10
vuex实现简单的购物车功能
本文实例为大家分享了vuex实现购物车功能的具体代码，供大家参考，具体内容如下文件目录如下：购物车组件<template> <div> <h1>vuex-shopCart</h1> <div class="shop-listbox"> <shop-list /> </div> <h2>已选商品</h2> <div class="shop-cartbox"> <shop-cart /> ...
2024-01-10
vuex的数据渲染与修改浅析
1.vuex是什么？用官方的话来说“Vuex 就是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化”。而说的通俗易懂点就是”你想要在不同的组件中使用同一份数据，并且在不同的组件中都可以实时修改它并...
2024-01-10
Vue之Vuex
Vue之VuexVue全家桶vue + vue-router + vuex 更能体现vue的mvvm设计模式，其中：vuex相当于mvvm中的View视图vue-router相当于ViewModel控制器vuex相当于Model数据模型vue全家桶，基本上网页上什么都可以实现为什么要使用Vuex解决组件间传值的复杂性，vuex好比一个商店任何组件都可以进去拿东西安装Vuex官网npm instal...
2024-01-10
vuex的数据渲染与修改浅析
1.vuex是什么？用官方的话来说“Vuex 就是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化”。而说的通俗易懂点就是”你想要在不同的组件中使用同一份数据，并且在不同的组件中都可以实时修改它并...
2024-01-10
vue中 Vuex
一、什么是VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。状态，其实指的是实例之间的共享数据，Vuex是管理应用中不同Vue实例之间数据共享的工具。下图是Vuex官方提供的对于状态管理...
2024-01-10
vuex实现简单的购物车功能
本文实例为大家分享了vuex实现购物车功能的具体代码，供大家参考，具体内容如下文件目录如下：购物车组件<template> <div> <h1>vuex-shopCart</h1> <div class="shop-listbox"> <shop-list /> </div> <h2>已选商品</h2> <div class="shop-cartbox"> <shop-cart /> ...
2024-01-10
vuex修改数据 视图没有更新?
为什么我数据改变了 视图没有更新数据是通过v-bind传递给子组件的组件详细代码回答：你说的视图没更新指的是你的 showAction 和 hideAction 方法没生效么因为你的 this.list 是 computed 的数据，所以我觉得你最好不要直接改 this.list 的数据，而是通过提交 mutation 或者 action 去改vuex store 中的数据，然后再通过 comp...
2024-02-22
vue2弹窗打开没有加载状态?
<template> <div id="app"> <el-dialog :visible.sync="isVisible"> <template slot="title"> <div> <span>图片查看</span> </div> </template> <div v-loading="img...
2024-02-06
vue2 核心概念
一、vue变量所有的 vue变量 ，必须在data：中有注册（哪怕内容是空，相当于声明这个是变量，是vue变量而不是js变量）。这里的变量也可以运算。（注意：所有的框架一定要注意js变量和框架的变量，js变量和框架的变量是可以相互转换，获取的。框架的变量有这个框架变量的定义方法，如东信公司...
2024-01-10
vue总结2
一.过滤器content | 过滤器 ，vue没提供过滤器 ，可自己定义；组件内过滤器就是options中的一个filters属性（一个对象），多个key就是多个过滤器名，多个value就是过滤器方法体；全局：范围大，权利小； 组件内：当过滤器名相同时权力大，范围小； 如图 ：二.获取DOM元素created(){} :组件创建后，数据已...
2024-01-10vue2上传多个文件？
<template> <el-upload actions="#" :http-request="uploadFile" :mulitiple="true" :auto-upload="true" :file-list="fileList" :on-change="handleChange" :show-file-list="false"...
2024-03-10
Vue2 第一天学习
个人小总结：1年多没有写博客，感觉很多知识点生疏了，虽然工作上能解决问题，但是当别人问到某个知识点的时候，还是迷迷糊糊的，所以坚持写博客是硬道理的，因为大脑不可能把所有的知识点记住，有可能某一天忘了，但是我们工作上还是会使用，只是理论忘了，所以写博客的好处是可以把之...
2024-01-10
vue2.x的初始化
其实，vue2.x的模板安装完之后就初始化了，故本文将围绕着模板剖析下初始化的主要流程。首先，打开项目的主目录下的index.html文件，顺藤摸瓜，就会找到该项目的入口js主文件（/src/main.js）。然后，进入 /src/main.js 文件，如下图所示：故，从上图可知main.js的主要结构，还可以找到项目的 主组件...
2024-01-10
vue总结 02指令
指令v-text预期：string详细：更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。示例：<span v-text="msg"></span><!-- 和下面的一样 --><span>{{msg}}</span>参考：数据绑定语法 - 插值v-html预期：string详细：更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不...
2024-01-10
vue2 代码报错？
前端进入这个页面控制台就报错，请大佬帮帮看下哪里有问题？<!-- 登录注册 --><template> <div id="login-img" style="height: 980px"> <div class="container"> <h1 class="loginTitle"> </h1> <!-- 登录注册 --> <div ...
2024-03-10
vue2.x最全最详细思维导图
作为一个前端萌新，我总是处于学了忘，忘了学的尴尬循环中，明明一个知识点反复学过三四次，可是一到面试或者要动手实操的时候却差强人意甚至忘得一干二净......只能和面试官大眼瞪小眼，非常尴尬。经查阅资料，得知这是由于知识在大脑中是无法以孤立形式存在的，知识点与知识点之间必须...
2024-01-10
vue2记录的一些问题
1>vue双向绑定。数字类型居然为字符串?双向绑定之后。数字变成了字符串。原来是因为没有写 v-model.number=的这种绑定。见https://cn.vuejs.org/v2/guide/forms.html，后面的内容会有问题。就会加。...
2024-01-10
