浅谈Vue中插槽slot的使用方法
如何定义和使用：
在组件的template中使用slot标签定义,slot标签中间可以定义默认显示值，如果slot标签没有声明name属性值，在使用插槽时将默认从第一个插槽依次往下放置，为了方便使用，一般都会都插槽slot指定一个name属性值，当要使用该插槽时，只需要在要使用的标签内添加...[2021/11/24]
Vue监听属性图文实例详解
目录?什么是监听属性？监听属性和计算属性的区别？监听属性的使用深度监听立即调用写在最后 ?什么是监听属性？
??所谓监听就是对内置对象的状态或者属性变化进行监听并且做出反应的响应，监听属性，意思就是可以监视其他数据的变化。
监听属性和计算属性的区别？
计算属性是依赖的值改变后重新计算结果...[2021/11/24]
Vue中ref的用法及演示
目录 ref 定义：被用来给元素或子组件注册引用信息。引用信息会被注册在父组件上的$refs对象上。
如果是在普通的dom元素上使用，引用指向的就是dom元素；
如果用在子组件上，引用指向的就是组件实例。
举例：
组件1：
<templat...[2021/11/24]
Vue中props用法介绍
?前言：
在Vue中通过props,可以将原本孤立的组件串联起来，也就是可以子组件可以接收父组件传递过来的data,比如子组件想要引用父组件的数据，那么在props里面声明一个变量，这个变量就可以引用父元素的数据。
实例演示：
子组件：
<template&g...[2021/11/24]
vue中v-for指令完成列表渲染
目录1、列表遍历2、Vue中key的作用3、列表过滤 本文就Vue中列表渲染做个简单总结和使用演示:
列表渲染是用v-for指令根据绑定一组元素的选项来完成的，渲染格式可以自定义。
1、列表遍历
最基本的使用案例1：
<!DOCTYPE html>
&...[2021/11/24]
vue网络请求方案原生网络请求和js网络请求库
一、?原生网络请求
1. XMLHttpRequest（w3c标准）? ?
没有promise时的产物
当时的万物皆回调，太麻烦
2. Fetch? ?
html5提供的对象，基于promise 因为promise的存在，为了简化网络请求。
使用 Fetch - Web...[2021/11/23]
Vue Element-ui实现树形控件节点添加图标详解
目录1.效果图2.树形表格绑定数据加标签3.所有代码其他实现总结 1.效果图
2.树形表格绑定数据加标签
想要在树形控件的树节点加上图片或者element-ui的图标，可以在树形表格绑定数据中加上标签icon
children: [
{
...[2021/11/23]
解决父子组件通信的三种Vue插槽
目录前言环境准备Category组件App组件一、默认插槽二、具名插槽三、作用域插槽总结
前言
插槽可以说是 Vue 中非常重要的一部分吧，在我学习和练习的过程中，当组件搭配着插槽一起使用的时候，会发挥的更好一些。更多时候也会更加方便。
今天介绍Vue中三种插槽吧：默认插槽、具名插槽、作用...[2021/11/23]
手把手教你搭建vue3.0项目架构
目录前言：一、用 vue-cli 创建项目二、安装路由三、完善目录结构，创建配置文件vue.config.js四、安装ant-design-vue，安装le 、安装dayjs五、安装vuex、axios六、vue3的一些新语法七、总结 前言：
GitHub上我开源了vue-cli、vue-cli...[2021/11/22]
Vue实现简易记事本功能
本文实例为大家分享了Vue实现简易记事本功能的具体代码，供大家参考，具体内容如下
预览图：
功能如下：
（1）输入任务并按下回车键，可将任务添加至任务列表（不可输入重复任务）
（2）点击删除，可删除对应任务
（3）点击清空，所有任务都会被删除
（4）左下角同步显...[2021/11/22]
用vue实现注册页效果?vue实现短信验证码登录用vue实现注册页效果?vue实现短信验证码登录
本文实例为大家分享了vue实现注册页效果 的具体代码，供大家参考，具体内容如下
一、实现效果图
??
二、实现代码
1、实现头部
<template>
<div cla ="box">
<div cla ="box1">
...[2021/11/22]
vue实现手机验证码登录
本文实例为大家分享了vue实现手机验证码登录的具体代码，供大家参考，具体内容如下
验证码
<template>
<div>
<el-main>
<el-form :model="ruleForm" :rules...[2021/11/22]
vue实现记事本小功能
本文实例为大家分享了vue实现记事本小功能的具体代码，供大家参考，具体内容如下
直接上代码：
<!DOCTYPE html>
<html lang="en">
<script src="https: cdn.jsdelivr.net/npm/v...[2021/11/22]
vue插值表达式和v-text指令的区别
目录1.使用插件表达式2.在插件表达式中使用v-cloak解决闪烁问题3.插件表达式 {{me age}} 语法只能在标签内容中使用
{{}}这种语法叫做插值表达式，在插值表达式中可以写任何合法的js表达式
1.使用插件表达式
使用插件表达式，存在内容闪烁问题，但是v-text没有闪...[2021/11/22]
vue指令?v-bind的使用和注意需要注意的点
目录1、v-bind:可以为元素的属性绑定一些数据2、v-bind:可以简写成 ： 推荐直接写冒号3、v-bind：指令表达式的拼接， 1、v-bind:可以为元素的属性绑定一些数据
<div id="app">
<p v-bind:title="me ...[2021/11/22]
vue+webrtc(腾讯云) 实现直播功能的实践vue+webrtc(腾讯云) 实现直播功能的实践
目录1.直播效果2.开直播步骤2.1引入腾讯web端(快直播)脚本2.2在需要使用直播的界面 添加一个视频容器(开启直播后，显示视频的位置)2.3创建直播对象，开启直播2.4关闭直播 1.直播效果
1.pc端
2.移动端
2.开直播步骤
2.1引入腾讯web端(快直播)脚...[2021/11/22]
Vue中使用?class?类样式的方法详情
在vue中为我们提供了 几种方式来使用cla 类的样式
1. 布尔值
我们先正常在 style 标签中 书写一个类名为 active的样式
<style>
.active{
color: red;
fo...[2021/11/22]
Vue之props 配置详解
<template>
<div cla ="demo">
<h1>{{ msg}}</h1>
<h2>学生姓名：{{name}}</h2>
<h2>学生性别：{{s...[2021/11/22]
Vue之组件详解
<body>
<div id="root">
<h2>{{name}}</h2>
<hr>
<school>< chool...[2021/11/22]
Vue之生命周期函数详解
目录生命周期函数常用的生命周期的钩子
关于Vue销毁实例：
总结
生命周期函数
生命周期函数又叫：生命周期回调函数，生命周期函数、 生命周期钩子
是什么：Vue在关键时刻帮我们调用一些特殊名称的函数
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
生...[2021/11/22]
Vue之常用的内置指令详解Vue之常用的内置指令详解
<body>
<div id="root">
<h1 v-pre>好好学习</h1>
<h1>{{name}}</h1>
<h1 v-text...[2021/11/22]
Vue之过滤器详解Vue之过滤器详解
<body>
<div id="root">
<h2>显示格式化后的时间</h2>
<!-- 计算属性实现 -->
<h2>现在是{{fmtTime...[2021/11/22]
Vue之表单事件数据绑定详解
<body>
<div id="root">
<form action="" @submit.prevent="demo">
<label for="TW"> 姓名：</lab...[2021/11/22]
Vue之监听数据的原理详解
<body>
<div id="root">
<h1>学生的基本信息</h1>
<button @click="student.age++">年龄+1岁</button&g...[2021/11/22]
Vue之事件处理和事件修饰符详解
<div id="root">
<h2>{{name}}，加油！</h2>
<!-- 阻止默认事件 -->
<a @click.prevent="showInfo"...[2021/11/22]
vue项目中如何使用mock你知道吗
目录第一步：第二步，在request.js中进行相关配置，request.js代码如下：第三步，在mock.js中进行相关配置，mock.js代码如下：第四步，在main.js中需引入mock.js即可第五步，在页面中使用总结
Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行...[2021/11/22]
vue中filter的应用场景详解
filter一般用于过滤某些值，比如我这个字段是空，可是我想在前端显示“–”，就可以使用到它了。
最近碰到一个需求就是要给某些字段可以设置权限去以其他形式显示，比如以“***”显示需要隐藏的金额。
1.获取金额权限
2.通过filter过滤满足条件的字段
3.返回隐...[2021/11/22]
Vue实现路由嵌套的方法实例
1、嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。（其实就是套娃操作罢了，跟后端的视图跳转路径蛮像的）：
2、 创建用户信息组件，在 view user 目录下创建一个名为 Profile.vue 的视图组件：
Profile.vue
<templ...[2021/11/22]
Vue之计算属性详解
1、何为计算属性：大白话讲就是计算出来的结果保存在属性当中，可以想象为缓存。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<t...[2021/11/16]
Vue3使用Proxy实现数据监听的原因分析
vue 数据双向绑定原理,而这个方法有缺点，并且不能实现数组和对象的部分监听情况;具体也可以看我之前写的一篇博客： 关于 Vue 不能 watch 数组 和 对象变化的解决方案,最新的 Proxy，相比 vue2 的 Object.defineProperty，能达到速度加倍、内存减半的成效。具体...[2021/11/16]
vue组件通信的多种方法详解
目录1. 父传子2. 子传父3. 非父子组件传值4. vuex5. refs6. $children7. $parent8. provide & inject9. $attrs10. $listeners总结 说起组件通信，可能大家耳熟能详的有以下5种：
1. 父传子
父组件通过自定...[2021/11/16]
element ui表格实现下拉筛选功能
本文实例为大家分享了element ui表格实现下拉筛选的具体代码，供大家参考，具体内容如下
1、default-sort中prop传入要排序的字段(接口返回或自己定义的数据)、order代表排序，这里用到降序
2、filters对象中text代表页面中显示的筛选文字,value代表筛选用到...[2021/11/16]
vue+openlayer5获取当前鼠标滑过的坐标实现方法
前言：
在vue项目中怎么获取当前鼠标划过的坐标呢，这里来分享下方法。 实现效果：
实现步骤：
1、引入相关文件
import MousePosition from ''ol/...[2021/11/16]
vue中路由跳转的方式有哪些你知道吗
目录第一种方式：router-link （声明式路由）第二种方式：router.push(编程式路由)第三种方式：this.$router.push() (函数里面调用)第四种方式：this.$router.replace() (用法同上,push)
参考：总结
第一种方式：router-link...[2021/11/16]
VUE的数据代理与事件详解
目录回顾Object.defineProperty方法何为数据代理Vue中的数据代理事件的基本使用事件的修饰符键盘事件总结
回顾Object.defineProperty方法
<!DOCTYPE html>
<html>
<head>
&...[2021/11/15]
解析element-ui中upload组件传递文件及其他参数的问题
最近项目用到了vuethink，里面集成了element-ui，之前一直用的是bootstrap框架，对js也是一知半解，然后也用过vue.js，但也是学的不通透的，然后就各种入坑。
下面就分析一下我使用element-ui遇到的问题以及解决方法吧，如有不足请指正。
首先在element-...[2021/11/9]
elementUI实现级联选择器
本文实例为大家分享了elementUI实现级联选择器的具体代码，供大家参考，具体内容如下
1、从后端调用接口，传递数据到前端
2、使用VUE代码显示级联选项
<el-cascader
:disabled="isDisabled"
...[2021/11/9]
Vue项目首屏性能优化组件实战指南
目录Vue首屏性能优化组件
描述
IntersectionObserver
requestIdleCallback
实现
总结 Vue首屏性能优化组件
简单实现一个Vue首屏性能优化组件，现代化浏览器提供了很多新接口，在不考虑IE兼容性的情况下，这些接口可以很大程度上减少编写代码的工作量以及...[2021/11/9]
vue element 表头添加斜线的实现代码
<template>
<div cla ="app-container">
<el-table :data="tableData3" style="width: 100%">
<el-table...[2021/11/8]
vue多页面配置详情
目录1、多页面的区别2、SPA 与 MPA3、Vue Cli 脚手架配置 1、多页面的区别
单页应用这个概念，是随着前几年 AngularJS、React、Ember 等这些框架的出现而出现的。在前面的前言内容里，我们在页面渲染中讲了页面的局部刷新，而单页应用则是使用了页面的局部刷新的能力，在切...[2021/11/8]
Vue大屏数据展示示例
高效实现需求，避免臃肿的组件库和重复造轮子，前段时间做了很多大屏展示类的项目，今天来跟大家分享一下，大屏的实践过程，最开始我是使用了dataview 这个组件库，然后发现是自己并不需要它太多的封装好的组件，而且在移动端，有样式错乱的问题。所以自己看了他的实现方式，搞了一个大屏自适应的组件。话不多说...[2021/11/8]
Vue之前端体系与前后端分离详解
目录概述前端知识体系前端三要素表现层（CSS）行为层（JavaScript）JavaScript 框架 UI框架JavaScript 构建工具三端统一混合开发（Hybrid App）微信小程序后端技术主流前端框架ElementUlICEVantUlAtUlCubeUl前端发展史
基于AJA...[2021/10/25]
vue利用vue meta info设置每个页面的title与meta信息vue利用vue meta info设置每个页面的title与meta信息
title: vue 使用 vue-meta-info 设置每个页面的 title 和 meta 信息 #文章页面上的显示名称，一般是中文
date: 2019-11-20 16:30:16 #文章生成时间，一般不改，当然也可以任意修改
categories: vue #分类
ta...[2021/10/25]
浅谈Vue3的几个优势
目录1、源码1.1 monorepo1.2 TypeScript2、性能
2.1 优化源码体积2.3 Proxy2.4 Composition API
Vue2已经非常优秀，且具备完善的社区和生态，但是Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化
1、源码
1.1...[2021/10/25]
vue中router-view组件的使用详解
在开发vue项目中经常需要实现一个页面里面可以切换着展现不同的组件页面
例如：下图中通过点击侧边栏不同的组件路由到不同的组件页，而侧边栏和顶部部分是不变的，切换的只是组件页面。
这个时候我们就需要用到 路由中的 router-view组件（也叫路由占位符） 了
首先我们来到 需要...[2021/10/25]
Vue生命周期介绍和钩子函数详解
目录Vue生命周期介绍和钩子函数
VUE生命周期钩子
Vue生命周期简介
create 和 mounted 相关
update 相关
destroy 相关
总结
Vue生命周期介绍和钩子函数
组件每个阶段它的内部构造是不一样的，所以一般特定的钩子做特定的事，比如Ajax获取数据就可以在mo...[2021/10/25]
浅谈VUE uni-app 常用API浅谈VUE uni-app 常用API
目录一、路由与页面跳转二、界面总结 一、路由与页面跳转
uni.navigateTo(OBJECT)
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。uni.redirectTo(OBJECT)
关闭当前页面，跳转到应用内的某个页面。u...[2021/10/19]
浅谈VUE uni-app 核心知识
目录规范
a. 页面文件遵循vue单文件组件规范b. 组件标签靠近小程序规范c. 接口能力（JS API）靠近微信小程序规范e. 数据绑定及事件处理使用Vue.js 规范特色
a. 条件编译b. App端的Nvue开发
c. HTML5+
总结 规范
a. 页面文件遵循vue单文件组件规范
...[2021/10/19]
浅谈VUE uni-app 开发环境
目录1.通过 HBuilderX 可视化界面
2.通过 vue-cli 命令执行总结 1.通过 HBuilderX 可视化界面
a. 创建uni-app；
b. 运行uni-app;
c. 发布uni-app
2.通过 vue-cli 命令执行
a. 安装node.j...[2021/10/19]
浅谈VUE uni-app 模板语法
1.v-bind（简写 ：）
组件属性中要使用data中定义的数据变量，或组件属性要使用表达式，需用v-bind指定
简写 ：
2.v-on（简写@）
监听DOM事件
click.stop 可以阻止事件穿透
3.v-model
数据双向绑定
4....[2021/10/19]
经验首页