Vue之 vue_cli开发todolist

vue_cli项目目录介绍

build：项目构建(webpack)相关代码
config：配置目录，包括端口号等。我们初学可以使用默认的。
node_modules：npm 加载的项目依赖模块
static  静态资源目录，如图片、字体等。
test    初始测试目录，可删除
.xxxx文件 这些是一些配置文件，包括语法配置，git配置等。
index.html  首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json    项目配置文件。
README.md   项目的说明文档，markdown 格式

src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
    1、assets: 放置一些图片，如logo等。
    2、components: 目录里面放了一个组件文件，可以不用。
    3、App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
    4、main.js: 项目的核心文件。


# main.js

new Vue({
    // 绑定挂载点
    el: '#app',
    router,
    
    // 导入组件
    components: { App },
    
    // 指定使用名称App组件的模板,若没有指定，则使用当前模板
    template: '<App/>',
    // template：'<h1>hello Vue.Js</h1>'

})


# App.vue
<!--单文件组件,包含组件所需的模板、样式和js-->

<!--模板-->
<template>
  <div>
    <h1>hello Vue</h1>
  </div>
</template>

<!--js-->
<script>
export default {
}
</script>

<!--css-->
<style>
</style>

---

利用vue_cli 开发 todo_list功能

# main.js

import TodoList from './TodoList'

new Vue({
  // 绑定挂载点
  el: '#app',
  
  router,
  
  // 导入组件
  components: { TodoList },
  
  template: '<TodoList/>' // 指定使用名称App组件的模板
})



# 方法1：单页面开发 ======================

# TodoList.vue
<!--单文件组件语法-->
<!--模板-->
<template>
  <div>
    <input v-model="input_val"/>
    <button @click="btn_click">提交</button>
    <ul>
      <li v-for="(item,index) in arr" @click="del_item(index)">{{item}}</li>
    </ul>
  </div>
</template>

<!--js-->
<script>
export default {

// 注意写法规范，前后必须有空格，其写法不同于单页面写法
  data () {
    return {
      input_val: '',
      arr: []
    }
  },

  methods: {

    btn_click () {
      this.arr.push(this.input_val)
      this.input_val = ''
    },

    del_item (index) {
      this.arr.splice(index,1)
    }
  }
}
</script>

<!--css-->
<style>
</style>




# 方法2：在TodoList组件中导入局部组件TodoItem ======================

# TodoList.vue
<!--单文件组件语法-->
<!--模板-->
<template>
  <div>
    <input v-model="input_val"/>
    <button @click="btn_click">提交</button>
    <ul>
      <!--此处需要向局部组件传递变量-->
      <todo_item v-for="(item,index) in arr"
        :index="index"
        :item="item"
        @del_item="del_item"
      ></todo_item>
    </ul>
  </div>
</template>
<!--js-->

<script>
import TodoItem from './components/TodoItem'

export default {
  // 引入模板
  components: {
    // 指定标签名称
    'todo_item': TodoItem
  },
  data () {
    return {
      input_val: '',
      arr: []
    }
  },
  methods: {
    btn_click () {
      this.arr.push(this.input_val)
      this.input_val = ''
    },
    del_item (index) {
      this.arr.splice(index, 1)
    }
  }
}
</script>
<!--css-->
<style>
</style>


# components/TodoItem.vue
<template>
  <li @click="del_item">{{item}}</li>
</template>

<script>
export default {
  props: ['index', 'item'],
  methods: {
    del_item () {
      // 触发事件 del_item并传入参数，在父组件中必须监听此事件
      this.$emit('del_item', this.index)
    }
  }
}
</script>

<style scoped>

</style>