Add some vue books/docs.

This commit is contained in:
Gerhard Hoffmann 2023-12-21 15:49:35 +01:00
parent 8cf816c158
commit 37052e97fc
13 changed files with 365 additions and 0 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

31
vue/chapter2.html Normal file
View File

@ -0,0 +1,31 @@
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<title>Greetings friend</title>
</head>
<body>
<div class="container">
<h2>Hello {{name}}</h2>
<form class="form-inline">
<div class="form-group">
<label for="name">Enter your name:</label>
<!-- binded input to 'name' -->
<input v-model="name" type="text" class="form-control" id="name" placeholder="Name">
</div>
</form>
</div>
<!-- displays all data within Vue instance filtered through JSON -->
<pre>{{ $data | json }}</pre>
</body>
<!-- cdn that contains all contents of Vue.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script type="text/javascript">
new Vue({
el: 'body',
data: {
//empty variable each binded to input
name: "",
},
})
</script>
</html>

37
vue/chapter3.html Normal file
View File

@ -0,0 +1,37 @@
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<title>Greetings user</title>
</head>
<body>
<div class="container">
<!-- the || is the logical operator OR -->
<div v-if="gender== 'male' || gender == 'female'">
<h1>Hello,
<!-- render span if 'gender' equals to 'male' -->
<span v-show="gender == 'male'">Mister {{name}}.</span>
<!-- render span if 'gender' equals to 'female' -->
<span v-if="gender == 'female'">Miss {{name}}.</span>
</h1>
</div>
<!-- v-else immediately follows v-if block to work -->
<h1 v-else>So you can't decide. Fine!</h1>
<!-- show inputs -->
<label for="gender">Enter your gender:</label>
<input v-model="gender" class="form-control" id="gender"></input>
<label for="name">Enter your name:</label>
<input v-model="name" class="form-control" id="name"></input>
</div>
<pre>{{ $data | json }}</pre>
</body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script type="text/javascript">
new Vue({
el: 'body',
data: {
gender: "female",
name: "Universe",
},
})
</script>
</html>

47
vue/chapter4.html Normal file
View File

@ -0,0 +1,47 @@
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<title>People of Gaul</title>
</head>
<body>
<div class="container">
<h1>People of Gaul</h1>
<ul class="list-group">
<!-- render filtered array items using 'v-for' -->
<!-- 'orderBy' is a built in filter used for ordering by 'age'-->
<li v-for="person in people | orderBy 'age' " class="list-group-item">
{{person.name}} {{person.age}}
</li>
</ul>
<h1>"Old" People of Gaul</h1>
<ul class="list-group">
<!-- render filtered array items -->
<li v-for="person in people | old " class="list-group-item">
<!-- custom filter 'old' -->
{{person.name}} {{person.age}}
</li>
</ul>
</div>
<pre>{{ $data | json }}</pre>
</body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script type="text/javascript">
//custom filter 'old' returns an array of items that satisfy the given condition
Vue.filter('old', function (people) {
return people.filter(function (item) {
return item.age > 55;
});
})
new Vue({
el: 'body',
data: {
people: [
{name: "Obelix", age: 31},
{name: "Asterix", age: 32},
{name: "Majestix", age: 62},
{name: "Julius Caesar", age: 56},
]
},
})
</script>
</html>

59
vue/chapter5.html Normal file
View File

@ -0,0 +1,59 @@
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<title>The Elections</title>
</head>
<!-- listening for keyboard event -->
<body @keyup.c="clear">
<div class="container">
<h1>People of Vue</h1>
<ul class="list-group">
<li v-for="candidate in candidates" class="list-group-item">
{{candidate.name}} {{candidate.votes}}
<!-- increase votes 'on:click'-->
<button class="btn btn-default" @click="candidate.votes++">Vote</button>
</li>
</ul>
<!-- display the name of the 'mayor' using a computed property-->
<h2>Our mayor is {{mayor.name}}!</h2>
<pre>{{ $data | json }}</pre>
<pre>{{ mayor | json }}</pre>
</div>
</body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: 'body',
data: {
candidates: [
{name: "Mr. Black", votes: 140},
{name: "Mr. White", votes: 135},
{name: "Mr. Pink", votes: 145},
{name: "Mr. Brown", votes: 130},
]
},
computed: {
mayor: function () {
//first we sort the array descending
var candidatesSorted = this.candidates.sort(function (a, b) {
return b.votes - a.votes;
});
//the mayor will be the first item
return candidatesSorted[0];
}
},
methods: {
//this method runs when the key 'c' is pressed
clear: function () {
//Turn votes of all candidate to 0 using map() function.
this.candidates = this.candidates.map(function (candidate) {
candidate.votes = 0;
return candidate;
})
}
}
})
</script>
</html>

