Skip to content
Snippets Groups Projects
Commit 0184ebb6 authored by Gabriel Frey's avatar Gabriel Frey
Browse files

Ajout js

parent 4f40a9c0
Branches
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 512 additions and 0 deletions
Cours/M2GPI-CAWEBI-CM6-js.pdf 0 → 100644
+ 0
− 0
View file @ 0184ebb6
File added
Cours/M2GPI-CAWEBI-CM7-VueJS.pdf 0 → 100644
+ 0
− 0
View file @ 0184ebb6
File added
Cours/SujetProjetNoté_parti2.pdf 0 → 100644
+ 0
− 0
View file @ 0184ebb6
File added
TP11/01.html 0 → 100644
+ 35
− 0
View file @ 0184ebb6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo interpolation</title>
<style>
body {
background: #eff8ff;
height: 100vh;
width: 100vw;
font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="hello-message">
<p>Texte interpolé : {{prop}}</p>
<p>prop1 : {{prop1}}</p>
<p>prop2 : {{prop2}}</p>
<p>prop3 : {{prop3}}</p>
<p>prop4 : {{prop4}}</p>
<p>prop5 : {{prop5}}</p>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script src="01.js" de></script>
</body>
</html>
\ No newline at end of file
TP11/01.js 0 → 100644
+ 12
− 0
View file @ 0184ebb6
const vueApp = Vue.createApp({
data() {
return {
prop: "Hello Vue 3 !!!" ,
prop1 : undefined,
prop2 : null,
prop4 : ["chaîne 1", "chaîne 2", "chaîne 3"],
prop5 : { nom: "MOOSE", prenom : "Joe", age : 25}
}
}
});
const vm = vueApp.mount("#hello-message");
\ No newline at end of file
TP11/02.html 0 → 100644
+ 31
− 0
View file @ 0184ebb6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo text HTML</title>
<style>
body {
background: #eff8ff;
height: 100vh;
width: 100vw;
font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="hello-message">
<p>Interpolation de texte : {{texteHTML}}</p>
<p>Utilisation de directive v-html : <span v-html="texteHTML"></span></p>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script src="02.js" de></script>
</body>
</html>
\ No newline at end of file
TP11/02.js 0 → 100644
+ 10
− 0
View file @ 0184ebb6
const helloVue = Vue.createApp({
data() {
return {
message1: "Hello Vue 3 !!!" ,
texteHTML: '<span style="color: red">Texte Rouge</span>',
}
}
})
.mount("#hello-message");
\ No newline at end of file
TP11/03v-bind.html 0 → 100644
+ 44
− 0
View file @ 0184ebb6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo v-bind</title>
<style>
body {
background: #eff8ff;
height: 100vh;
width: 100vw;
font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
align-items: center;
justify-content: center;
padding: 20;
}
div {
margin: 30px;
padding:100 px;
}
</style>
</head>
<body>
<h1>Exemples v-bind</h1>
<div id="bind">
<p><a v-bind:href="url">Lien</a></p>
<br><br><br><br>
<section :id>
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Commodi nisi non placeat
tempore dolores ut omnis facere alias
cupiditate veniam! Minus, commodi aliquid.
</section>
<br><br><br><br><br>
<img v-bind="attrImage">
<br><br><br><br><br>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script src="03v-bind.js" de></script>
</body>
\ No newline at end of file
TP11/03v-bind.js 0 → 100644
+ 13
− 0
View file @ 0184ebb6
const bindVueApp = Vue.createApp({
data() {
return {
url: "https://vuejs.org",
id: "section1",
attrImage: {
src: "images/logoGPI.png",
width: "100"
},
};
},
});
const bindVue = bindVueApp.mount("#bind");
TP11/04expressions.html 0 → 100644
+ 43
− 0
View file @ 0184ebb6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo Expressions</title>
<style>
body {
background: #eff8ff;
height: 100vh;
width: 100vw;
font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<a v-bind:[attributeName]="url"> ... </a>
<div id="app">
<p>
Nombre : {{ number + 1 }}
</p>
<p>
D'accord : {{ ok ? 'YES' : 'NO' }}
</p>
<p>
Message inversé : {{ message.split('').reverse().join('') }}
</p>
<div :id="`list-${id}`">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit perferendis voluptate vero.</p>
</div>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script src="04expressions.js" de></script>
</body>
\ No newline at end of file
TP11/04expressions.js 0 → 100644
+ 11
− 0
View file @ 0184ebb6
const bindExprApp = Vue.createApp({
data() {
return {
number: 10,
ok: false,
message: "Hello Vue3 !",
id: "courses",
};
},
});
const bindExpr = bindExprApp.mount("#app");
TP11/05arguments.html 0 → 100644
+ 44
− 0
View file @ 0184ebb6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo: Arguments</title>
<style>
body {
background: #eff8ff;
height: 100vh;
width: 100vw;
font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
}
div, img {
margin-top : 10px;
}
</style>
</head>
<body>
<div id="app">
<div>
<label>width : </label>
<input type="radio" v-model="dimension" value="width">
<label>height : </label>
<input type="radio" v-model="dimension" value="height">
</div>
<div>
<input type="number" v-model="size" placeholder="valeur de width ou height">
</div>
<img src="images/logoGPI.png" v-bind:[dimension]="size">
<img src="images/logoGPI.png" v-bind:[(largeur)?'width':'height']="size">
</div>
<script src="https://unpkg.com/vue@3"></script>
<script src="./05arguments.js"></script>
</body>
\ No newline at end of file
TP11/05arguments.js 0 → 100644
+ 10
− 0
View file @ 0184ebb6
const bindArgsApp = Vue.createApp({
data() {
return {
dimension: "width",
size: 200,
largeur: true
};
},
});
const bindArgs = bindArgsApp.mount("#app");
TP11/ListeCourse/index.html 0 → 100644
+ 92
− 0
View file @ 0184ebb6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ShoppingCart App</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div id="shopping-list">
<div class="header">
<h1>{{header}}</h1>
<button v-if="editing" @click="doEdit(false)" class="btn btn-cancel">Masquer formulaire</button>
<button v-else @click="doEdit(true)" class="btn btn-primary">Ajouter un item</button>
</div>
<div class="add-item-form" v-if="editing">
<input
v-model="newItem"
type="text"
@keyup.enter="addItem"
placeholder="Ajouter un item"
/>
<p class="counter">{{characterCount}}/200</p>
<label> Priorité : <input type="checkbox" v-model="newItemHighPriority" /> </label>
<button
v-bind:disabled="newItem.length === 0"
@click="addItem"
class="btn btn-primary">
Ajouter
</button>
<br />
</div>
<p v-if="items.length === 0">Super ! Tu as fait tous tes achats !</p>
<ul>
<li v-for="item in items" :key="item.id"
:class="[
{strikeout: item.purchased},
{priority: item.highPriority},
'shopping-item'
]"
@click="togglePurchased(item)"
>
<a v-bind:href="'/Item/' + item.id">{{item.label}}</a>
</li>
</ul>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
const shoppingListApp = Vue.createApp({
data() {
return {
header: "Ma liste de courses",
newItem: "",
newItemHighPriority: false,
editing: false,
items: [
{ id: 1, label: "Céréales", highPriority: true, purchased:true },
{ id: 2, label: "Chocolat", highPriority: true, purchased:false },
{ id: 3, label: "Pommes", highPriority: false, purchased:true },
{ id: 4, label: "Carottes", highPriority: false, purchased:false },
],
};
},
methods: {
addItem() {
this.items.push({
id: this.items.length + 1,
label: this.newItem,
highPriority: this.newItemHighPriority
});
this.newItem = "";
},
doEdit(editing) {
this.editing = editing;
this.newItem =""
},
togglePurchased(item) {
item.purchased = !item.purchased;
}
},
computed: {
characterCount() {
return this.newItem.length;
}
}
}).mount("#shopping-list");
</script>
</body>
</html>
TP11/ListeCourse/main.css 0 → 100644
+ 167
− 0
View file @ 0184ebb6
body {
background: #eff8ff;
height: 100vh;
width: 100vw;
font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
}
.counter {
font-size: 0.8rem;
padding-left: 10px;
padding-right: 10px;
}
#shopping-list {
background: #fff;
padding: 2rem;
margin: 1rem;
border-radius: 3px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
width: 95%;
max-width: 900px;
}
h1 {
color: #3d4852;
}
ul {
list-style: none;
padding: 0;
}
a {
color: #6cb2eb;
font-size: 1.25rem;
transition: all 0.1s ease-in;
margin-top: 0.5rem;
display: block;
}
a:hover {
color: #3490dc;
}
li,
p {
display: flex;
align-items: center;
line-height: 1.75;
letter-spacing: 0.5px;
color: #3d4852;
font-size: 1.25rem;
cursor: pointer;
transition: all 0.1s ease-in;
}
li:hover {
color: #22292f;
}
li input {
margin: 0 0.5rem 0;
}
#shopping-list > input,
#shopping-list > select {
width: 100%;
border-radius: 3px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
border: 1px solid #f1f5f8;
color: #606f7b;
padding: 0.5rem 0.75rem;
box-sizing: border-box;
font-size: 1rem;
letter-spacing: 0.5px;
margin: 0.5rem 0;
}
.add-item-form,
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
.add-item-form input {
width: 70%;
border-radius: 3px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
border: 1px solid #f1f5f8;
color: #606f7b;
padding: 0.5rem 0.75rem;
box-sizing: border-box;
font-size: 1rem;
letter-spacing: 0.5px;
margin: 0.5rem 0;
}
.btn {
border: none;
border-radius: 3px;
margin: auto 0;
padding: 0.5rem 0.75rem;
flex-shrink: 0;
cursor: pointer;
font-size: 0.9rem;
letter-spacing: 0.5px;
transition: all 0.1s ease-in;
}
.btn[disabled] {
background: #8795a1;
}
.btn[disabled]:hover {
background: #606f7b;
}
.btn-primary {
background: #6cb2eb;
color: #fff;
}
.btn-primary:hover {
background: #3490dc;
}
.btn-cancel {
background: #ef5753;
color: #fff;
}
.btn-cancel:hover {
background: #e3342f;
color: #fff;
}
.strikeout {
text-decoration: line-through;
color: #b8c2cc;
}
.strikeout:hover {
color: #8795a1;
}
.priority {
background-color: yellow;
margin-bottom: 4px;
}
input[type="checkbox"]{
display: inline !important;
box-shadow: none;
width: auto;
}
.shopping-item {
font-style: italic;
font-weight: bold;
}
TP11/images/logoGPI.png 0 → 100644
+ 0
− 0
View file @ 0184ebb6
TP11/images/logoGPI.png

17.5 KiB

0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment