code
/
vue-learning
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

basic hello world

This commit is contained in:
Sergio Álvarez 2019-11-09 12:09:41 +01:00
commit def98067b9
4 changed files with 68 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md Normal file
View File

@ -0,0 +1 @@
Following the Vue.js Guide: https://vuejs.org/v2/guide/

24
hello/app.js Normal file
View File

@ -0,0 +1,24 @@
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
showspan: true,
todos: [
{ id: 1, text: 'Learn JavaScript' },
{ id: 2, text: 'Learn Vue' },
{ id: 3, text: 'Build something awesome' }
],
label: 'You loaded this page on ' + new Date().toLocaleString()
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})

35
hello/index.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>titleee</title>
<link rel="stylesheet" href="style.css">
<script src="https://vuejs.org/js/vue.js"></script><!-- dev version -->
</head>
<body>
<div id="app">
<p v-bind:title="label">
{{ message }}
<button v-on:click="showspan = !showspan">toggle</button>
<transition name="fade">
<span v-if="showspan">Now you see me</span>
</transition>
</p>
<ol>
<todo-item
v-for="item in todos"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
<button v-on:click="reverseMessage">Reverse Message</button>
<input v-model="message">
</div>
<script src="app.js"></script>
</body>
</html>

8
hello/style.css Normal file
View File

@ -0,0 +1,8 @@
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}