Vue fruit bookkeeping - money.vue component

Nine barrel mother 2021-09-15 06:28:52
vue fruit bookkeeping money.vue money


css And React The versions are almost the same except for the color distribution , Please refer to the previous article if necessary React Fruit bookkeeping -styled-components, The overall diagram is as follows ,css The specific code will not be repeated here .

image.png

Types.vue

The benefits of using a decorator image.png

TS The difference between compile time and run time image.png

The code uses '-' Means expenditure ,'+' Represents revenue ,selected Highlight when selected .

// Use TS To write
<template>
<div>
<ul class="types">
<li :class="type === '-' && 'selected'"
@click="selectType('-')"> spending
<!-- If type === '-', be class be equal to selected-->
</li>
<li :class="type === '+' && 'selected'"
@click="selectType('+')"> income
</li>
</ul>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import {Component, Prop} from 'vue-property-decorator';
@Component// The role of the modifier :type Will be automatically processed as data,selectType Will be automatically processed as methods
export default class Types extends Vue {
type = '-'; // '-' Means expenditure ,'+' Represents revenue
selectType(type: string) {
if (type !== '-' && type !== '+') {
throw new Error('type is unknown');
}
this.type = type;
}
}
</script>
<style lang="scss" scoped>
.types {
background: #fde3cc;
...
> li {
...
&.selected{
background: #ffb13d;
}
}
}
</style>
 Copy code 

Be careful :TS The code must be semicoloned , Can be in webstorm Set in

image.png

summary 1:TypeScript benefits

  1. Type tips : More intelligent tips
  2. Compile times error : You know you're wrong before you run the code
  3. Type checking : Unable to point out the wrong attribute

summary 2:TS The essence of

image.png

summary 3: Write Vue Three ways of components ( Single file component )

  1. use JS object

     export default { data, props, methods, created, ...}
     Copy code 
  2. use TS class <script lang="ts">

     @Component
    export default class XXX extends Vue{
    xxx: string = 'hi';
    @Prop(Number) xxx: number|undefined;
    }
     Copy code 
  3. use JS class <script lang="js">

     @Component
    export default class XXX extends Vue{
    xxx = 'hi'
    }
     Copy code 

NumberPad.vue

<template>
<div class="numberPad">
<div class="output">{{output}}</div>
<div class="buttons">
<button @click="inputContent">1</button>
<button @click="inputContent">2</button>
<button @click="inputContent">3</button>
<button @click="remove"> Delete </button>
<button @click="inputContent">4</button>
<button @click="inputContent">5</button>
<button @click="inputContent">6</button>
<button @click="clear"> Empty </button>
<button @click="inputContent">7</button>
<button @click="inputContent">8</button>
<button @click="inputContent">9</button>
<button @click="ok" class="ok">OK</button>
<button @click="inputContent" class="zero">0</button>
<button @click="inputContent">.</button>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import {Component} from 'vue-property-decorator';
@Component
export default class NumberPad extends Vue {
output: string = '0';// Because there is input after ,ts You will guess that the type is string, So there can be no :string
inputContent(event: MouseEvent) {
const button = (event.target as HTMLButtonElement);
const input = button.textContent!;//! amount to as string, Namely the null exclude
if (this.output.length === 16) { return; }// Enter up to 16 position
if (this.output === '0') {
if ('0123456789'.indexOf(input) >= 0) {// If the input is in 0123456789 in
this.output = input;
} else {
this.output += input;
}
return;
}
if (this.output.indexOf('.') >= 0 && input === '.') {return;}// Prevent two decimal points in a string of numbers
this.output += input;
}
remove() {// Delete
if (this.output.length === 1) {
this.output = '0';
} else {
this.output = this.output.slice(0, -1);
}
}
clear() {// Empty
this.output = '0';
}
ok() {
}
}
</script>
<style lang="scss" scoped>
@import "~@/assets/style/helper.scss";
.numberPad {
.output {
@extend %clearFix;
@extend %innerShadow;
font-size: 36px;
font-family: Consolas, monospace;
padding: 9px 16px;
text-align: right;
height: 72px;
}
.buttons {
@extend %clearFix;
> button {
width: 25%;
height: 64px;
float: left;
background: transparent;
border: none;
&.ok {
height: 64*2px;
float: right;
}
&.zero {
width: 25*2%;
}
$bg: #ffb13d;
&:nth-child(1) {
background: lighten($bg, 4*6%);
}
&:nth-child(2), &:nth-child(5) {
background: lighten($bg, 4*5%);
}
&:nth-child(3), &:nth-child(6), &:nth-child(9) {
background: lighten($bg, 4*4%);
}
&:nth-child(4), &:nth-child(7), &:nth-child(10) {
background: lighten($bg, 4*3%);
}
&:nth-child(8), &:nth-child(11), &:nth-child(13) {
background: lighten($bg, 4*2%);
}
&:nth-child(14) {
background: lighten($bg, 4%);
}
&:nth-child(12) {
background: $bg;
}
}
}
}
</style>
 Copy code 

