<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="index.pack.js"></script>
</body>
</html> <html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app">
<!-- v-model -->
<!-- message está definido en la propiedad `data` de la instancia de Vue -->
<h2><code>v-model</code></h2>
<input type="text" v-model="message">
<br>
{{ message }}
<!-- v-model -->
import Vue from 'vue';
new Vue({
el: '#app',
data: {
albums: [
'Please Please Me (Mono)',
'With the Beatles',
'Beatles For Sale',
'The Beatles First',
'A Hard Day\'s Night',
'Help!',
'Rubber Soul',
'Revolver', <html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app">
{{message | reverse | capitalize }}
<br>
<div v-bind:text-content.prop="'capital-c' | reverse"></div>
</div>
<script src="index.pack.js"></script>
</body>
</html> import Vue from 'vue';
Vue.component('my-component', {
data() {
return {
count: 0
}
},
template: `
<button @click="updateCount">Has hecho click {{count}}
`,
methods: {
updateCount() {
this.count++; import Vue from 'vue';
var discography = [
{
cover: 'https://upload.wikimedia.org/wikipedia/en/c/c0/PleasePleaseMe_audio_cover.jpg',
name: 'Please Please Me',
releaseDate: '22 March 1963'
},
{
cover: 'https://upload.wikimedia.org/wikipedia/en/e/e7/Help%21_%28The_Beatles_album_-_cover_art%29.jpg',
name: 'Help!',
releaseDate: '6 August 1965'
},
{ import Vue from 'vue';
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<button @click="$emit('enlarge-text', 0.3)">
Agrandar
</button>
<div v-html="post.content"></div>
</div>
`
}) <html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app">
<my-component v-if="someFlag" :some-value="theValue"></my-component>
<button @click="theValue = Date()"> Update the component </button>
<button @click="someFlag = !someFlag"> Toggle the component's visibility </button>
</div>
<script src="index.pack.js"></script>
</body>
</html> import Vue from 'vue';
let myMixin = {
created() {
this.hello()
},
methods: {
hello() {
console.log('hello from mixin!')
}
},
data() {
return {
myValue: 'Value from mixin.'