![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue.js
文章平均质量分 59
糖同学前端er
这个作者很懒,什么都没留下…
展开
-
在vue3+vite中使用svg-sprite-loader,antdv修改菜单icon
查看html,在body的后面生成了svg symbol元素,菜单使用的svg记得去色,不然没法继承菜单设置的color。在main的ts中引入index.ts,用app.use注册,引入virtual:svg-icons-register。svgIcon全局组件,index.ts。原创 2024-01-11 10:02:28 · 773 阅读 · 0 评论 -
实现一个基于vue的简易icon库
实现一个通过页面批量上传svg源文件,进行转换后发布到npm仓库,前端按需引用,可以作为团队内部的一个icon库使用,ui在界面上上传,各个项目可以更新使用。原创 2022-07-18 14:28:43 · 758 阅读 · 1 评论 -
vue插槽slot的使用
vue的slot是子组件向父组件提供html自定义模版,具体做法是子组件中定义slot模版,然后在父组件中使用template去填充子组件的slot部分,子组件可以通过在slot上添加属性给父组件传递数据。主要使用在拓展组件上,比如表格组件,让父组件可以自定义每一行的不同情况下的按钮,而子组件只需要关心一些通用的功能、布局和样式,业务逻辑部分在父组件处理,常用于一些vue的ui组件库。具体写法可以参考例子,v-slot:slotName是vue2.6以上的写法,旧写法是slot=“slotName”原创 2020-07-15 09:48:29 · 460 阅读 · 0 评论 -
在vuepress中使用vue组件和highlight
vuepress 中使用 vue 组件 在 vuepress 中一般会直接写 md 文件,但是有时需要做一些自定义的东西,比如展示一些前端效果,点击切换样式等等,就可以结合 vue 组件来实现。1.在.vuepress 文件夹中建立 components 文件夹,添加一个例如名为 my-demo.vue 的文件<template>...原创 2019-06-28 15:14:31 · 9434 阅读 · 1 评论 -
vue-cli+ts+iview单多页面的配置实践
简介实现效果:常见的后台管理系统的 demo。地址:https://github.com/MaTonna/vue-cli-ts-ivew项目启动安装依赖npm i项目启动npm run servehttp://127.0.0.1:3000/page1/index1/contentCenter2 是单页面的类似后台管理的页面,同时这个系统配置了多页面的http://127.0....原创 2019-06-17 19:51:18 · 2427 阅读 · 1 评论 -
vue实战总结
用了十多天看完一份vue实战视频,实现了一个仿饿了么外卖APP。部分总结以及部分实现如下:App.vue 1.App.vue在HTML中使用router-link标签来导航,默认被渲染成一个a标签,通过传入to属性指定链接;<div class="tab-item"> <router-link to="/goods">商品<...原创 2017-01-13 21:47:03 · 28602 阅读 · 62 评论 -
vue-router简单实例
Document Hello App! 默认会被渲染成一个 `` 标签 --> Go to Foo Go to Bar // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 vue.use(vuerouter) // 1. 定义(路原创 2016-12-06 19:23:05 · 4589 阅读 · 0 评论 -
Vue.js笔记-数字拼图小游戏
gamebody { font-family: Arial, "Microsoft YaHei"; color: #fff;} .box { width: 400px; margin: 50px auto 0;} .puzzle-wrap { width: 410px; height: 410px; margin-bottom: 4原创 2016-11-02 09:56:02 · 1081 阅读 · 0 评论 -
Vue.js笔记-vue-router入门
概述vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。本文将以示例的形式来介绍vue-router的各个特性,一共包含转载 2016-11-02 11:29:54 · 3264 阅读 · 1 评论 -
Vue.js笔记-组件
组件 组件可以扩展HTML元素,封装可重用的代码,在较高的层面上,组件是自定义元素,vue.js的编译器为它添加特殊功能,在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。 Vue.js的组件可以理解为预先定义好了行为的ViewModel类。一个组件可以预定义很多选项,但最核心的是以下几个:模板(template):模板声明了数据原创 2016-10-31 16:49:24 · 5918 阅读 · 3 评论 -
Vue.js笔记-条件渲染 列表渲染
条件渲染v-ifdiv id="demo"> div v-if="abc">{{abc.a}}div> //该值为true时显示该标签,为false则不显示div> var vm = new Vue({ el:'#demo', data:{ abc:{ a:"1" } } })script>if...else结构h1原创 2016-10-28 15:01:11 · 7702 阅读 · 0 评论 -
Vue.js笔记-数据绑定
Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强。Vue 模板因而从根本上不同于基于字符串的模板。插值文本 使用Mustache语法(双大括号)进行文本插值 Mustache标签会被相应数据对象的msg属性的值替换,每当这个属性变化时它也会更新。也可以只处理单次插值,今后的原创 2016-10-28 14:58:17 · 2116 阅读 · 0 评论 -
Vue.js笔记-计算属性 class与style绑定
Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。div id="example"> a={{ a }}, b={{ b }}div>var vm = new Vue({ el: '#example', data: { a: 1 }, computed: { // 一个计算属性的原创 2016-10-28 15:00:11 · 16418 阅读 · 0 评论 -
Vue.js笔记-方法与事件处理器
方法处理器 可以用v-on指令监听DOM事件。div id="example"> button v-on:click="greet">Greetbutton>//绑定了一个单击事件处理器到一个方法greetdiv> 在实例中定义这个方法:var vm = new Vue({ el: '#example', dat原创 2016-10-28 15:02:17 · 2994 阅读 · 0 评论 -
Vue.js笔记-表单控件绑定
基础语法 可以用v-model指令在表单控件元素上创建双向数据绑定,根据控件类型它自动选取正确的方法更新元素。textMessage is: {{ message }}span>input type="text" v-model="message" placeholder="edit me">Multiline text{{ messa原创 2016-10-28 15:03:21 · 7519 阅读 · 0 评论