add example Vue app
This commit is contained in:
parent
bb90cae3ad
commit
4cff30d345
|
@ -1,5 +1,22 @@
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
|
Vue.createApp({
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
goals: [],
|
||||||
|
enteredValue: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
addGoal() {
|
||||||
|
if (this.enteredValue !== "") {
|
||||||
|
this.goals.push(this.enteredValue);
|
||||||
|
}
|
||||||
|
this.enteredValue = "";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}).mount("#app");
|
||||||
|
|
||||||
// const buttonEl = document.querySelector("button");
|
// const buttonEl = document.querySelector("button");
|
||||||
// const inputEl = document.querySelector("input");
|
// const inputEl = document.querySelector("input");
|
||||||
// const listEl = document.querySelector("ul");
|
// const listEl = document.querySelector("ul");
|
||||||
|
|
|
@ -12,13 +12,14 @@
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<div>
|
<div>
|
||||||
<label for="goal">Goal</label>
|
<label for="goal">Goal</label>
|
||||||
<input type="text" id="goal" />
|
<input type="text" id="goal" v-model="enteredValue" />
|
||||||
<button>Add Goal</button>
|
<button v-on:click="addGoal">Add Goal</button>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Test</li>
|
<li v-for="goal in goals">{{ goal }}</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<script src="https://unpkg.com/vue@next"></script>
|
||||||
<script src="app.js"></script>
|
<script src="app.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
Reference in New Issue