Vue笔记

秦羽 2020-06-03 PM 733℃ 0条

## Vue自定义配置项
- config.js
```js
export default{
  a:1,
  b:2
}
```

- component.vue
```js
<template>
    <div>
        {{config.a}}
        {{config.b}}
    </div>
</template>
<script>
import config from 'config.js'
</script>
```

## Vue判断变量是否存在
```js
if(typeof a!="undefined"){
  console.log("true");
}
```

## Vue Element Input设置焦点
```html
<el-input ref="myinput" type="input" v-model="mydata"></el-input>
```
```js
this.$refs.myinput.$refs.input.focus();
```

## Vue常用函数
### 变异方法
- push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

- pop() 方法用于删除并返回数组的最后一个元素。

- shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

- unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

- splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

- sort() 方法用于对数组的元素进行排序。

- reverse() 方法用于颠倒数组中元素的顺序。

### 替换数组
- filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

- concat() 方法用于连接两个或多个数组。

- slice() 方法可从已有的数组中返回选定的元素。

### 其他
- split() 方法用于把一个字符串分割成字符串数组。

## Vue字符串变量渲染

```js
//获取变量值
getVariable(str,value_data){
  let list=str.split('.');
  let result=value_data;
  for(let i=0;i<list.length;i++){
    let temp=list[i];
    let left=temp.indexOf('[');
    let right=temp.indexOf(']');
    if(left!==-1&&right!==-1){
      let temp_variable=temp.substring(0,left);
      result=result[temp_variable];
    }
    else{
      result=result[temp];
    }
    while(left!==-1&&right!==-1){
      let index=temp.substring(left+1,right);
      result=result[index];
      temp=temp.replace('['+index+']','');
      left=temp.indexOf('[');
      right=temp.indexOf(']');
    }
  }
  console.log(result);
  return result;
}

```
- 测试变量对象
```js
value_data:{
  test:{
    a:[
      [{
        b:'1'
      },
      {
        b:'2'
      }],
      [{
        b:'1'
      },
      {
        b:'2'
      }]
    ]
  }
}
```
- 测试调用
```js
let str='test.a[0][0].b';
let result=this.getVariable(str,this.value_data);
console.log(result);
```
- 输出
```js
1
```

## Vue利用router打开新页面
```js
let routeData=this.$router.resolve({
  name:'name',
  path:'newpage',
  query:this.$route.query,
  params:this.$route.params
});
window.open(routeData.href,'_blank');
```

## npm install查看详情
```
npm install --verbose
```

## vuex的getters传参
```js
getters: {
    getProductByid: (state) => (id) =>
    {
        return state.productList.find(item => item.id === id);
    }
}
```
- 使用
  ```js
  this.$store.getters.getProductByid(id);
  ```

标签: 笔记, vue

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：https://www.qinyu.cc/archives/14.html

上一篇 Vue根据组件名动态加载组件

下一篇 vue子组件给父组件传参，父组件添加自定义参数问题

Vue笔记

评论啦~

栏目分类

标签云

友情链接申请

Vue笔记

 评论啦~

 栏目分类

标签云

友情链接申请

评论啦~

栏目分类

标签云

友情链接申请