start .
me .
HTML Document File : exported-vue-bs-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>example of Vue and Bootstrap simple uses</title>
<!-- added from editor (import/export of HTML text) -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
</head>
<body>
<!-- https://vuejs.org/tutorial/#step-7 -->
<!-- https://arkenidar.github.io/editor/editor.html -->
<div id="app">
<button class="btn btn-primary" @click="counter++">Click me! {{counter}} ... for Vue</button>
<button class="btn btn-light" data-bs-toggle="button" :class="{ active: button1_active }"
@click="button1_active = !button1_active "> Toggle button for Vue </button>
<form @submit.prevent="addTodo">
<input v-model="newTodo" required placeholder="new todo">
<button class="btn btn-primary">Add Todo item</button>
</form>
<div v-if="!todos.length">empty list</div>
<ul v-else>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
<button class="btn btn-secondary" @click="removeTodo(todo)">X</button>
</li>
</ul>
</div>
<script>
function init() {
// give each todo a unique id
let id = 0
vue = Vue.createApp({
data() {
return {
button1_active: true,
newTodo: '',
todos: [
{ id: id++, text: 'Learn HTML' },
{ id: id++, text: 'Learn JavaScript' },
{ id: id++, text: 'Learn Vue' }
],
counter: 1,
}
},
methods: {
addTodo() {
this.todos.push({ id: id++, text: this.newTodo })
this.newTodo = ''
},
removeTodo(todo) {
this.todos = this.todos.filter((t) => t !== todo)
}
}
}).mount('#app')
}
</script>
<script>
init() // added from editor (import/export of HTML text)
</script>
<script src="show-source.js"></script>
</body>
</html>