80
vue/chapter6.html Normal file
View File

@ -0,0 +1,80 @@
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<title>Horse-drawn Chariots</title>
</head>
<body>
<div class="container">
<h1>Chariot shopping</h1>
<ul class="list-group">
<!-- '.sync' ensures two-way binding between child's property and parent's one -->
<chariot v-for="chariot in chariots" :chariot="chariot" :selected.sync="selected"></chariot>
</ul>
<pre>{{ $data | json }}</pre>
</div>
<!-- component template -->
<template id="chariot-template">
<li class="list-group-item">
<h4>"{{ chariot.name }}" chariot has <strong>{{ chariot.horses }}</strong> horse(s)!</h4>
<!-- 'disabled' attribute is applied conditionally -->
<button @click="rideChariot(chariot)" class="btn btn-primary" :disabled="isSelectedChariot">
{{ action }}
</button>
</li>
</template>
<!-- end component template -->
</body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script type="text/javascript">
Vue.component('chariot', {
props: ['chariot', 'selected'],
template: "#chariot-template",
methods: {
rideChariot: function (chariot) {
this.selected = chariot;
},
},
computed: {
//is true when the chariot has more horses than the selected one
hasMoreHorses: function () {
return this.selected.horses < this.chariot.horses
},
//is true when the chariot is the selected one
isSelectedChariot: function () {
return this.selected.name == this.chariot.name
},
//is true when there is no chariot selected
noChariot: function () {
return this.selected.name == null;
},
//define the action for each chariot
action: function () {
if (this.noChariot) {
action = 'Pick Chariot'
} else if (this.isSelectedChariot) {
action = 'Riding!'
} else if (this.hasMoreHorses) {
action = 'Hire Horses'
} else {
action = 'Dismiss Horses'
}
return action;
}
}
});
var vm = new Vue({
el: 'body',
data: {
chariots: [
{name: "Olympus", horses: 4},
{name: "Sagitta", horses: 3},
{name: "Icarus", horses: 2},
{name: "Abraxas", horses: 1},
],
//the currently selected 'chariot'
selected: {}
},
})
</script>
</html>

35
vue/chapter7.html Normal file
View File

@ -0,0 +1,35 @@
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<title>Paint Me</title>
</head>
<!-- binding body style to an object -->
<body :style="bgColor">
<div id="app">
<div class="container">
<h1>Paint this background!</h1>
<input type="color" v-model="bgColor.backgroundColor" />
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script type="text/javascript">
new Vue({
el: 'body',
data: {
bgColor: {
backgroundColor: "#00cc00"
}
}
});
</script>
<style type="text/css">
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
</style>
</html>

Binary file not shown.

76
vue/movies.html Normal file
View File

@ -0,0 +1,76 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>movies</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<main>
<div class="container">
<h1>movies</h1>
<div id="v-app">
<table class="table table-striped">
<tr>
<th>#</th>
<th>Title</th>
<th>Director</th>
<th>Actions</th>
</tr>
<tr v-for="movie in movies" is="movie" :movie="movie"></tr>
</table>
<template id="template-movie-raw">
<tr>
<td>
{{movie.id}}
</td>
<td class="col-md-6">
<input v-if="movie.editing" v-model="movie.title" class="form-control">
</input>
<!--in other occasions show the movie title-->
<span v-else>
{{movie.title}}
</span>
</td>
<td>
<input v-if="movie.editing" v-model="movie.director" class="form-control">
</input>
<!--in other occasions show the movie director-->
<span v-else>
{{movie.director}}
</span>
</td>
<td>
<div class="btn-group" v-if="!movie.editing">
<button @click="editMovie(movie)" class="btn btn-default">Edit</button>
<button @click="deleteMovie(movie)" class="btn btn-danger">Delete</button>
</div>
<div class="btn-group" v-else>
<!--If the movie is taken from the db then it will have an id-->
<button v-if="movie.id" class="btn btn-primary" @click="updateMovie(movie)">Update movie
</button>
<!--If the movie is new we want to store it-->
<button v-else class="btn btn-success" @click="storeMovie(movie)">Save New movie</button>
<!--Always show cancel-->
<button @click="movie.editing=false" class="btn btn-default">Cancel</button>
</div>
</td>
</tr>
</template>
<p class="lead">Here's a list of all your movies.
<button @click="createMovie()" class="btn btn-primary">Add a new one?</button>
</p>
<pre>{{ $data | json }}</pre>
</div>
</div>
</main>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.js"></script>
<script src='/js/app.js' type="text/javascript"></script>
</body>
</html>

Binary file not shown.