目录

 

 

过程

结果

---

 

过程

命令行工具CLI，可以快速搭建大型简单应用

#全局安装 vue-cli
npm install --global vue-cli

#创建一个局域 webpack 模板的新项目
vue init webpack my-project

#安装依赖
cd my-project
npm run dev

这样就可以了，

这里我使用WebStorm打开：

并且修改了components中的vue和src下的vue，

这里要注意下。

其实这里面一开始的页面是index.html，然后就加载了src下的main.js，这里修改main.js下的导入，即可

main.js

// 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'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { TodoList },
  template: '<TodoList/>'
})

TodoList.vue

<template>
  <div>
    <div>
      <input v-model="inputValue"/>
      <button @click="handleSubmit">提交</button>
    </div>
    <ul>
      <todo-item
        v-for="(item, index) of list"
        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todo-item>
    </ul>
  </div>
</template>

<script>
  import TodoItem from './components/TodoItem'
export default {
  components:{
    'todo-item': TodoItem
  },
  data(){
    return{
      inputValue: '',
      list: []
    }
  },
  methods: {
    handleSubmit(){
      // alert(123)
      this.list.push(this.inputValue)
    },
    handleDelete(index){
      this.list.splice(index, 1)
    }
  }
}
</script>

<style>

</style>

TodoItem.vue

<template>
  <li @click="handleDelete" class="item">{{content}}</li>
</template>

<script>
export default {
  props: ['content', 'index'],
  methods: {
    handleDelete(){
      this.$emit('delete', this.index)
    }
  }
}
</script>

<style scoped>
  .item{
    color: green;
  }
</style>

 

结果

在Input中输入后如下：

删除一个：