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

54
bundler-free/index.html
View File

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

5
vue2/package-lock.json generated
View File

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

3
vue2/package.json
View File

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

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

@ -1,25 +1,78 @@
<template> <template>
<form @submit.prevent="submitForm"> <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())"> <button @click.prevent="$emit('custom-event', new Date())">
Envoyé événement personnalisé Envoyé événement personnalisé
</button> </button>
<button type="submit">Envoyer</button>
<button type="submit" :disabled="isInvalid">Envoyer</button>
</form> </form>
</template> </template>
<script> <script>
import Incrementer from "./Incrementer";
import { required } from "vuelidate/lib/validators";
export default { export default {
// data() { components: { Incrementer },
// return { data() {
// window, return {
// }; age: 18,
// }, rememberMe: false,
firstname: "",
lastname: "",
lastnameRequired: true,
};
},
methods: { methods: {
submitForm() { submitForm() {
alert("Formulaire envoyé"); alert("Formulaire envoyé");
this.$router.push({ name: "home" }); 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) {}, // beforeRouteEnter(to, from, next) {},
}; };
</script> </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 Vue from "vue";
import VueRouter from "vue-router"; import VueRouter from "vue-router";
import Vuelidate from "vuelidate";
import Layout from "./Layout.vue"; import Layout from "./Layout.vue";
import ComponentLayout from "./ComponentLayout.vue"; import ComponentLayout from "./ComponentLayout.vue";
@ -22,6 +23,7 @@ const Link = () =>
import(/* webpackChunkName: "link" */ "./components/Link.vue"); import(/* webpackChunkName: "link" */ "./components/Link.vue");
Vue.use(VueRouter); Vue.use(VueRouter);
Vue.use(Vuelidate);
Vue.config.productionTip = false; Vue.config.productionTip = false;