cesi/hn-vue
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add vuelidate

Browse Source
This commit is contained in:
YuukanOO 2021-01-21 10:12:02 +01:00
parent c678841406
commit 67c2070343
6 changed files with 113 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
bundler-free/index.html
View File

@ -1,30 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue js sans bundler !</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
</head>
<body>
<div id="app">
<!-- <p>Mon nom est {{ name }}</p> -->
<greet v-bind:message="name"></greet>
<input type="text" v-bind:value="name" v-on:input="name = $event.target.value" />
<input
type="text"
v-bind:value="name"
v-on:input="name = $event.target.value"
/>
</div>
<script>
Vue.component('greet', {
template: '<p>Mon nom est {{ message }}</p>',
props: ['message']
Vue.component("greet", {
template: "<p>Mon nom est {{ message }}</p>",
props: ["message"],
});
new Vue({
el: '#app',
el: "#app",
data: {
name: 'julien',
}
name: "julien",
},
});
</script>
</body>
</body>
</html>

5
vue2/package-lock.json generated
View File

@ -11021,6 +11021,11 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
"vuelidate": {
"version": "0.7.6",
"resolved": "https://registry.npmjs.org/vuelidate/-/vuelidate-0.7.6.tgz",
"integrity": "sha512-suzIuet1jGcyZ4oUSW8J27R2tNrJ9cIfklAh63EbAkFjE380iv97BAiIeolRYoB9bF9usBXCu4BxftWN1Dkn3g=="
},
"watchpack": {
"version": "1.7.5",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

3
vue2/package.json
View File

@ -10,7 +10,8 @@
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.4.9"
"vue-router": "^3.4.9",
"vuelidate": "^0.7.6"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",

65
vue2/src/components/AForm.vue
View File

@ -1,25 +1,78 @@
<template>
<form @submit.prevent="submitForm">
<label for="firstname">Prénom</label>
<input
type="text"
:class="{ 'has-error': $v.firstname.$error }"
id="firstname"
v-model="$v.firstname.$model"
/>
<div v-if="$v.firstname.$error">
<p v-if="!$v.firstname.required">Ce champs est requis !</p>
</div>
<label for="lastname">Nom</label>
<input type="text" id="lastname" v-model="$v.lastname.$model" />
<label for="rememberme">Se souvenir de moi</label>
<input type="checkbox" v-model="rememberMe" id="rememberme" />
<label for="lastnamerequired">Nom de famille requis</label>
<input type="checkbox" v-model="lastnameRequired" id="lastnamerequired" />
<incrementer v-model="age" />
<p>Vous vous appelez : {{ firstname }} {{ lastname }}</p>
<p v-if="rememberMe">On se souvient !</p>
<button @click.prevent="$emit('custom-event', new Date())">
Envoyé événement personnalisé
</button>
<button type="submit">Envoyer</button>
<button type="submit" :disabled="isInvalid">Envoyer</button>
</form>
</template>
<script>
import Incrementer from "./Incrementer";
import { required } from "vuelidate/lib/validators";
export default {
// data() {
// return {
// window,
// };
// },
components: { Incrementer },
data() {
return {
age: 18,
rememberMe: false,
firstname: "",
lastname: "",
lastnameRequired: true,
};
},
methods: {
submitForm() {
alert("Formulaire envoyé");
this.$router.push({ name: "home" });
},
},
validations() {
if (this.lastnameRequired) {
return {
firstname: {
required,
},
lastname: {
required,
// sameAs: (v) => v === this.firstname,
},
};
}
return {
firstname: {
required,
},
};
},
// beforeRouteEnter(to, from, next) {},
};
</script>

15
vue2/src/components/Incrementer.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<div>
<p>Valeur actuelle : {{ value }}</p>
<button @click.prevent="$emit('input', value + 1)">+</button>
<button @click.prevent="$emit('input', value - 1)">-</button>
</div>
</template>
<script>
export default {
props: {
value: Number,
},
};
</script>

2
vue2/src/main.js
View File

@ -1,5 +1,6 @@
import Vue from "vue";
import VueRouter from "vue-router";
import Vuelidate from "vuelidate";
import Layout from "./Layout.vue";
import ComponentLayout from "./ComponentLayout.vue";
@ -22,6 +23,7 @@ const Link = () =>
import(/* webpackChunkName: "link" */ "./components/Link.vue");
Vue.use(VueRouter);
Vue.use(Vuelidate);
Vue.config.productionTip = false;