Vueハンズオンの前の基礎の基礎@Kamakura MokMok Hack

Vueハンズオンの前の基礎の基礎 in Kamakura MokMok Hack @tyshgc slide: https://hackmd.io/@tyshgc/kamakura-mokmok-vue-react-handson/

	new Vue({
	el: "#app", //HTMLのどこに表示するか
	data() { // メッセージのデータ
	return {
	message: "御用でしょうか？"
	};
	},
	methods: { // 入力処理
	onCancel() {
	this.message = "かしこまりー!!";
	}
	},
	template: `
	<div>
	<p>{{message}}</p>
	<button @click="onCancel">用はない</button>
	</div>
	`
	});

	template: `
	<div>
	<p>{{message}}</p>
	<button @click="onCancel">用はない</button>
	</div>
	`

	import Servant from "./Servant.vue"

	new Vue({
	el: "#app", //HTMLのどこに表示するか
	//...<同じなので省略>...
	components: { //コンポーネントを登録
	Servant
	},
	template: `
	<div>
	<servant :message="message" />
	<button @click="onCancel">用はないよ</button>
	</div>
	`
	});

	<template>
	<button @click="onCommand">用はないよ</button>
	</template>

	<script>
	export default {
	name: "CancelButton",
	methods: {
	onCommand() {
	// $emitで呼び出し元のイベントを登録して
	// ここで発火できる
	this.$emit("do-command");
	}
	}
	};
	</script>

コンポーネントを使おう！

	//...<同じなので省略>...
	import CancelButton from "./CancelButton.vue"

	new Vue({
	el: "#app", //HTMLのどこに表示するか
	//...<同じなので省略>...
	components: { //コンポーネントを登録
	Servant,
	CancelButton
	},
	template: `
	<div>
	<servant :message="message" />
	<cancel-button @do-command="onCancel" />
	</div>
	`
	});

	new Vue({
	el: "#app", //HTMLのどこに表示するか
	data() {
	return {
	message: "御用でしょうか？",
	isAsk: true //用件をたずねているか？
	};
	},
	methods: { // 入力処理
	onCancel() {
	this.message = "かしこまりー!!";
	this.isAsk = false;
	}
	},
	components: { //コンポーネントを登録
	//...<同じなので省略>...
	Emoji,
	},
	template: `
	<div>
	<servant :message="message">
	<emoji :is-ask="isAsk" />
	</servant>
	<cancel-button @do-command="onCancel" />
	</div>
	`
	});