YuheiNakasaka · April 3, 2017 02:24
diff --git a/vue-test.html b/vue-test.html
 <!doctype html>
 <html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>vue js test</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
    <style>
    body {
      margin: 0;
    }
    #wrapper {
      width: 100%;
      min-height: 1000px;
      margin: 20px;
    }
    h1 {
      font-size: 16px;
    }
    .active {
      background-color: red;
    }
    </style>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="wrapper">
      <div id="app">
        <p>{{ information }}</p>
        <p v-bind:title="message">{{ message }}</p>
        <p v-if="seen">This is Secret Content.</p>
        <ul>
          <todo-item
            v-for="(todo, index) in todos"
            v-bind:todo="todo"
            v-on:remove="todos.splice(index, 1)"
            :key="todo.id"
            >
          </todo-item>
        </ul>
        <p>Computed: {{ computedDate }}</p>
        <p>Methods: {{ methodsDate() }}</p>
        <p>Question: {{ question }}</p>
        <p v-on:click="changeActivation" v-bind:class="{active: isActive}">Active? => {{ isActive }}</p>
        <p v-show="validCharLength">message length is more than 5</p>
        message: <input type="text" v-model.lazy="message"/><br />
        question: <input type="text" v-model="question"><br />
        <button v-on:click="capitalize($event)">capitalize!</button><br />
      </div>
    </div>
    <script>
    // todo list component
    Vue.component('todo-item', {
      props: {
        todo: {
          type: Object,
          default: function () {
            return { id: 0, text: 'default' }
          }
        }
      },
      template: `
        <li>
          {{ todo.text }}
          <button v-on:click="$emit('remove')">X</button>
        </li>
      `
    });

    // main app controller
    vm = new Vue({
      el: '#app',
      data: {
        seen: true,
        message: 'hello vue js !' + new Date(),
        information: 'none',
        question: '',
        isActive: false,
        validCharLength: false,
        todos: [
          { id: 1, text: 'Cat' },
          { id: 2, text: 'Dog' },
          { id: 3, text: 'Frog' }
        ],
      },
      watch: {
        question: function(newQuestion) {
          console.log(newQuestion);
        },
        message: function(oldVal, newVal) {
          this.isValidCharLength()
          this.information = 'message updated!\nOld=> ' + oldVal + '\nNew=> ' + newVal
        }
      },
      computed: {
        computedDate: function () {
          return Date.now() // cached
        }
      },
      methods: {
        capitalize: function (e) {
          console.log(e);
          this.message = this.message.toUpperCase();
        },
        methodsDate: function () {
          return Date.now() // exec per data values changed
        },
        changeActivation: function () {
          this.isActive = !this.isActive;
        },
        isValidCharLength: function () {
          if (this.message.length > 5) {
            this.validCharLength = true
          } else {
            this.validCharLength = false
          }
        }
      },
      created: function (){
        console.log('LIFE CYCLE: created');
        this.isValidCharLength()
      },
      mounted: function (){
        console.log('LIFE CYCLE: mounted');
      },
      updated: function (){
        console.log('LIFE CYCLE: updated');
      },
      destroyed: function (){
        console.log('LIFE CYCLE: destroyed');
      }
    })
    </script>
  </body>
 </html>
	<!doctype html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>vue js test</title>
	<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
	<style>
	body {
	margin: 0;
	}
	#wrapper {
	width: 100%;
	min-height: 1000px;
	margin: 20px;
	}
	h1 {
	font-size: 16px;
	}
	.active {
	background-color: red;
	}
	</style>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	</head>
	<body>
	<div id="wrapper">
	<div id="app">
	<p>{{ information }}</p>
	<p v-bind:title="message">{{ message }}</p>
	<p v-if="seen">This is Secret Content.</p>
	<ul>
	<todo-item
	v-for="(todo, index) in todos"
	v-bind:todo="todo"
	v-on:remove="todos.splice(index, 1)"
	:key="todo.id"
	>
	</todo-item>
	</ul>
	<p>Computed: {{ computedDate }}</p>
	<p>Methods: {{ methodsDate() }}</p>
	<p>Question: {{ question }}</p>
	<p v-on:click="changeActivation" v-bind:class="{active: isActive}">Active? => {{ isActive }}</p>
	<p v-show="validCharLength">message length is more than 5</p>
	message: <input type="text" v-model.lazy="message"/><br />
	question: <input type="text" v-model="question"><br />
	<button v-on:click="capitalize($event)">capitalize!</button><br />
	</div>
	</div>
	<script>
	// todo list component
	Vue.component('todo-item', {
	props: {
	todo: {
	type: Object,
	default: function () {
	return { id: 0, text: 'default' }
	}
	}
	},
	template: `
	<li>
	{{ todo.text }}
	<button v-on:click="$emit('remove')">X</button>
	</li>
	`
	});

	// main app controller
	vm = new Vue({
	el: '#app',
	data: {
	seen: true,
	message: 'hello vue js !' + new Date(),
	information: 'none',
	question: '',
	isActive: false,
	validCharLength: false,
	todos: [
	{ id: 1, text: 'Cat' },
	{ id: 2, text: 'Dog' },
	{ id: 3, text: 'Frog' }
	],
	},
	watch: {
	question: function(newQuestion) {
	console.log(newQuestion);
	},
	message: function(oldVal, newVal) {
	this.isValidCharLength()
	this.information = 'message updated!\nOld=> ' + oldVal + '\nNew=> ' + newVal
	}
	},
	computed: {
	computedDate: function () {
	return Date.now() // cached
	}
	},
	methods: {
	capitalize: function (e) {
	console.log(e);
	this.message = this.message.toUpperCase();
	},
	methodsDate: function () {
	return Date.now() // exec per data values changed
	},
	changeActivation: function () {
	this.isActive = !this.isActive;
	},
	isValidCharLength: function () {
	if (this.message.length > 5) {
	this.validCharLength = true
	} else {
	this.validCharLength = false
	}
	}
	},
	created: function (){
	console.log('LIFE CYCLE: created');
	this.isValidCharLength()
	},
	mounted: function (){
	console.log('LIFE CYCLE: mounted');
	},
	updated: function (){
	console.log('LIFE CYCLE: updated');
	},
	destroyed: function (){
	console.log('LIFE CYCLE: destroyed');
	}
	})
	</script>
	</body>
	</html>