vue+Element UI项目中的知识点

805 阅读2分钟

1.element ui 中的input框的样式怎么修改?

问题: elementui+vue项目中,在当前vue文件中使用style scoped包裹的样式中重置input框的样式无法生效;

方式: 在本页面重新定义style样式且不需要写scoped即可生效

注意: 为了不影响其他位置的元素样式,需要定义一个特定的class类名便于区分

<style>
//修改input的样式,为了不覆盖本组件其他处的样式,需要自定义一个类名
.myClass input.el-input__inner {
    border-radius:15px;
}
</style>
<style scope>
    //写自己的样式
</style>

2.vue中的Draggable

原文链接:www.jianshu.com/p/382ac5f9d…

www.jianshu.com/p/03f0f58f8…

注意点:

(1)draggable拖拽到目标区域的回调事件使用 add(没有drop)

@add="addDrag(event)"
// event里能拿到一些信息,这个event是vuedraggable处理过的

3.vue项目中使用sass

原文链接: blog.csdn.net/u014789022/…

4.es6中的...是什么意思?

...属于拓展运算符,用于对象或者数组的析构,比如:
数组:
let array = [1, 2, 3, 4, 5];
const { x, y, ...z } = array;
// 其中z=[3, 4, 5],注意如果由于array的length不足以完成析构,则会导致z为[]
对象:
let obj = { name: 'zhangsan', age: 30, city: 'shenzhen' };
const {name, ...others} = obj;
console.log(name); // 'zhangsan'
console.log(others); // {age: 30, city: 'shenzhen'}


var set = new Set([1, 2, 3, 4, 4,4,4,4,2,2,2])
        set=[...set]

如果使用es5的var set1 = set,对set1做添加、删除操作,也会影响到set,使用ES6中的拓展运算符(...)就不会有这个问题。

5.vuex怎么使用?

原文链接: segmentfault.com/a/119000001…

6.vue中的ref与$refs?

原文链接: www.cnblogs.com/xumqfaith/p…

7.vue数组中添加新字段,改变字段后值没有比变化

原文链接:blog.csdn.net/qq_34414994…

8.vue中axios的封装

原文链接:www.cnblogs.com/chaoyuehedy…

juejin.cn/post/684490…

9.vue 下配置标题栏 title 图标及文字的具体步骤

原文链接:blog.csdn.net/M_wolf/arti…

10.使用vuex存储用户信息到localStorage

原文链接:blog.csdn.net/qq_32917123…

11.vue2.0项目中使用sass(含sass基础用法示例)

原文链接:blog.csdn.net/u014789022/…

12.vue axios封装和cookie使用

blog.csdn.net/weixin_3809…

13.VUE 脚手架项目中轮播图的实现

blog.csdn.net/qq_34611721…

14.vuex-along解决vuex中存储的数据在页面刷新之后失去的问题

www.cnblogs.com/panax/p/980…

vuex可以看成是一个“提升变量”的一个工具,它是将state当做全局变量存储。F5刷新页面之后自然随着页面的刷新重新初始化state。

一般都会采用cookie或者localStorage等方法, 但使用封装好的vuex-along 更优雅.

vuex持久化存储也可以用 vuex-persist 插件。

链接:www.jianshu.com/p/a4faae6a3…

15.vue之vue-cookies

www.cnblogs.com/s313139232/…

16.vue中animate.css的使用

www.cnblogs.com/xiaohuochai…

www.cnblogs.com/xiaohuochai…

17.css重置滚动条默认样式

www.cnblogs.com/juqian/p/62…

18.文本超出显示省略号

 overflow: hidden;
 text-overflow:ellipsis;
 white-space: nowrap;

19.在vue中鼠标滑动事件

segmentfault.com/q/101000001…

20.使用vue+element-ui实现无限级动态菜单

blog.csdn.net/qq_31126175…

21.element-ui实现树形表格

22.app免费图标

www.easyicon.net/iconsearch/…

23.一个基于vue和element-ui的树形穿梭框及邮件通讯录。

github.com/hql7/tree-t…

24.vue实现滚动条滚到相应高度触发动画的操作

www.cnblogs.com/mmzuo-798/p…

25.github上后台管理系统

26.element ui中的tree 

(1)取消父子节点之间的关联性

<el-tree show-checkbox :check-strictly="true"></el-tree>

(2)getCheckedKeys默认是子节点不全选不获取父节点的id

要求:子节点不全选时也可以获取父节点的id

解决:将getCheckedKeys与getHalfCheckedKeys获得的数组合并后提交则可获得包含了子节点未全选中的父节点数据。

 
let checkedKeys = this.$refs.tree.getCheckedKeys(); 
let hafCheckedKeys = this.$refs.tree.getHalfCheckedKeys();  
let checkedIdArr = checkedKeys.concat(hafCheckedKeys);

原文链接:blog.csdn.net/weixin_4484…

27.vue导航栏/公共组件在部分页面显示,部分页面不显示的方法及其原理

原文链接: blog.csdn.net/Oralinge/ar…

app.vue中代码:

<template>  
    <div id="app">   
        <div v-if="$route.meta.keepAlive">        
            <page-header></page-header>        
            <router-view></router-view>    
        </div>    
        <router-view v-if="!$route.meta.keepAlive"></router-view>  
    </div>
</template>

<script>
import PageHeader from './views/Header/Header'
export default {  
    name: 'App',  
    components: {    
        PageHeader  
    }
}
</script>

<style>
#app {  
font-family: 'Avenir', Helvetica, Arial, sans-serif;  
    -webkit-font-smoothing: antialiased;  
    -moz-osx-font-smoothing: grayscale;  
    text-align: center;  
    color: #2c3e50;  
    height: 100%;
}
</style>

路由:需要显示公共组件中keepAlive的属性值为 true,不需要显示公共组件keepAlive的属性值为flase。

{      
    path: '/',      
    name: 'home',      
    component: home,      
    meta: {        
        keepAlive: true      
    }    
},    
{      
    path: '/login',      
    name: 'login',      
    component: login,     
    meta: {        
        keepAlive: false      
    }    
},

这样,导航条就只会在你设置keepAlive属性值为true的页面显示了。