Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@manufosela

manufosela/Example VueJS from carlosazaustre.es vue first steps

Last active August 20, 2017 08:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save manufosela/2fd5cc015cbdcd62242ef7d01fdcf108 to your computer and use it in GitHub Desktop.
Save manufosela/2fd5cc015cbdcd62242ef7d01fdcf108 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin// source https://jsbin.com/woleduh
Raw
Example VueJS from carlosazaustre.es vue first steps
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app"></div>
<template id="main">
<div>
<button @click="toggleMostrar">Mostrar/Ocultar</button>
<div v-if="mostrar">
{{ mensaje }}
<img :src="imagen" />
</div>
<ul>
<li v-for="(curso, index) in cursos" :key="index">
<a :href="curso.url">{{ curso.name }}</a>
</li>
</ul>
</div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
template:'#main',
data: {
mostrar: false,
mensaje: "Hola Vue!",
imagen: "http://laravelacademy.org/wp-content/uploads/2016/08/00-featured-vuejs-logo-simple-256x128.jpg",
cursos: [
{ name: "Fundamentos de React", url: 'http://cursos.carlosazaustre.es/p/react-js' },
{ name: "Redux con React", url: 'http://cursos.carlosazaustre.es/p/curso-profesional-de-redux-y-react' },
{ name: "React Native", url: 'http://cursos.carlosazaustre.es/p/react-native' },
]
},
methods: {
toggleMostrar: function () {
this.mostrar = !this.mostrar
}
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment