![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
WANGHUAN-
没有签名
展开
-
【vue】router-link 第一个默认选中,exact当地址为 / 的时候被激活,点击高亮等问题
1.在点击导航栏的时候,让被点击的那一个有背景色,其他的没有背景色?如何做?在路由里面设置router/index.js此时页面中会激活open 及active属性在谷歌浏览器检查是否加载,在样式添相应样式即可.active{color:red;}但是此时我们发现 to=’/’ 一直高亮举个例子,如果当前的路径是 /a 开头的,那么 也会被设置 CSS 类名。按照这...原创 2019-03-18 12:16:02 · 8903 阅读 · 0 评论 -
【vue】 vue引入highlight.js高亮显示代码
1.安装npm install --save vue-highlightjsnpm install --save highlight.js这里解释一下为什么要安装两个依赖:vue-highlight.js只是实现了代码高亮的功能,他的安装包里是没有css的样式文件的,因此我们还需要安装一个highlight.js来实现真正的样式。2.引入在我们的入口文件main.js中引用依赖imp...原创 2019-05-24 16:32:28 · 6197 阅读 · 2 评论 -
【vue】动态添加表单input
html: <FormItem> <Row v-for="(item,index) in formData.peers" > <Col span="10" style="margin-bottom: -10px;" > <FormItem > <Input size="small...原创 2019-04-30 11:05:39 · 2379 阅读 · 0 评论 -
【vue-watch】watch监听数据变化 监听对象等
Vue.js 有一个方法 watch,它可以用来监测Vue实例上的数据变动。如果对应一个对象,键是观察表达式,值是对应回调,值也可以是方法名,或者是对象,包含选项。下面写两个demo,参考demo来了解一下demo1<template> <div> <el-input v-model="demo"></el-input> ...转载 2019-04-18 16:09:27 · 1440 阅读 · 0 评论 -
【Vue】You may have an infinite update loop in a component render function.
a、版本问题 升级vue到最高版本 :npm update vue -s升级后会出现与vue-template-compiler不一致问题 执行下边代码b、第一步:执行npm uninstall vue-template-compiler第二步:执行npm install vue-template-compiler@报错中提示的vue的版本号...原创 2019-03-27 16:47:07 · 1809 阅读 · 2 评论 -
【vue】Do not use built-in or reserved HTML elements as component id: header 报错提示
错误提示:不要使用内置或保留的HTML元素作为组件IDheader 使用其他名称,重命名组件。之前是这样换一个非HTML元素即可原创 2019-03-27 16:41:56 · 1294 阅读 · 0 评论 -
【vue】添加scoped后CSS样式只能作用于当前的组件有效
在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化。添加scoped后样式会有一串唯一标识...原创 2019-03-19 11:27:06 · 5283 阅读 · 0 评论 -
【vue】基于Vue的Vue-Quill-Editor富文本编辑器
1.下载Vue-Quill-Editornpm install vue-quill-editor2.模板引<template> <div> <el-card style="height: 610px;"> <quill-editor v-model="content" ref="myQuillE...转载 2019-03-13 14:00:01 · 322 阅读 · 0 评论 -
【vue】vue中v-charts的使用
官方文档:https://v-charts.js.org/#/在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表。1:在初次安装的时候,用的是官方推荐npm...转载 2019-03-13 13:59:02 · 1552 阅读 · 0 评论 -
【vue】vue中引入echarts的两种方式
1.安装echarts依赖 npm install echarts -S2.创建图表a:全局引入main.js页面import echarts from 'echarts'Vue.prototype.$echarts = echartsHello.vue页面<div id="myChart" :style="{width: '300px', height: '300px...转载 2019-03-13 13:56:13 · 1035 阅读 · 0 评论 -
【vue】条件渲染 v-if v-else
1.Vue 提供了一种方式来表达“这两个元素是完全独立的,不要复用它们”。只需添加一个具有唯一值的 key 属性即可:<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="us...原创 2019-03-13 13:53:48 · 168 阅读 · 0 评论 -
【vue】vue的目录结构、项目流程、vue-router
转载 2019-03-13 13:52:42 · 174 阅读 · 0 评论 -
【vue】在vue中引入iview
1.在vue项目下npm install iview --save2.在项目中配置目录:src/main.js 中添加import iView from ‘iview’; // 导入组件库import ‘iview/dist/styles/iview.css’; // 导入样式Vue.use(iView);...原创 2019-03-13 13:50:50 · 817 阅读 · 1 评论 -
【vue】vue如何创建一个项目
1.第一步安装node.js首先去node.js官网去下载,点击下一步安装即可。2.第二步项目初始化(vue脚手架)npm install vue-cli -g3.创建一个项目名为test的项目vue init webpack test4.安装项目依赖(成功后项目下会有一个node_modules文件夹)npm install5.运行项目npm run dev 成功运行后在浏...原创 2019-03-13 13:49:12 · 161 阅读 · 0 评论 -
【vue】vue 引入阿里巴巴图标 render 引入i iconfont
一、导入阿里图标1.去阿里图标矢量图标库将想要的图标添加入库2.再去库中将图标添加到项目。3.再到我的项目中,选择采用的是将图标代码包下载到本地再引入到vue项目中。4.在vue项目的assets文件夹下新建一个iconfont文件夹(名字随意),将刚刚下载下来的代码包中的iconfont.css、iconfont.eto、iconfont.svg、iconfont.ttf、iconfo...原创 2019-03-25 10:40:08 · 744 阅读 · 0 评论 -
[vue-router] Duplicate named routes definition: { name: "日期时间", path: "/components/form/datetime" }
1.在router/index.js 中router.$addRoutes = (params) => {router.matcher = new Router({mode: 'history'}).matcherrouter.addRoutes(params)}2.在使用的地方this.$router.$addRoutes(routes)原创 2019-06-27 10:25:30 · 3852 阅读 · 2 评论