概要

plunkerでvueやってみた。
練習問題、やってみた。
練習問題

vueファイルで湯婆婆を書け。
写真

サンプルコード


<template>
  <div>
    <h2>湯婆婆</h2>
		<div class="yubaba">
			<div>契約書</div>
			<div>甲は油屋当主として、乙を油屋に雇用することを</div>
			<div>契約し、労働に伴う対価の支払いを右の通り、約定する。</div>
			<div>なお、一日の労働の対価は金百円とする。</div>
			<div>甲　油屋当主　湯婆婆</div>
			<div>乙</div>
			<div>契約書だよ。そこに名前を書きな。</div>
			<input type="text" v-model="name"><br><br>
			<button v-on:click="outputName(),createNewName()" id="keiyakubtn">契約する</button>
			<div>{{displayName}}</div><br>
			<div>{{newName}}</div>
			<div v-if="!name">{{allClear()}}</div>
			<button v-on:click="contractCancellation">契約を破棄する</button>
		</div>
  </div>
</template>

<script>
define(['Vue'], function(Vue) {
  return new Vue({
    template: template,
		data() {
			return {
				name: '',
				displayName: '',
				newName: '',
				setTimeID: '',
			};
		},
		methods: {
			outputName() {
				if (!this.name) 
				{
					alert('名前を書きな!!')
				} 
				else if (this.name) 
				{
					this.displayName = 'ふん。「' + this.name + '」っていうのかい。贅沢な名前だねぇ'
				}
			},
			createNewName() {
				const displayNameArray = this.name.split('')
				this.setTimeID = setTimeout(() => {
					const randomName = displayNameArray[Math.floor(Math.random() * this.name.length)]
					this.newName = 'お前の名前は「' + randomName + '」だよ。いいかい「' + randomName + '」だよ。わかったら返事をするんだ！！'
				}, 3000)
			},
			allClear() {
				if (!this.name) 
				{
					this.displayName = ''
					this.newName = ''
				}
			},
			contractCancellation() {
				alert('契約破棄')
				this.name = '';
				this.displayName = ''
				this.newName = ''
				for(let i = 0; i < 1000; i++) 
				{
					document.write('　　わたしゃ残念だよ　　')
				}
			}
		},
  })
});
</script>

<style>
h3 {
	margin: 40px 0 0;
}
ul {
	list-style-type: none;
	padding: 0;
}
li {
	display: inline-block;
	margin: 0 10px;
}
a {
	color: #42b983;
}
#keiyakubtn {
	background-color: red;
	color: white;
	width: 4cm;
	height: 4cm;
}
</style>
成果物

以上。