jeffbr13/Vue walkthrough.html

## Vue walkthrough.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue walkthrough</title>

    <script src="https://unpkg.com/vue"></script>

    <style>
        body {
            margin: 1em auto;
            max-width: 40em;
            padding: 0 .62em;
            font: 1.2em/1.62 sans-serif;
        }

        h1, h2, h3 {
            line-height: 1.2;
        }

        @media print {
            body {
                max-width: none
            }
        }
    </style>
</head>
<body>
<header>
    <h1>Vue walkthrough</h1>
    <p>via <a href="https://vuejs.org/v2/guide/">https://vuejs.org/v2/guide/</a></p>
</header>

<main>
    <section>
        <h2>app</h2>
        <div id="app">
            <p>{{ message }}</p>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                }
            })
            // app.message = 'new message'
        </script>
    </section>

    <section>
        <h2>app-2</h2>
        <div id="app-2">
            <span v-bind:title="message">
                Hover mouse to set v-bind title to bound Vue instance's <code>data.message</code>.
            </span>
        </div>
        <script>
            const app2 = new Vue({
                el: '#app-2',
                data: {
                    message: 'You set this attribute on ' + new Date().toLocaleString()
                }
            })
        </script>
    </section>

    <section>
        <h2>app-3</h2>
        <div id="app-3">
            <p v-if="seen">You can see me</p>
        </div>

        <script>
            const app3 = new Vue({
                el: '#app-3',
                data: {
                    seen: true
                }
            });
            // app3.seen = false
        </script>
    </section>


    <section>
        <h2>app-4</h2>
        <div id="app-4">
            <ol>
                <li v-for="todo in todos">{{ todo.text }}</li>
            </ol>

        </div>
        <script>
            const app4 = new Vue({
                el: '#app-4',
                data: {
                    todos: [
                        {text: 'get a haircut'},
                        {text: 'buy milk'},
                        {text: 'cook sausages'}
                    ]
                }
            });
            // app4.todos.push({text: 'something else'})
        </script>
    </section>


    <section>
        <h2>app-5</h2>
        <div id="app-5">
            <p>{{message}}</p>
            <button v-on:click="reverseMessage">Reverse!</button>
        </div>

        <script>
            new Vue({
                el: '#app-5',
                data: {
                    message: 'Ahoy there!'
                },
                methods: {
                    reverseMessage: function () {
                        console.log(this);
                        this.message = this.message.split('').reverse().join('');
                    }
                }
            });
            // $('#app-5').children[1].click()
        </script>
    </section>

    <section>
        <h2>app-6</h2>
        <div id="app-6">
            <p>{{ message }}</p>
            <input type="text" v-model="message">
        </div>
        <script>
            new Vue({
               el: '#app-6',
               data: {
                   message: 'Input your own message!'
               }
            });
        </script>
    </section>

    <section>
        <h2>Vue Component</h2>
        <!-- component instantiation -->
        <div id="app-7">
            <ol>
                <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
            </ol>
        </div>
        <!-- Vue Component definition -->
        <script>
            Vue.component('todo-item', {
                template: '<li>{{ todo.text }}</li>',
                props: ['todo']
            });
        </script>
        <!-- Vue app (a view-model)-->
        <script>
            new Vue({
                el: '#app-7',
                data: {
                    groceryList: [
                        {id: 1, text: 'Rice'},
                        {id: 2, text: 'Beans'},
                        {id: 3, text: 'Chili Pepper'},
                        {id: 4, text: 'Toilet Paper'}
                    ]
                }
            })
        </script>
    </section>
</main>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Vue walkthrough</title>

	<script src="https://unpkg.com/vue"></script>

	<style>
	body {
	margin: 1em auto;
	max-width: 40em;
	padding: 0 .62em;
	font: 1.2em/1.62 sans-serif;
	}

	h1, h2, h3 {
	line-height: 1.2;
	}

	@media print {
	body {
	max-width: none
	}
	}
	</style>
	</head>
	<body>
	<header>
	<h1>Vue walkthrough</h1>
	<p>via <a href="https://vuejs.org/v2/guide/">https://vuejs.org/v2/guide/</a></p>
	</header>

	<main>
	<section>
	<h2>app</h2>
	<div id="app">
	<p>{{ message }}</p>
	</div>
	<script>
	var app = new Vue({
	el: '#app',
	data: {
	message: 'Hello Vue!'
	}
	})
	// app.message = 'new message'
	</script>
	</section>

	<section>
	<h2>app-2</h2>
	<div id="app-2">
	<span v-bind:title="message">
	Hover mouse to set v-bind title to bound Vue instance's <code>data.message</code>.
	</span>
	</div>
	<script>
	const app2 = new Vue({
	el: '#app-2',
	data: {
	message: 'You set this attribute on ' + new Date().toLocaleString()
	}
	})
	</script>
	</section>

	<section>
	<h2>app-3</h2>
	<div id="app-3">
	<p v-if="seen">You can see me</p>
	</div>

	<script>
	const app3 = new Vue({
	el: '#app-3',
	data: {
	seen: true
	}
	});
	// app3.seen = false
	</script>
	</section>


	<section>
	<h2>app-4</h2>
	<div id="app-4">
	<ol>
	<li v-for="todo in todos">{{ todo.text }}</li>
	</ol>

	</div>
	<script>
	const app4 = new Vue({
	el: '#app-4',
	data: {
	todos: [
	{text: 'get a haircut'},
	{text: 'buy milk'},
	{text: 'cook sausages'}
	]
	}
	});
	// app4.todos.push({text: 'something else'})
	</script>
	</section>


	<section>
	<h2>app-5</h2>
	<div id="app-5">
	<p>{{message}}</p>
	<button v-on:click="reverseMessage">Reverse!</button>
	</div>

	<script>
	new Vue({
	el: '#app-5',
	data: {
	message: 'Ahoy there!'
	},
	methods: {
	reverseMessage: function () {
	console.log(this);
	this.message = this.message.split('').reverse().join('');
	}
	}
	});
	// $('#app-5').children[1].click()
	</script>
	</section>

	<section>
	<h2>app-6</h2>
	<div id="app-6">
	<p>{{ message }}</p>
	<input type="text" v-model="message">
	</div>
	<script>
	new Vue({
	el: '#app-6',
	data: {
	message: 'Input your own message!'
	}
	});
	</script>
	</section>

	<section>
	<h2>Vue Component</h2>
	<!-- component instantiation -->
	<div id="app-7">
	<ol>
	<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
	</ol>
	</div>
	<!-- Vue Component definition -->
	<script>
	Vue.component('todo-item', {
	template: '<li>{{ todo.text }}</li>',
	props: ['todo']
	});
	</script>
	<!-- Vue app (a view-model)-->
	<script>
	new Vue({
	el: '#app-7',
	data: {
	groceryList: [
	{id: 1, text: 'Rice'},
	{id: 2, text: 'Beans'},
	{id: 3, text: 'Chili Pepper'},
	{id: 4, text: 'Toilet Paper'}
	]
	}
	})
	</script>
	</section>
	</main>

	</body>
	</html>