Notes.vue

<template>
<div>
<label class="notes">
<span class="name"> remarks </span>
<input type="text"
v-model="value"
placeholder=" Please enter comments ">
</label>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import {Component} from 'vue-property-decorator';
@Component
export default class Notes extends Vue {
value = '';
}
</script>
<style lang="scss" scoped>
.notes {
font-size: 14px;
background: #f5f5f5;
padding-left: 16px;
display: flex;
align-items: center;
.name {
padding-right: 16px;
}
input {
height: 64px;
flex-grow: 1;
background: transparent;
border: none;
padding-right: 16px;
}
}
</style>
 Copy code 

review :v-model Form input binding

You can use it.  v-model  Instruction in form  <input><textarea>  And  <select>  Create two-way data binding on element . It automatically selects the correct method to update the element based on the control type . Even though it's magical , but  v-model  It's just grammar sugar in essence . It listens for user input events to update data , In addition, some special treatment is carried out for some extreme scenes .

v-model  All form elements will be ignored  valuecheckedselected attribute The initial value of will always be Vue Instance data as data source . You should go through JavaScript In the component's  data  Initial value declared in option .

v-model  Use different... Internally for different input elements property And throw out different events :

  • text and textarea Element usage  value property and  input  event ;
  • checkbox and radio Use  checked property and  change  event ;
  • select Fields will  value  As prop And will  change  As an event .

For the need to use typewriting  ( Such as Chinese 、 Japanese 、 Korean, etc ) Language , You'll find that  v-model  It will not be updated in the process of combining text with input method . If you want to deal with the process as well , Please use  input  event .

give an example :

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
 Copy code 

Tags.vue

<template>
<div class="tags">
<div class="new">
<button @click="create"> New label </button>
</div>
<ul class="current">
<li v-for="tag in dataSource" :key="tag"
:class="{selected: selectedTags.indexOf(tag)>=0}"
@click="toggle(tag)">{{tag}}
</li>
</ul>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import {Component, Prop} from 'vue-property-decorator';
@Component
export default class Tags extends Vue {
@Prop() readonly dataSource: string[] | undefined;
selectedTags: string[] = [];
toggle(tag: string) {
const index = this.selectedTags.indexOf(tag);
if (index >= 0) {
this.selectedTags.splice(index, 1);
} else {
this.selectedTags.push(tag);
}
}
create() {
const name = window.prompt(' Please enter a tag name ');
if (name === '') {
window.alert(' Tag name cannot be empty ');
} else if (this.dataSource) {
this.$emit('update:dataSource',
[...this.dataSource, name]);
}
}
}
</script>
<style lang="scss" scoped>
.tags {
...
> .current {
display: flex;
flex-wrap: wrap;
> li {
$bg: #ffb13d;
background: #fde3cc;
...
&.selected {
background: $bg;
}
}
}
> .new {
padding-top: 16px;
button {
...
}
}
}
</style>
 Copy code 
