1

todolist-project/build/webpack.base.conf.js

@@ -18,7 +18,7 @@ const createLintingRule = () => ({
     emitWarning: !config.dev.showEslintErrorsInOverlay
   }
 })
-
+    
 module.exports = {
   context: path.resolve(__dirname, '../'),
   entry: {
@@ -51,7 +51,7 @@ module.exports = {
         loader: 'babel-loader',
         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
       },
-      {
+      {     
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
         loader: 'url-loader',
         options: {

todolist-project/src/TodoList.vue

@@ -1,61 +1,24 @@
-<template>
-    <div>
-        <div>
-            <input v-model="inputValue"/>
-            <button @click="handleSubmit">提交</button>
-        </div>
-        <ul>
-            <todo-item v-for="(item, index) of list" :content="item" :index="index" :key="index"  @delete_one="handleDelete"></todo-item>
-        </ul>
-    </div>
-</template>
-
-<script>
-import TodoItem from './components/TodoItem'
-export default {
-  components: {
-    'todo-item': TodoItem
-  },
-  data () {
-    return {
-      list: [],
-      inputValue: ''
-    }
-  },
-  methods: {
-    handleSubmit () {
-      this.list.push(this.inputValue)
-      this.inputValue = ''
-    },
-    handleDelete (index) {
-      this.list.splice(index, 1)
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>
-
-
-
 <template>
   <div>
+    <!-- <div >
+      <span v-bind:titel="message">
+    鼠标悬停几秒钟查看此处动态绑定的提示信息！
+      </span>
+    </div> -->
     <div>
-      <input v-model="inputValue"/>
+      <input v-model="inputValue" />
       <button @click="handleSubmit">提交</button>
     </div>
     <ul>
-      <todo-item v-for="(item, index) of list" :content="item" :index="index" :key="index" @delete_one="handleDelete"></todo-item>
+      <todo-item v-for="(item, index) of list" :content="item" :index="index" :key="index"  @delete_one="handleDelete"></todo-item>
     </ul>
   </div>
 </template>
 
 <script>
 import TodoItem from './components/TodoItem'
 export default {
-  compponents: {
+  components: {
     'todo-item': TodoItem
   },
   data () {
@@ -76,5 +39,6 @@ export default {
 }
 </script>
 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-</style>
+</style>

todolist-project/src/components/TodoItem.vue

@@ -16,25 +16,3 @@ export default {
 
 <style scoped>
 </style>
-
-
-<template>
-  <li @click="handleDelete">{{content}}</li>
-</template>
-
-<script>
-export default {
-  propsL: ['content', 'index'],
-  methods: {
-    handleDelete () {
-      this.$emit('delete_one', this.index)
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
-
-

todolist-project/src/main.js

@@ -1,21 +1,5 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-// import Vue from 'vue'
-// import TodoList from './TodoList'
-// import router from './router'
-
-// Vue.config.productionTip = false
-
-// /* eslint-disable no-new */
-// new Vue({
-//   el: '#app',
-//   router,
-//   components: {
-//     TodoList
-//   },
-//   template: '<TodoList/>'
-// })
-
 import Vue from 'vue'
 import TodoList from './TodoList'
 import router from './router'

todolist02/src/TodoList.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <div>
+      <input v-model="inputValue"  @keyup.enter="handleSubmit"/>
+      <button @click="handleSubmit">提交</button>
+    </div>
+    <ul>
+      <todo-item v-for="(item, index) of list" :index="index" :key="index" :content="item" @delete_one="handleDelete">
+      </todo-item>
+    </ul>
+  </div>
+</template>
+
+<script>
+import TodoItem from './components/TodoItem'
+export default {
+  components: {
+    'todo-item': TodoItem
+  },
+  data () {
+    return {
+      list: [],
+      inputValue: ''
+    }
+  },
+  methods: {
+    handleSubmit () {
+      this.list.push(this.inputValue)
+      this.inputValue = ''
+    },
+    handleDelete (index) {
+      this.list.splice(index, 1)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

todolist02/src/components/TodoItem.vue

@@ -0,0 +1,17 @@
+<template>
+  <li @click="handleDelete">{{content}}</li>
+</template>
+
+<script>
+export default {
+  props: ['content', 'index'],
+  methods: {
+    handleDelete () {
+      this.$emit('delete_one', this.index)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

todolist02/src/main.js

@@ -1,7 +1,7 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
-import App from './App'
+import todolist from './TodoList'
 import router from './router'
 
 Vue.config.productionTip = false
@@ -10,6 +10,6 @@ Vue.config.productionTip = false
 new Vue({
   el: '#app',
   router,
-  components: { App },
-  template: '<App/>'
+  components: { todolist },
+  template: '<todolist/>'
 })

todolist02/src/router/index.js

@@ -1,15 +1,11 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+// import HelloWorld from '@/components/HelloWorld'
 
 Vue.use(Router)
 
 export default new Router({
   routes: [
-    {
-      path: '/',
-      name: 'HelloWorld',
-      component: HelloWorld
-    }
+
   ]
 })