vue
炉火纯青-旺
这个作者很懒,什么都没留下…
展开
-
vue 根据data中数据更改组件样式
<template> <div class="box" :style="styleVar"> </div></template><script>export default { props: { height: { type: Number, default: 54, }, }, computed: { styleVar() { return { .原创 2021-02-25 13:42:27 · 1247 阅读 · 0 评论 -
mapbox + tdt + vue 实现天地图基本地图添加
index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c...原创 2020-02-16 20:40:05 · 2014 阅读 · 0 评论 -
VueCli3 笔记二
1:index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...原创 2019-12-02 14:46:10 · 93 阅读 · 0 评论 -
VueCli3 笔记一
1:index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...原创 2019-12-01 22:48:48 · 123 阅读 · 0 评论 -
vue 学习笔记
1:通过方法返回值动态绑定classtemplete:class="{passLineColor:passLineColor(index,datas),refuseLineColor:refuseLineColor(index,datas)}"methodspassLineColor(index, datas) { return this.checkState(i...原创 2019-08-15 16:47:40 · 116 阅读 · 0 评论 -
vue 动态绑定class
绑定 HTML Class对象语法我们可以传给v-bind:class一个对象,以动态地切换 class: <div v-bind:class="{ active: isActive }"></div> 上面的语法表示active这个 class 存在与否将取决于数据属性isActive的truthiness。你可以在对象...原创 2019-08-15 14:08:04 · 212 阅读 · 0 评论 -
vue 中css过渡效果
一、概念1. 实现条件:在需要有过渡效果的标签外面添加<transition></transition>。也就是说vue中被<transition></transition>包裹的元素才能实现过渡效果。2. 注意类名的说明:对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 <transition>,则 v- 是这些类名的默...原创 2019-07-22 19:28:44 · 491 阅读 · 0 评论 -
vue input自动获取焦点
1:input添加ref属性2:使用focus方法3:使用场景:点击表格中的角色名称或角色代码,input显示,并自动获取焦点原创 2019-07-29 13:28:31 · 2232 阅读 · 0 评论 -
VUE 中Element-ui 添加滚动条
<template> <el-scrollbar wrapClass="scrollbar-wrap" :style="{height: scrollHeight}" ref="scrollbarContainer"> <div>........</div> </...原创 2019-07-16 18:58:17 · 12621 阅读 · 0 评论 -
VUE mixins使用
概念:混入(mixins)是一种分发Vue组件中可复用功能的非常灵活方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。使用方法:1、创建混入对象:在src文件夹创建mixins文件夹,再在mixins文件夹下创建一个index.js文件// 创建一个需要混入的对象 export default{ data(){ ...原创 2019-07-15 13:58:41 · 713 阅读 · 0 评论 -
vue provide和inject使用
provider、inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。注意:这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。举例如下:1:定义一个父组件<template> <div><...原创 2019-07-09 10:01:04 · 959 阅读 · 0 评论 -
Vue组件间常见通信方式
组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下j几种关系:如上图所示,A和B、B和C、B和D都是父子关系,C和D是兄弟关系,A和C是隔代关系(可能隔多代)。针对不同的使用场景,如何选择行之有效的通信方式,这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式,如props、$emit / $o...原创 2019-05-29 08:53:37 · 197 阅读 · 0 评论 -
VUEX 安装及使用
什么是Vuex?用2句话概括:主要应用于Vue.js中管理数据状态的一个库 通过创建一个集中的数据存储,供程序中所有组件访问当然这么说肯定还是有所不懂,这里我就用单一使用vue.js和使用vuex.js场景的不同进行对比讲解单一使用Vue.js的场景在单一使用vue.js的场景中,我们难免要在不同的组件中互相传值。在该场景中,由一个根组件,两个父组件再各自拥有一个子组件,我...转载 2019-04-26 16:21:58 · 1075 阅读 · 0 评论 -
vue 项目配置less
1: npm 安装lessnpm install less less-loader --save-dev2: 更改配置文件build/webpack.base.conf.js3: 在module.export对象中,添加rules配置配置内容:{ test: /\.less$/, loader: "style-loader!css-loader!less...原创 2019-04-22 11:30:02 · 1706 阅读 · 0 评论 -
vue组件中使用vuex中state对象的几种方式
// 第一种方式<template> <div class="test"> {{$store.state.count}} <!--第一种方式--> </div></template><script type="text/ecmascript-6"> export defa原创 2018-12-26 14:16:11 · 3940 阅读 · 0 评论