vue基础入门踩坑备忘

document.getElementById('mask').innerHTML

document.getElementsByClassName('mask')[index].innerHTML

console.log(document.getElementsByClassName('mask')[index].innerHTML);

vue加链接(已设置过路由)：$router.push({ path: '/goods/default_agent_price'})  
----------------------------------------------------------------------------------------------------

                        批量设置默认分销价

打开新窗口链接(未设置过路由)：
----------------------------------------------------------------------------------------------------

        goodsEdit(row) {
            let routeUrl = this.$router.resolve({
                path: "/goods/edit",
                query: {id:row.id,type:'edit'}
            });
            window.open(routeUrl .href, '_blank')
        }

vue设置跳转链接： jump         

        
        

this.$route 和 this.$router 的区别：
----------------------------------------------------------------------------------------------------------------------------

this.$route 是路由【参数对象】，所有路由中的参数， params, query 都属于它。

this.$router 是一个路由【导航对象】，用它 可以方便的 使用 JS 代码,实现路由的 前进、后退、 跳转到新的 URL 地址。

                
如果想要this.$route.params 获取到this.$route.push()传的参数，一定要使用name属性来指定路由 不要用path属性；

this.$router.push({ name: 'searchDeatilList', params: { id:123 } })//传参

组件中获取参数：const { id } = this.$route.params

如果使用path属性传参，那么需要 ：this.$route.query来获取(参数以问号拼接到路由后面)

this.$router.push({ path: '/searchDeatilList', query: {id:123} }) //传参
组件中获取：const { id } = this.$route.query

if(this.$route.params.status) {
    this.searchForm.status = this.$route.params.status;
}        
console.log(this.$route.query.type);
if(this.$route.params.type=='myOpus') this.defaultStatus ="1" ;
        
        
ref和$refs的使用示例: 
----------------------------------------------------------------------------------------------------    

method方法这里用$refs调用组件:

    setActiveItem(index) {
      this.$refs.carousel.setActiveItem(index);
    },
        
        
        
        
css 栅格布局el-row（xs，sm，md，lg，xl）
----------------------------------------------------------------------------------------------------

:xs="12" , 24/12=2 , 所以当屏幕尺寸<768px时(手机)，每行展示2个div(class="com_item");

:sm="8" , 24/8=3 , 所以当屏幕尺寸>=768px时(平板)，每行展示3个div(class="com_item");

:md="6" , 24/6=4 , 所以当屏幕尺寸>=992px时(桌面显示器)，每行展示4个div(class="com_item");

:lg="4" , 24/4=6 , 所以当屏幕尺寸>=1200px时(大桌面显示器)，每行展示6个div(class="com_item");

:xl="4" , 24/4=6 , 所以当屏幕尺寸>=1920px时(2k屏)，每行展示6个div(class="com_item");

————————————————
.com_item {
    width: 100%;
    height: 220px;
    background: #bfa;
}

   gutter代表div间隙 10px 

v-bind绑定样式表：
----------------------------------------------------------------------------------------------------

HTML写法:

v-bind绑定style写法(里面是个json)： 

vue+elementui组件 el-upload图片上传 获取不到token 
--------------------------------------------------------------------------
于 2020-06-16 17:51:55 发布 
方法：直接给这个组件添加token

1.先引入token

import Cookies from 'js-cookie'
 

2.获取

  :headers="getHeaders" 

  //getHeaders必须是对象，不能是函数  
 getHeaders:{ Authorization:Cookies.get("loginToken") } 
 
 
 
 el-upload和axios设置header
--------------------------------------------------------------------------
el-upload加header

复制代码

 
axios加header

复制代码
    this.axios({
        method: "POST",
        url: `${API_HOST}/api/bind/index`,
        data: obj,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    }).then(function(res) {
        console.log(res);
    });

vue中$refs和$el的用法是什么
--------------------------------------------------------------------------

ref 被用来给元素或子组件注册引用信息

ref 有三种用法：

　　1、ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素

　　2、ref 加在子组件上，用this.$refs.（ref值） 获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.（ref值）.方法（） 就可以使用了。

　　3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

　　如果通过v-for 遍历想加不同的ref时记得加 :号，即 :ref =某变量 ;

　　这点和其他属性一样，如果是固定值就不需要加 :号，如果是变量记得加 :号。（加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串常量（String）

应注意的坑有：

1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。

vm.$el

获取Vue实例关联的DOM元素；

比方说我这里想获取自定义组件tabControl，并获取它的OffsetTop。就需要先获取该组件。

在组件内设置   属性 ref='一个名称(tabControl2)', 

然后 this.$refs.tabControl2     就拿到了该组件 

切记：ref属性，而获取组件的时候要用$refs

获取  OffsetTop，组件不是DOM元素，是没有OffsetTop的，无法通过 点 .OffsetTop来获取的。就需要通过$el来获取组件中的DOM元素

vue中v-show 和 v-if 控制元素显示隐藏的技巧
--------------------------------------------------------------------------  
一、v-show 的基本使用方法

在 Vue 中，使用 v-show 指令可以控制元素的显示隐藏。v-show 的用法非常简单，只需要在需要控制显示隐藏的元素上添加 v-show 指令，并将其绑定为一个布尔值即可。例如，在模板中使用以下代码：

其中，show 为布尔类型的变量，通过改变变量的值就可以实现元素的显示隐藏。

v-show 的特点是不会修改 DOM 元素的存在与否，只是通过 CSS 样式的控制来实现元素的显示与隐藏。因此，在页面加载时，即使元素被隐藏，它仍然会被加载到 DOM 中，不会影响页面加载速度。

二、v-if 的基本使用方法

和 v-show 不同，v-if 指令会根据布尔类型的变量值判断是否将元素插入到 DOM 中。当变量值为 true 时，才会将元素插入到 DOM 中；当变量值为 false 时，则不会在 DOM 中插入该元素。

因此，v-if 比 v-show 更加节省 DOM 的资源，但也会影响页面加载速度。

Vue还支持使用数组对象来控制class属性：
--------------------------------------------------------------------------  

   

       

hello

   

     
    
    
Vue绑定内联样式
--------------------------------------------------------------------------  
内联样式是指直接通过HTML元素的style属性来设置样式，style属性可以直接通过JavaScript对象来设置样式，我们可以直接在其内部设置vue属性。

       

   

   

vue中dispatch与commit使用
--------------------------------------------------------------------------  

dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('action方法名',值)

commit：同步操作，写法：this.$store.commit('mutations方法名',值)