exo fait

public/index.html

@@ -13,5 +13,7 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
-  </body>
+
+</script>  
+</body>
 </html>

src/App.vue

@@ -1,12 +1,36 @@
 <template>
-  <div id="app"></div>
+<section>
+  <div id="app">
+
+  	<Declaratif :name="nom" @nomChanged="nom=$event" />
+  	<Condition :bool="bool"/>
+  	<ul>
+  		<Course :courses="tab" :newItem="new1" @listeChanged="new1=$event"/>
+
+  	</ul>
+  </div>
+ </section>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-
-@Component
-export default class App extends Vue {}
+import Declaratif from './components/Declaratif';
+import Condition from './components/Conditon';
+import Course    from  './components/Course';
+@Component({
+	components:{
+		Declaratif,	
+		Condition,
+		Course
+	}
+})	
+export default class App extends Vue {
+	new1: string;
+	nom: string = "TOTO";
+	bool: boolean=false;
+	tab: string[]=["liquide vaisselle","pain","pattes","beurre","lait"]
+
+}
 </script>
 
 <style>

src/components/Conditon.vue

@@ -0,0 +1,32 @@
+<template>
+<section>
+
+ 	<p v-if="bool">{{visible}}</p>
+ 	<p v-if="!bool">{{cacher}}</p>
+ 	<button @click="toggle(bool)">Toggle</button>
+ </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue,Prop } from 'vue-property-decorator';
+
+
+@Component	
+export default class Condition extends Vue {
+	bool: boolean=false;
+	cacher: string=""
+	visible: string="je suis cacher"
+	@Prop(Boolean) bool:boolean;
+	toggle(bool): void{
+		if(this.bool)
+			this.bool=false
+		else
+			this.bool=true
+	}
+
+}
+</script>
+
+<style>
+
+</style>

src/components/Course.vue

@@ -0,0 +1,43 @@
+<template>
+<section>
+
+ 	Liste de course. 
+ 	<input type="hidden" :value="courses">
+ 	<li v-for="course in tab">
+			{{course}}
+  		</li>
+  		<input type="text" :value="newItem" @input="ajoutval">
+  		<p id="cacher">{{new1}}</p>
+  		<button @click="ajouter(new1,tab)">ajouter achat</button>
+
+ </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue,Prop } from 'vue-property-decorator';
+
+
+@Component	
+export default class Course extends Vue {
+	tab: string[]=["liquide vaisselle","pain","pattes","beurre","lait"]
+	@Prop(Array) courses: string[];
+	new1: string;
+	@Prop(String) newItem: string;
+	ajoutval(event): void{
+			this.new1=event.target.value
+			this.$emit('listeChanged',this.new1);
+
+	}
+	ajouter(new1,tab){
+		tab.push(new1);
+	}
+
+
+}
+</script>
+
+<style>
+#cacher{
+	display:none;
+}
+</style>

src/components/Declaratif.vue

@@ -0,0 +1,31 @@
+<template>
+	<section>
+		<input type="text" :value="name" @input="changeNom">
+  		Bonjour {{nom}}
+  	</section>
+</section>
+
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+
+@Component
+export default  class Declaratif extends Vue{
+	nom:string="TOTO"
+	@Prop(String) name:string
+
+		changeNom(event): void{
+			this.nom=event.target.value
+			this.$emit('nomChanged',this.nom);
+
+	}
+}
+
+
+
+</script>
+
+<style>
+
+</style>