matsubo/vue_tutorial.html

## vue_tutorial.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>vue tutorial</title>
  </head>

  <body>
    <div id="app">
      <p>{{ message }}</p>
    </div>

    <div id="app-2">
      <span v-bind:title="message">
        Hover your mouse over me for a few seconds to see my dynamically bound
        title!
      </span>
    </div>
    <div id="app-3">
      <span v-if="seen">Now you see me</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>

    <ol>
      <!-- Create an instance of the todo-item component -->
      <todo-item></todo-item>
    </ol>

    <div id="app-7">
      <ol>
        <!--
      Now we provide each todo-item with the todo object
      it's representing, so that its content can be dynamic.
      We also need to provide each component with a "key",
      which will be explained later.
    -->
        <todo-item
          v-for="item in groceryList"
          v-bind:todo="item"
          v-bind:key="item.id"
        ></todo-item>
      </ol>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "Hello faf Vue.js!"
        }
      });

      var app2 = new Vue({
        el: "#app-2",
        data: {
          message: "You loaded this page on " + new Date().toLocaleString()
        }
      });

      var app3 = new Vue({
        el: "#app-3",
        data: {
          seen: true
        }
      });

      var app4 = new Vue({
        el: "#app-4",
        data: {
          todos: [
            {
              text: "Learn JavaScript"
            },
            {
              text: "Learn Vue"
            },
            {
              text: "Build something awesome"
            }
          ]
        }
      });

      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: "Hello Vue!"
        }
      });

      Vue.component("todo-item", {
        props: ["todo"],
        template: "<li>{{ todo.text }}</li>"
      });

      var app7 = new Vue({
        el: "#app-7",
        data: {
          groceryList: [
            {
              id: 0,
              text: "Vegetables"
            },
            {
              id: 1,
              text: "Cheese"
            },
            {
              id: 2,
              text: "Whatever else humans are supposed to eat"
            }
          ]
        }
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>vue tutorial</title>
	</head>

	<body>
	<div id="app">
	<p>{{ message }}</p>
	</div>

	<div id="app-2">
	<span v-bind:title="message">
	Hover your mouse over me for a few seconds to see my dynamically bound
	title!
	</span>
	</div>
	<div id="app-3">
	<span v-if="seen">Now you see me</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>

	<ol>
	<!-- Create an instance of the todo-item component -->
	<todo-item></todo-item>
	</ol>

	<div id="app-7">
	<ol>
	<!--
	Now we provide each todo-item with the todo object
	it's representing, so that its content can be dynamic.
	We also need to provide each component with a "key",
	which will be explained later.
	-->
	<todo-item
	v-for="item in groceryList"
	v-bind:todo="item"
	v-bind:key="item.id"
	></todo-item>
	</ol>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<script>
	const app = new Vue({
	el: "#app",
	data: {
	message: "Hello faf Vue.js!"
	}
	});

	var app2 = new Vue({
	el: "#app-2",
	data: {
	message: "You loaded this page on " + new Date().toLocaleString()
	}
	});

	var app3 = new Vue({
	el: "#app-3",
	data: {
	seen: true
	}
	});

	var app4 = new Vue({
	el: "#app-4",
	data: {
	todos: [
	{
	text: "Learn JavaScript"
	},
	{
	text: "Learn Vue"
	},
	{
	text: "Build something awesome"
	}
	]
	}
	});

	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: "Hello Vue!"
	}
	});

	Vue.component("todo-item", {
	props: ["todo"],
	template: "<li>{{ todo.text }}</li>"
	});

	var app7 = new Vue({
	el: "#app-7",
	data: {
	groceryList: [
	{
	id: 0,
	text: "Vegetables"
	},
	{
	id: 1,
	text: "Cheese"
	},
	{
	id: 2,
	text: "Whatever else humans are supposed to eat"
	}
	]
	}
	});
	</script>
	</body>
	</html>