SOURCE

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    loginType: null
  }
})

//遍历列表
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' },
			{ message: 'Baz' }
    ]
  }
})

//遍历对象
var obj1 = new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

//列表渲染，组件渲染
Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">Remove</button>\
    </li>\
  ',
  props: ['title']
})

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      {
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})

<div id="app">
  <template v-if="loginType === 'username'">
    <label>
      Username
    </label>
    <input placeholder="Enter your username">
  </template>
  <template v-else>
    <label>
      Email
    </label>
    <input placeholder="Enter your email address">
  </template>
</div>

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

<ul id="v-for-object" class="demo">
  <li v-for="(value,name, index) in object" v-bind:key="name">
    {{index}}: {{name}}: {{ value }}
  </li>
</ul>

<div id="todo-list-example">
	<span>注意vue的$emit方法</span>
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="E.g. Feed the cat"
    >
    <button>Add</button>
  </form>
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>