Permalink
Browse files

Yay

  • Loading branch information...
bunny
bunny committed Jan 14, 2020
0 parents commit 9eb53f604617098f8c08ac7d3b53068c9a8bdaf1
Showing with 12,316 additions and 0 deletions.
  1. +24 −0 0-index.html
  2. +29 −0 1-index.html
  3. +29 −0 2-index.html
  4. +30 −0 3-index.html
  5. +30 −0 4-index.html
  6. +40 −0 5-index.html
  7. +39 −0 6-index.html
  8. +66 −0 7-index.html
  9. +64 −0 8-index.html
  10. +11,965 −0 vue.js
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<title>Vue.js! 🚀</title>
</head>
<body>

<!-- 'App' that Vue attaches to -->
<div id="app"></div>

<!-- Include VueJS Library -->
<script src="vue.js"></script>

<!-- Our own JavaScript -->
<script>
// Create a new Vue instance
new Vue({
el: "#app"
})
</script>
</body>
</html>
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>Vue.js! 🚀</title>
</head>
<body>

<!-- 'App' that Vue attaches to -->
<div id="app">
<p>{{ message + "!!" }}</p>
</div>

<!-- Include VueJS Library -->
<script src="vue.js"></script>

<!-- Our own JavaScript -->
<script>
// Create a new Vue instance
let vm = new Vue({
el: "#app",
data: {
message: "Hello, world!"
}
})
</script>
</body>
</html>
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>Vue.js! 🚀</title>
</head>
<body>

<!-- HTML -->
<div id="app">
<h2> {{ message }} </h2>
<p> {{ people.join(", ") }} </p>
</div>

<!-- JavaScript -->
<script src="vue.js"></script>
<script>
// Create a new Vue instance
let vm = new Vue({
el: "#app",
data: {
message: "Here's my message",
people: ['Chang', 'Umar', 'Harold']
}
})
</script>
</body>
</html>
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Vue.js! 🚀</title>
</head>
<body>

<!-- HTML -->
<div id="app">
<ul>
<!-- Using the 'v-for' directive to iterate -->
<li v-for="person in people"> {{ person }} </li>
</ul>
</div>

<!-- JavaScript -->
<script src="vue.js"></script>
<script>
// Create a new Vue instance
let vm = new Vue({
el: "#app",
data: {
people: ['Chang', 'Umar', 'Harold']
}
})
</script>
</body>
</html>
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Vue.js! 🚀</title>
</head>
<body>

<!-- HTML -->
<div id="app">
<ul>
<textarea v-model="text"> </textarea>
<p> {{ text }} </p>
</ul>
</div>

<!-- JavaScript -->
<script src="vue.js"></script>
<script>
// Create a new Vue instance
let vm = new Vue({
el: "#app",
data: {
text: "Hello, world!"
}
})
</script>
</body>
</html>
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<title>Vue.js! 🚀</title>
</head>
<body>

<!-- HTML -->
<div id="app">

<!-- Create list of checkboxes dynamically -->
<label v-for="person in people"> {{ person }}
<input
v-bind:value="person"
v-model="selectedPeople"
type="checkbox">
</label>

</div>

<!-- JavaScript -->
<script src="vue.js"></script>
<script>
// Create a new Vue instance
let vm = new Vue({
el: "#app",
data: {
// List of checkbox items
people: ['Mike', 'Kat', 'Dat', 'Todd'],
// List of selected checkbox items
selectedPeople: []
}
})
</script>
</body>
</html>
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<title>Vue.js! 🚀</title>
</head>
<body>

<!-- HTML -->
<div id="app">
<ul>
<li v-for="person in people">
<label>
<input v-bind:value="person" v-model="selectedPeople" type="checkbox">
{{ person }}
</label>
</li>
</ul>

<!-- Add new user input and button -->
<input type="text" v-model="newPerson">
<button type="button" v-on:click="people.push(newPerson)"> Add Person </button>
</div>

<!-- JavaScript -->
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
people: ['Mike', 'Kat', 'Dat', 'Todd'],
selectedPeople: [],
newPerson: ""
}
})
</script>
</body>
</html>
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html>
<head>
<title>Vue.js! 🚀</title>
</head>
<body>

<!-- HTML -->
<div id="app">
<p v-show="seeCompleted">
<a href="#" v-on:click="seeCompleted=false">Select People</a>
</p>
<p v-show="!seeCompleted">
<a href="#" v-on:click="seeCompleted=true">View Selected People</a>
</p>

<!-- Select People -->
<div v-show="!seeCompleted">
<ul>
<li v-for="person in people">
<label>
<input v-bind:value="person" v-model="selectedPeople" type="checkbox">
{{ person }}
</label>
</li>
</ul>

<!-- Add new user input and button -->
<input type="text" v-model="newPerson">
<button type="button" v-on:click="addPerson"> Add Person </button>
</div>

<!-- View Selected People -->
<div v-show="seeCompleted">
<ul>
<li v-for="selectedPerson in selectedPeople"> {{ selectedPerson }} </li>
</ul>
</div>

</div>

<!-- JavaScript -->
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
seeCompleted: false,
people: ['Mike', 'Kat', 'Dat', 'Todd'],
selectedPeople: [],
newPerson: ""
},
methods: {
addPerson() {
// Add new person to list of people
this.people.push(this.newPerson)
// Clear input field
this.newPerson = ''
}
}
})
</script>
</body>
</html>
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html>
<head>
<title>Vue.js! 🚀</title>
</head>
<body>

<!-- HTML -->
<div id="app">
<p v-show="starships.length == 0"> Loading... </p>

<table v-show="starships.length > 0">
<thead>
<th v-on:click="sortByName">Name</th>
<th v-on:click="sortByModel">Model</th>
<th>Cost</th>
</thead>
<tbody>
<tr>
<td> <input type="text" v-model="nameSearch"> </td>
<td> </td>
<td> </td>
</tr>
<tr v-for="starship in filteredStarships">
<td> {{ starship.name }} </td>
<td> {{ starship.model }} </td>
<td> {{ starship.cost_in_credits }} </td>
</tr>
</tbody>
</table>
</div>

<!-- JavaScript -->
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
nameSearch: "",
starships: []
},
computed: {
filteredStarships() {
return this.starships.filter(s=> s.name.search(this.nameSearch) != -1)
}
},
methods: {
sortByName() {
this.filteredStarships.sort((a,b)=> a.name > b.name ? 1 : -1)
},
sortByModel() {
this.filteredStarships.sort((a,b)=> a.model > b.model ? 1 : -1)
},
},
created() {
fetch('https://swapi.co/api/starships/')
.then(response => response.json())
.then(data => this.starships = data.results)
}
})
</script>
</body>
</html>
Oops, something went wrong.

0 comments on commit 9eb53f6

Please sign in to comment.