vue element和nuxt的使用技巧分享
1.element的时间选择提交的格式转化
例如 Fri Sep 07 2018 00:00:00 GMT+0800 (中国标准时间) 转化为 2020-01-11的格式 这记载datepicker中添加一句value-format=”yyyy-MM-dd” <el-date-picker type="date" v-model="createdate" @change="formatTime" value-format="yyyy-MM-dd" placeholder="选择时间"></el-date-picker> 2.动态
Vue.js 是一款非常流行的前端框架，Element UI 是一套基于 Vue 的组件库，提供了一系列美观的 UI 组件。Nuxt.js 是一个基于 Vue.js 的框架，主要用于构建 SSR（服务器端渲染）应用，它使得 Vue 开发更加高效且易于维护。本文将分享关于 Vue Element 和 Nuxt.js 的一些使用技巧。
1. **Element 时间选择器格式转换**
在 Element UI 的日期选择器（`el-date-picker`）中，我们经常需要处理日期格式。默认情况下，日期选择器返回的是一个完整的 JavaScript Date 对象，但有时我们需要将其格式化为特定字符串，如 "2020-01-11"。通过在 `el-date-picker` 的 `value-format` 属性中设置 "yyyy-MM-dd"，我们可以确保用户选择的日期以这种格式展示。例如：
```html
<el-date-picker
type="date"
v-model="createdate"
@change="formatTime"
value-format="yyyy-MM-dd"
placeholder="选择时间">
</el-date-picker>
```
并在 `formatTime` 方法中处理选定日期的格式。
2. **动态循环复选框**
当使用 Vue 动态生成复选框（`el-checkbox`）并希望控制其选中状态时，可能会遇到无法正确选中的问题。这是因为 Vue 的响应式系统需要我们通过 `$set` 方法来改变数组内对象的属性。例如：
```javascript
this.menulist.forEach((item, index) => {
this.$set(item.sonList, index, { ...item.sonList[index], checked: false });
});
```
3. **El-form 动态表单验证**
在 Vue 中，`v-if` 和 `v-show` 可用于控制元素的显示和隐藏，但在 `el-form` 中，如果使用它们，可能导致表单验证失效。这是因为在 Vue 生命周期的 `mounted` 阶段，`v-if` 控制的元素可能并未被渲染，因此验证规则未被绑定。而 `v-show` 虽然隐藏了元素，但元素依然存在于 DOM 中，因此可以进行验证。
解决这个问题的方法有：
- **方法1**：使用 `v-if` 时，为每个受控制的 `el-form-item` 分配一个唯一的 `key` 值，这将使 Vue 重新评估该元素。
- **方法2**：自定义验证规则。如果你更倾向于手动处理，可以编写自己的验证函数，通过 `rules` 属性绑定到 `el-form-item` 上。
4. **Nuxt.js 添加 Vue Devtools**
Vue Devtools 是一个非常有用的开发者工具，可以在浏览器中调试 Vue 应用。在 Nuxt.js 项目中启用它，你需要在 `nuxt.config.js` 文件中修改配置：
```javascript
module.exports = {
vue: {
config: {
productionTip: false,
devtools: true,
},
},
};
```
设置 `devtools` 为 `true` 后，你可以在开发环境中使用 Vue Devtools 进行调试。
这些技巧有助于提升你在 Vue Element 和 Nuxt.js 项目中的开发效率，让你更好地管理日期格式、动态数据和表单验证，同时也能充分利用开发工具进行调试。记得在实际项目中灵活运用这些知识，以提高代码质量和用户体验。
