<template>
<div class="container">
<h1>{{ name }}</h1>
<h1>{{ age }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<button @click="changeName">changeName</button>
<button @click="changePage='Page1'">Change Page 1</button>
<button @click="changePage='Page2'">Change Page 2</button>
{{ changePage }}
<hr>
<div class="row">
<div class="col-md-6">
<hitest>
<p slot="name">{{ name }}</p>
<p>{{ description }}</p>
</hitest>
</div>
<div class="col-md-6">
<pitest></pitest>
</div>
<hr>
<div class="col-md-12">
<keep-alive>
<component :is="changePage"></component>
</keep-alive>
</div>
<p>Change</p>
<hr>
</div>
</div>
</template>
<script>
import Hitest from "./Hitest.vue";
import Pitest from "./Pitest.vue";
import Page1 from "./Page1.vue";
import Page2 from "./Page2.vue";
export default {
name: 'HelloWorld',
data: function() {
return {
name: "Skype",
age: 18,
description: "Description",
changePage: 'Page1'
}
},
components: {
Hitest,
Pitest,
Page1,
Page2
},
methods: {
changeName() {
this.name = "change Name";
},
resetNameCallback() {
this.name = 'resetNameCallback';
},
changeAge() {
this.age = 34;
}
}
}
</script>
<template>
<div class="hello">
<h1>{{ name }}</h1>
</div>
</template>
<script>
export default {
name: 'Page1',
data: function() {
return {
name: "Page1"
}
}
}
</script>
<template>
<div class="hello">
<h1>{{ number }}</h1>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
name: 'Page2',
data: function() {
return {
number: 0
}
},
methods: {
increment() {
this.number++;
}
}
}
</script>