suzusime/vue-sample.html

## vue-sample.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>
    <body>
        <div id="app">
            {{ message }}
        </div>
        <div id="app-2">
            <span v-bind:title="message">
                ここにマウスを載せてね。
            </span>
        </div>
        <div id="app-3">
            <span v-if="seen">私が見えますか？</span>
        </div>
        <div id="app-4">
            <ol>
                <li v-for="todo in todos">
                    {{todo.text}}
                </li>
            </ol>
        </div>
        <div id="app-5">
            <p>{{message}}</p>
            <button v-on:click="reverseMessage">Reverse Message</button>
        </div>
        <div id="app-6">
            <p>{{message}}</p>
            <input v-model="message">
        </div>
        <div id="app-7">
            <ol>
                <todo-item v-for="item in grossaryList" :key="item.id" v-bind:todo="item"></todo-item>
            </ol>
        </div>
        <div id="app-8">
            <p>{{message}}</p>
        </div>
        <script>
                var app = new Vue({
                    el: '#app',
                    data: {
                        message: 'Hello, Vue.js.'
                    }
                })
                var app2 = new Vue({
                    el: '#app-2',
                    data: {
                        message: 'このページをロードした時刻：' + new Date().toLocaleString()
                    }
                })
                var app3 = new Vue({
                    el: '#app-3',
                    data: {
                        seen: true
                    }
                })
                var app4 = new Vue({
                    el: '#app-4',
                    data: {
                        todos: [
                            { text: "シナリオを書く" },
                            { text: "課題研究テーマ決め"}
                        ]
                    }
                })
                var app5 = new Vue({
                    el: '#app-5',
                    data: {
                        message: 'Hello, Vue.js!'
                    },
                    methods: {
                        reverseMessage: function(){
                            this.message = this.message.split(' ').reverse().join(' ')
                        }
                    }
                })
                var app6 = new Vue({
                    el: '#app-6',
                    data: {
                        message: '初期メッセージ'
                    }
                })
                Vue.component( 'todo-item', {
                    props: ['todo'],
                    template: '<li>{{todo.text}}</li>'
                })
                var app7 = new Vue({
                    el: '#app-7',
                    data: {
                        grossaryList: [
                            {id: 0, text: '野菜'},
                            {id: 1, text: '肉'}
                        ]
                    }
                })
                var app8 = new Vue({
                    el: '#app-8',
                    data: {
                        message: 'waiting download...'
                    },
                    created: function(){
                        var oReq = new XMLHttpRequest();
                        oReq.open('GET', 'https://www3.nhk.or.jp/rss/news/cat0.xml');
                        oReq.onload = () => {
                            this.message = oReq.response;
                        }
                        oReq.send();
                    }
                })
            </script>
        </body>
</html>
	<html>
	<head>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>
	<div id="app">
	{{ message }}
	</div>
	<div id="app-2">
	<span v-bind:title="message">
	ここにマウスを載せてね。
	</span>
	</div>
	<div id="app-3">
	<span v-if="seen">私が見えますか？</span>
	</div>
	<div id="app-4">
	<ol>
	<li v-for="todo in todos">
	{{todo.text}}
	</li>
	</ol>
	</div>
	<div id="app-5">
	<p>{{message}}</p>
	<button v-on:click="reverseMessage">Reverse Message</button>
	</div>
	<div id="app-6">
	<p>{{message}}</p>
	<input v-model="message">
	</div>
	<div id="app-7">
	<ol>
	<todo-item v-for="item in grossaryList" :key="item.id" v-bind:todo="item"></todo-item>
	</ol>
	</div>
	<div id="app-8">
	<p>{{message}}</p>
	</div>
	<script>
	var app = new Vue({
	el: '#app',
	data: {
	message: 'Hello, Vue.js.'
	}
	})
	var app2 = new Vue({
	el: '#app-2',
	data: {
	message: 'このページをロードした時刻：' + new Date().toLocaleString()
	}
	})
	var app3 = new Vue({
	el: '#app-3',
	data: {
	seen: true
	}
	})
	var app4 = new Vue({
	el: '#app-4',
	data: {
	todos: [
	{ text: "シナリオを書く" },
	{ text: "課題研究テーマ決め"}
	]
	}
	})
	var app5 = new Vue({
	el: '#app-5',
	data: {
	message: 'Hello, Vue.js!'
	},
	methods: {
	reverseMessage: function(){
	this.message = this.message.split(' ').reverse().join(' ')
	}
	}
	})
	var app6 = new Vue({
	el: '#app-6',
	data: {
	message: '初期メッセージ'
	}
	})
	Vue.component( 'todo-item', {
	props: ['todo'],
	template: '<li>{{todo.text}}</li>'
	})
	var app7 = new Vue({
	el: '#app-7',
	data: {
	grossaryList: [
	{id: 0, text: '野菜'},
	{id: 1, text: '肉'}
	]
	}
	})
	var app8 = new Vue({
	el: '#app-8',
	data: {
	message: 'waiting download...'
	},
	created: function(){
	var oReq = new XMLHttpRequest();
	oReq.open('GET', 'https://www3.nhk.or.jp/rss/news/cat0.xml');
	oReq.onload = () => {
	this.message = oReq.response;
	}
	oReq.send();
	}
	})
	</script>
	</body>
	</html>