Создайте интерфейсную модель данных, необходимую для разработки VUE.

внешний интерфейс JavaScript Vue.js NPM
Создайте интерфейсную модель данных, необходимую для разработки VUE.

Во всех внутренних данных есть объекты. Нужны ли они во внешнем интерфейсе? Очень нужны! ! !
На самом деле мы пользуемся этой библиотекой уже 2 года.

Мы определили все модели бизнес-данных, используемые во внешнем интерфейсе.
Так какая польза в практических приложениях?
Это уменьшает бесчисленное количество избыточных кодов и позволяет избежать множества ошибок, которые легко создать.

Мы не видели ни одного интерфейса подачи, а дату забывает конвертировать?
Также не возникало проблем с ошибками страниц из-за отсутствия данных, таких как некоторые отображения, такие как {{user.org.title}}.

Без лишних слов выбросьте инструменты модели:

javascript model

Его можно установить и использовать следующими способами

npm install js-model --save

Поделитесь адресом ссылки:

В то же время используемый здесь инструмент форматирования даты — манба, а формат формата даты может ссылаться на документацию манбы.

Давайте сначала поговорим о нашем приложении.

Следующие сценарии используют vue в качестве примера

Сценарий 1: страница сведений

исходная страница

<script>
export default {
  data () {
    return {
      obj: null,
    }
  }
}
</script>

<template>
    <div>
        <span v-if="obj">{{obj.a}}</span>
        <span v-if="obj&&obj.a">{{obj.a.b}}</span>
        <span v-if="obj.c">{{obj.c}}</span>
    </div>
</tempalte>

Проблема: отсутствует начальное определение значения объекта.

использовать модель

Detail.js

export default new Model({
    a: {
        b: String
    },
    c: Number
})

<script>
import Detail from './Detail' 

let obj = Detail.parse({});
</script>

<template>
    <div>
        <span>{{obj.a}}</span>
        <span>{{obj.a.b}}</span>
        <span>{{obj.c}}</span>
    </div>
</tempalte>

в

//obj的结果为
{
    a: {
        b: null
    },
    c: null
}

Vue простая демонстрация:код спрей.IO/VV PV VP/spray/…

Сценарий 2: Редактирование данных

исходная страница

<script>
let a = {int: 1}  
//使用这种方式赋值，vue会没有办法更新a.date, a.money这样的数据
</script>

<template>
    <div>
        <input v-model="a.int"/>
        <DatePicker v-model="a.date"/>
        <input v-model="a.money"/>万
    </div>
</tempalte>

использовать модель

Edit.js

export default new Model({
    int: Number,
    date: {
        type: Date,
        format: 'YYYY-MM-DD'  //此处使用manba日期工具
    },
    money: {
        type: Number,
        unit: Model.W
    }
})

<script>
import Edit from './Edit' 
let a = Edit.parse({int: 1});  
//在vue的v-model或者其他地方，可以直接引用a.date等数据。

</script>

<template>
    <div>
        <input v-model="a.int"/>
        <DatePicker v-model="a.date"/>
        <input v-model="a.money"/>万
    </div>
</tempalte>

в

//a的结果为
{
    int: 1,
    date: null,
    money: null
}

Сценарий 3. Преобразование данных

исходная страница

<script>
//js
let a = {int: 1, date: 1522302335544, money: 10000};
if (a.data) {
    a.date = format(a.date); //为了编辑的展示    
}
if(a.money){
    a.money = a.money / 10000;
}
 //为了编辑的单位，顺便说一下，我们的金额在数据都是存储以元为单位的。

//提交的时候
if (a.int) {
    a.int = parseInt(a.int)
}
if (a.data) {
    a.date = new Date(a.date).getTime();  
}
if(a.money){
    a.money = a.money * 10000
}
//submit
</script>

<template>
    <div>
        <input v-model="a.int"/>
        <DatePicker v-model="a.date"/>
        <input v-model="a.money"/>万
    </div>
</tempalte>

использовать модель

<script>
import Edit from './Edit';
let a = Edit.parse({int: 1, date: 1522302335544, money: 10000});

//提交的时候
let data = Edit.dispose(a);
</script>

//template
<div>
    <input v-model="a.int"/>
    <DatePicker v-model="a.date"/>
    <input v-model="a.money"/>万
</div>

в

<script>
//a的parse结果为
=============
{
    int: 1,
    date: "2018-03-29",
    money: 1
}
=============

//提交的时候
let data = Edit.dispose(a);
// 将空值删除，按照格式转换出标准化的数据，还有更多的配置选项可以选择。
// 如果数据无变更，将转换为：{int: 1, date: 1522302335544, money: 10000}
// 如果编辑的数据为{int: "1", date: null, money}，将转换为：{int: 1}
// 上面的int会通过输入框编辑变成String
</script>

Увидев три приведенных выше сценария, я считаю, что вы должны знать, для чего используется наша модель данных javascript.

метод js-модели

  • parse:

    • Создайте полные данные об объекте, чтобы избавиться от скучных суждений {{a&&a.b?a.b.c:''}}
    • Преобразование стандартизации данных, когда данные передаются из фона, дата является отметкой времени, сумма указана в юанях, метод синтаксического анализа помогает преобразовать отметку времени в строку времени, сумма преобразуется в определенную единицу, и это может помочь вам составить все хорошо со всеми полями.

  • dispose:

    • Когда вам нужно отправить данные в серверную часть, преобразовать даты в метки времени, преобразовать суммы в суммы в долларах, стандартизировать форматы данных и удалить пустые данные.

    Пример: значение, измененное вводом, представляет собой строку, которая преобразуется в цифровой формат с помощью dispose.

Наконец

Надеюсь, вы все поддержите нашу библиотеку компонентов HeyUI.

HeyUI, 🎉UI Toolkit для Интернета, Vue2.0

www.heyui.top

Категории