版权声明
本文为[Nine barrel mother]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/09/20210909122358677j.html

  1. Flutter: résoudre le futur blocage en utilisant Isolate
  2. Résumé des opérations courantes pour les données de structure de l'arbre frontal
  3. Ant Design Transfer Twin Tree Shuttle box "make Wheels"
  4. De la carte de pensée à la base et à l'approfondissement, prenez note de l'expérience d'entrevue d'un octet sautant le poste de recherche et développement Java.
  5. Apprenez les composants d'implémentation de vue et Publiez - les à NPM
  6. [Questions d'entrevue à haute fréquence] À vous de choisir
  7. Une faible connaissance de beginpath () provoque une superposition de style lors de la peinture d'un dessin en toile
  8. React Hooks, laisse - moi t'emmener étudier.
  9. Comment la copie profonde résout - elle les références circulaires?
  10. JavaScript Advanced Programming (3rd Edition) Reading note 6
  11. Analyse de l'URL
  12. Discussion préliminaire sur xss
  13. Solution: développement de la page Web Wechat, obtenir la fosse Piétinée par le flux d'entrée de la caméra via navigator.mediadevice.getusermedia ()
  14. Des milliers de questions d'entrevue sélectionnées n'ont pas encore ét é effacées.
  15. Les questions d'entrevue de niveau intermédiaire et avancé d'Android au fil des ans sont entièrement incluses, et l'algorithme est distribué microservice
  16. J'ai résumé toutes les questions d'entrevue.
  17. Compréhension de la réactivité des données de vue
  18. Note de service CSS (vi): Flex, page mobile et mise en page réactive
  19. Non-ASCII character ‘\xe5‘ in file kf1.py on line 4, but no encoding declared; see http://python.or
  20. 手把手教你搭建微信小程序服务器(HTTPS)
  21. JavaScript Review sketch - 1
  22. Analyse du bootstrap webpack
  23. sqli-labs-less-18 http头user agent+报错注入
  24. Génération de code nest pour l'outil CLI de nestjs
  25. JS | This
  26. Augmentation des variables
  27. The sinking gs8 raises its flag again. GAC motor's sales are falling endlessly. Is it the car or the people?
  28. Ren Hao's lunch at work today is president Hao wearing a sleeveless coat! Clean and handsome!
  29. Summary of basic knowledge points of JavaScript language (mind map)
  30. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  31. Sqli Labs - less - 18 http header user agent + Error Reporting Injection
  32. Vous apprendrez à construire un serveur d'applet Wechat (https) à la main
  33. Non - ASCII character 'xe5' in file kf1.py on Line 4, but no Encoding declared;Voirhttp://python.or
  34. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  35. En tant que programmeur, quelle est la plus grande tristesse que vous ressentez? L'entrevue d'emploi Java de 2021 dans une grande usine vous demandera:
  36. En tant que programmeur, je n'oublie pas le dernier résumé de mon expérience d'entrevue de stage en Java.
  37. Experts suggested that performers work with certificates, which triggered a collective heated debate. It is meaningless to be accused of repeating the mistakes
  38. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  39. The appearance value of 200000 "Odyssey" is less than 100000, and has become the "sales champion" of household MPV
  40. Les programmeurs Java qui sont entrés dans l'entreprise pendant trois mois ont dû faire face à une correction d'échelle, et les octets ont sauté dans le traitement des questions d'entrevue de JD 360 Netease.
  41. 350 questions d'entrevue Android partage, technologie d'architecture de cache
  42. The space is not vulgar, the configuration is rich, the leather is durable, less worry, and the high configuration is less than 100000!
  43. Vous permet de passer rapidement à travers l'entrevue de saut d'octets et d'aller de l'avant
  44. Résumé des questions d'entrevue technique d'Alibaba Baidu et d'autres grandes usines à la fin de l'année, et analyse de la dernière vraie question d'entrevue Android en 2021
  45. Avec cet ensemble de questions d'entrevue Java, l'ensemble de questions de base d'entrevue de bat,
  46. Avec cet ensemble de questions d'entrevue Java, les notes avancées Java de niveau divin sont systématisées,
  47. Opérateurs arithmétiques et opérateurs de comparaison pour JavaScript, Introduction classique au développement web
  48. Explorer le cadre open source Android - 1. Okhttp Source Analysis
  49. Module management of "free and open source" front-end spa project crudapi background management system based on Vue and Quasar (14)
  50. Partager l'expérience de l'examen et du développement de l'arrière - plan, en s'appuyant sur les questions d'entrevue et les réponses,
  51. Site Web pour partager vos expériences d'entrevue, Tencent Bull vous apprend à écrire votre propre cadre Java!
  52. Notes d'étape Android structurées, sélection de vrais problèmes d'entrevue Android
  53. Dictionnaire distribué: communication de cache limitée par le courant, sujets d'entrevue pour certaines questions courantes dans le développement Java,
  54. Tianci girlfriend Tangyuan attended the event for the second time. Her appearance was comparable to that of a star. The audience shouted that Tianci was blessed!
  55. Introduction au JavaScript chapitre 15 (objets, clairvoyance)
  56. La dernière revue scientifique de l'académicien Luo Liqun: architecture de la boucle neuronale pour stimuler la nouvelle Ia
  57. Basic knowledge of components in Vue "I"
  58. J'a i appris quelques petites choses sur l'entrevue et j'ai acheté un tutoriel en 19998.
  59. Dix minutes pour vous faire passer en revue les points de connaissance que Spring demande souvent, le chemin du retour Jedi d'un programmeur âgé de 35 ans,
  60. Want to know the implementation and application of single instance mode in the front end?