Vue 2 Template Code Generator - HTML Framework - 常规

<!DOCTYPE html>
<html>
<head>
	<meta charset='UTF-8'>
	<title>Generate Vue 2 Template Code</title>
</head>
<body>
	<div id='app'>
		<textarea v-model='templateCode' rows='10' cols='50'></textarea>
		<button @click='generateTemplate'>Generate Template Code</button>
	</div>
	<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
	<script>
		new Vue({
			el: '#app',
			data: {
				templateCode: ''
			},
			methods: {
				generateTemplate: function() {
					this.templateCode = `
						<template>
							<div>
								<p>{{ message }}</p>
								<input type='text' v-model='inputValue'>
								<button @click='updateMessage'>Update Message</button>
							</div>
						</template>
<pre><code>					&lt;script&gt;
						export default {
							data() {
								return {
									message: 'Hello World!',
									inputValue: ''
								}
							},
							methods: {
								updateMessage() {
									this.message = this.inputValue;
									this.inputValue = '';
								}
							}
						}
					&lt;/script&gt;
				`;
				}
			}
		})
&lt;/script&gt;
</code></pre>
</body>
</html>