Vue最佳实践

发表于 | 分类于 | | 阅读次数:
字数统计: 566 字 | 阅读时长 ≈ 2 分钟

化繁为简的Watch

场景还原：

1
2
3
4
5
6
7
8
created(){
  this.getData()
},
watch: {
  inputValue(){
    this.getData()
  }
}

组件创建的时候我们获取一次列表数据，同时监听input框，每当发生变化的时候重新获取一次列表数据

优化：
首先，在watchers中，可以直接使用函数的字面量名称；其次，声明immediate:true表示创建组件时立马执行一次。

1
2
3
4
5
6
watch: {
  searchInputValue:{
    handler: 'fetchPostList',
    immediate: true
  }
}

DatePicker组件默认打开

iView DatePicker组件，设置:open="true"设置为默认打开。
并用

1
<a href="javascript:void(0)"></a>

隐藏默认的选择框。

.sync 修饰符

.sync实际上是一个语法糖，用于实现父子组件间的数据双向绑定

用法：

1
2
3
4
5
6
7
8
//父组件
<child :childModalFlag.sync="showChildFlag"></child>

data() {
  return {
    showWeekFlag: false
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//子组件
<Modal
  v-model="childModalFlag"
>

props:{
  childModalFlag: {
    required: true,
      type: Boolean
  }
}
methods:{
  updateVisible(flag) {
    this.childModalFlag = flag;
      this.$emit('update:childModalFlag', this.childModalFlag)	// 更新对话框的显示状态
  }
}

DatePicker组件判空

element-ui DatePicker组件判空：

value === '' || value === null

Vuex 刷新失效

Vuex在刷新以后，存储的数据会恢复原始状态。

因为Vuex是管理状态的工具，不是做持久存储的。

改用sessionStorage或localStorage

DatePicker组件设置禁用范围

1
2
3
4
5
6
7
8
9
10
11
12
13
<el-date-picker
  :picker-options="pickerOptions">
</el-date-picker>

data(){
  return {
    pickerOptions: {
      disabledDate(time) {
        return time.getTime() < Date.now() - 8.64e7;
      }
	}
  }
}

localhost改为IP地址

package.json中改为：

1
2
3
"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 10.4.0.217"
},

config/index.js中改为：
host: '10.4.0.217',

就可以在浏览器输入IP地址访问，局域网其他用户也可以访问

DatePicker 组件结束时间

取值时应取endTime+1

通过ajax获取数据放到Select 选择器下拉选项中

element-ui的Select组件

1
2
3
4
5
6
7
data() {
  return {
    options: {
      data: []
    }
  }
}

ajax回调里：

1
2
3
4
5
6
7
8
let detail=[];
data.list.forEach((i, v) => {
  let obj = {};
  obj.value = 'xx';
  obj.label = 'xx';
  detail.push(obj);
});
this.options.data = detail;

template中：

1
v-for="item in options.data"

Vue中使用echarts

  1. 需放在mounted中，因为需要取到DOM，不能放在created里。

  2. 不能用v-if，要用v-show，同理，DOM的问题。