vue
文章平均质量分 68
珍妮的小罐君
越努力,越幸运!
展开
-
页面如何添加水印?
最近做vue项目的时候,需要要求要在页面中添加水印的效果,网上找了一些方法,具体操作如下:(1)页面中添加一个文件比如 waterMark.ts, 代码如下:const watermark: any = {};const setWatermark = (str: any) => { const id = '1.23452384164.123412415'; ...原创 2020-04-11 11:22:13 · 1100 阅读 · 0 评论 -
vue 项目如何实现动态加载路由?
一、思路① 在vue-router对象中首先初始化公共路由,比如(首页,404,login)等② 用户登陆成功后,根据用户的角色信息,获取对应权限菜单信息menuList,并将后台返回的menuList转换成我们需要的router数据结构③ 通过**router.addRouter(routes)**方法,同时我们可以将转后的路由信息保存于vuex,这样我们可以在我们的SideBar组...原创 2020-03-25 17:53:38 · 9588 阅读 · 7 评论 -
Vue组件间通信方式
组件可以封装一些重用的代码,通过传入不同的数据,实现组件的复用。组件之间传递数据基本上可以分为三种:父子组件、兄弟组件、隔代组件(跨组件),针对不同场景,我们可以选择不同的方式,具体如下:父子组件通信:(1)props/$emit父组件通过自定义属性传递数据,子组件通过props来接收;子组件通过emit传递一个自定义事件,父组件通过自定义事件来操作相应的逻辑:父组件:&...原创 2019-11-27 14:10:26 · 279 阅读 · 0 评论 -
vue-cli 3.0 引入mint-ui报错
场景:官网:http://mint-ui.github.io/docs/#/zh-cn2/quickstart npm i mint-ui -S main.ts 文件中引入并使用 import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'Vue.use(MintUI) 然后报错提示:Could not find ...原创 2019-09-06 14:17:24 · 1934 阅读 · 0 评论 -
vue + ionic 搭建移动端项目
vue创建项目:找一个空文件夹,使用如下命令构建vue 项目: vue create app-web备注:app-web为项目的名字 构建成功后,运行:npm run serve ,在浏览器中输入:locahost:8080 即可看到效果 使用如下命令,安装ionic: npm install @ionic/vue @ionic/core --save...原创 2019-06-28 17:09:23 · 6508 阅读 · 1 评论 -
vue filter过滤器
vue项目中,如果需要对某个字段进行处理,一般我们会写一个filter,如下,我们新建一个filters.js的文件,然后声明了两个filter,如下所示:const viCurrency = (val: any) => { if (!val) { return null; } let money = Math.ceil(+val); ...原创 2019-06-20 16:41:37 · 474 阅读 · 0 评论 -
Vue 组件间通信方式
前言组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。一般来说,组件可以有以下几种关系:如上图所示,A 和 B、B 和 C、B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代)。针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式,如p...原创 2019-05-31 16:15:18 · 312 阅读 · 0 评论 -
vue-router 配置路由
router:路由其实就是指根据不同URL跳转到对应的页面。Vue-router通过管理URL,实现URL和组件的对应,以及通过URL进行组件之间的切换。如何使用?1.安装cnpm install vue-router2.配置路由(1)在src目录新建一个router文件夹,并新建一个index.js文件(2)编辑index.js文件import Vue from 'vue...原创 2018-09-18 19:07:03 · 284 阅读 · 0 评论 -
Vuex如何使用
1:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,简单说Vuex可以帮助我们管理一些共享状态。2:为什么?(1)多个组件依赖同一个状态。(2)不同组件需要操作同一个状态因此,把组件的共享状态抽取出来,任何组件都能获取状态或者触发行为3:Vuex 应用的核心是 store(仓库),包含着应用中大部分的状态 (state)。Vue...原创 2018-09-07 10:53:05 · 207 阅读 · 0 评论 -
vue-router传参
vue-router传参两种方式:params和queryparams、query是什么? params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params query:/router1?id=123 ,/router1?id=456 ,这里的id叫做query。方法1: query 方式传参和接收参数 ...原创 2018-09-10 10:47:31 · 212 阅读 · 0 评论 -
修改mint-ui默认样式
Mint UI 是基于 Vue.js 的移动端组件库,有时候我们需要修改它的默认样式,方法如下:1. 安装sass的依赖包(前提:已安装node环境)由于sass-loader依赖于node-sass,所以先安装node-sass: cnpm install --save-dev node-sass 安装sass-loader: cnpm install -...原创 2018-09-06 10:06:58 · 4119 阅读 · 0 评论 -
如何用vue创建项目?
如果你要使用vue-cli,你需要按如下步骤去操作:(1):第一步: 安装:安装前,你一定要注意,需要安装3个环境: Node.js(版本必须>=6.x,最好是8.x); npm环境(版本必须>=3);如果你安装了node6.0,那么它的npm版本就是3.0;如果node版本是8.0,那么npm的版本就是5.0;(node环境集成了np...原创 2018-03-23 18:31:12 · 2439 阅读 · 0 评论