Vue学习笔记（二）

1.引入组件需要注意的事项说明和步骤：

第一步，引入对应的组件：

import Hello2 from './components/Hello2'

第二步：

需要注册该组件才可以使用

<script>
import Store from './store'
import Hello2 from './components/Hello2'
export default {
  data: function () {
    return {
      title: 'this is todo list',
      items: Store.fetch(),
      newItem: ''

    }
  },
  components: {Hello2},//进行组件注册
  watch: {
    items: {
      handler: function (items) {
        console.log(items)
        Store.save(items)
      },
      deep: true
    }
  },
  methods: {
    toggleFinish: function (item) {
      console.log(item)
    },
    addNew: function () {
      console.log(this.newItem)
      this.items.push({
        label: this.newItem,
        isFinished: false
      })
      this.newItem = ''
      Store.save()
    }
  }
}
</script>

第三步:模板中需要载人对应的组件，需要转成对应的驼峰格式

<template >
  <div id="app">
    <h1 v-text="title"></h1>

    <input type="text" v-model="newItem" @keyup.enter="addNew">

    <ul>
      <li v-for="(list,index) in items" :class="{finished: list.isFinished}"  @click="toggleFinish(list)" :key="index" :id="index">
          {{list.label}}
      </li>
    </ul>

    <hello2>引入组件</hello2>
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>