Vue
文章平均质量分 69
分享Vue相关的知识
程序员-小李
长路漫漫,任重而道远
展开
-
vue实现二维码生成器应用
实现一个简单的二维码生成器应用,可以使用 Vue 前端结合一个 JavaScript 库(如 qrcode.js 或 QRCode.js)来生成二维码。原创 2024-09-18 13:31:33 · 323 阅读 · 0 评论 -
Vue+Echart实现地图省市区三级下钻
采用在线地图数据,整体简约,扩展也方便。原创 2024-08-14 10:13:10 · 553 阅读 · 0 评论 -
使用 Vue Router 的 meta 属性实现多种功能
通过在 Vue Router 中使用 meta 属性,我们可以方便地实现多种功能,如设置页面标题、管理角色权限、控制页面过渡效果和缓存等。这不仅提高了代码的可维护性,还大大增强了应用的用户体验。希望这篇文章能帮助你更好地理解和使用 Vue Router 的 meta 属性。原创 2024-06-26 10:58:26 · 2227 阅读 · 1 评论 -
深入理解 Vuex:State、Mutations、Actions 和 Getters
State:存储应用中的状态数据。Mutations:定义同步操作以更改状态。Actions:定义可以包含异步操作的函数,最终通过 mutations 来更改状态。Getters:定义从 state 中派生出的新状态,用于对 state 进行计算或处理。理解和掌握这四个核心概念,可以帮助你更好地使用 Vuex 来管理 Vue.js 应用的状态,使你的应用更加稳定和易于维护。原创 2024-06-25 08:15:00 · 987 阅读 · 0 评论 -
vue之elementui,vue-router,echarts导入使用避坑
引入vue-router在package.json中添加依赖版本"dependencies": { "vue-router": "^3.0.1", },然后打开终端,键入npm install,回车,这时会自动下载vue-router相关的包打开项目下的node_modules如果发现有vue-router说明相关的依赖下载好了在项目的src目录下新建router文件夹,此文件放置路由相关的核心文件,然后新建index.js,输入以下内容import Vue fro原创 2022-03-11 15:40:58 · 855 阅读 · 0 评论 -
Vue中props用法
在Vue中通过props,可以将原本孤立的组件串联起来,也就是可以子组件可以接收父组件传递过来的data,比如子组件想要引用父组件的数据,那么在props里面声明一个变量,这个变量就可以引用父元素的数据。实例演示:子组件:<template> <div> <h3>我是{{name}},今年{{age}}岁,爱好:{{hobby}}</h3>,{{flag}} </div></template><.原创 2021-11-23 22:33:46 · 2891 阅读 · 0 评论 -
Vue中ref的用法与演示
本期探讨一下vue中ref的用法:ref 定义:被用来给元素或子组件注册引用信息。引用信息会被注册在父组件上的$refs对象上。如果是在普通的dom元素上使用,引用指向的就是dom元素;如果用在子组件上,引用指向的就是组件实例。举例:组件1:<template> <div> 我是{{name}} </div></template><script>export default { name:'原创 2021-11-22 20:03:19 · 2716 阅读 · 1 评论 -
vue中v-for指令的使用
本文就Vue中列表渲染做个简单总结和使用演示:列表渲染是用v-for指令根据绑定一组元素的选项来完成的,渲染格式可以自定义。列表遍历最基本的使用案例1:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi原创 2021-11-17 23:41:24 · 1148 阅读 · 0 评论 -
浅谈Vue中条件渲染:v-if和v-show的使用
浅谈Vue中的条件渲染条件渲染是根据表达式真值情况动态选择与之绑定的元素是否在页面显示出来有v-if和v-show这两种方式来实现动态渲染v-if根据表达式的真假值决定该元素是否存在与页面中举例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g原创 2021-11-15 14:06:23 · 2212 阅读 · 0 评论 -
Vue中插槽slot用法
说说Vue中插槽slot的使用如何定义和使用在组件的template中使用slot标签定义,slot标签中间可以定义默认显示值,如果slot标签没有声明name属性值,在使用插槽时将默认从第一个插槽依次往下放置,为了方便使用,一般都会都插槽slot指定一个name属性值,当要使用该插槽时,只需要在要使用的标签内添加slot=‘插槽名字’,就可以将指定的标签放到指定的插槽内,插槽内可以是任意内容。举例:<!DOCTYPE html><html lang="en"><原创 2021-10-28 23:20:46 · 304 阅读 · 1 评论 -
Vue里$refs与$parent用法及练习
Vue里$refs用法用法一:ref加在普通的元素上,用this.$refs.name获取到的是dom元素用法二:ref加在组件上,用this.$refs.name获取到的是组件实例,可以使用组价的所有方法$parent用法通过this.$parent可以访问到当前组件的父组件里所有的数据以及方法Vue组件通信练习巩固题目:在Vue实例下data数据层有一个数组list(数据任意存放),2个组件,组件1 cpn1有子组件cpnn1,cpnn1有子组件cpnnn1,在组件cpnnn1原创 2021-10-27 22:40:21 · 1502 阅读 · 0 评论 -
vue学习阶段性总结回顾
vue学习总结文章目录vue学习总结引进库文件:三种方式引入简单实例简单解释模板语法数据绑定el的两种写法data属性的两种写法MVVM模型Object.defineproperity什么是数据代理?vue中数据代理事件的基本使用事件修饰符自定义快捷键系统修饰键计算属性监视属性样式绑定引进库文件:三种方式引入CDN方法导入(国内) <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script&原创 2021-10-21 23:04:34 · 319 阅读 · 1 评论