b/intro-to-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

L4-start

Browse Source
This commit is contained in:
bwbl 2026-01-13 14:17:14 +01:00
parent b7ba9a971b
commit d0fea51c69
2 changed files with 42 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
index.html
View File

@ -1,35 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue Mastery</title>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<div class="nav-bar"></div>
<div class="product-display">
<div class="product-container">
<div class="product-image">
<img v-bind:src="image">
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</div>
</div>
<head>
<meta charset="UTF-8" />
<title>Vue Mastery</title>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<div class="nav-bar"></div>
<!-- Import App -->
<script src="./main.js"></script>
<div class="product-display">
<div class="product-container">
<div class="product-image">
<img v-bind:src="image" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
<p v-if="inventory > 10">In Stock</p>
<p v-else>Out of Stock</p>
<p v-if="on_sale">On Sale</p>
</div>
</div>
</div>
</div>
<!-- Mount App -->
<script>
const mountedApp = app.mount('#app')
</script>
</body>
<!-- Import App -->
<script src="./main.js"></script>
<!-- Mount App -->
<script>
const mountedApp = app.mount("#app");
</script>
</body>
</html>

16
main.js
View File

@ -1,8 +1,10 @@
const app = Vue.createApp({
data() {
return {
product: 'Socks',
image: './assets/images/socks_blue.jpg'
}
}
})
data() {
return {
product: "Socks",
image: "./assets/images/socks_blue.jpg",
inventory: 100,
on_sale: true,
};
},
});