使用 vue cli 重新制作一个 todolist

最新推荐文章于 2022-10-20 15:49:20 发布

原创最新推荐文章于 2022-10-20 15:49:20 发布 · 413 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

35 篇文章

订阅专栏

本文介绍如何在Vue.js项目中使用单文件组件(SFC)创建一个待办事项列表应用，包括启动项目、数据绑定、组件拆分及父子组件间的数据传递与事件触发。

首先，进入工程的目录，使用命令启动该工程 npm run start / npm run dev [可以参考工程目录下的 package.json文件]

（其中, x.vue 文件就是一个单文件组件）

下一步，更改单文件组件 x.vue.

注意，Vue语法要求，.vue文件中，<template>标签中，只能包含一个根元素。

首先将template 中的结构写上：

<template>
  <div>
    <div>
      <input />
      <button>提交</button>
    </div>
    <div>
      <ul>
      </ul>
    </div>
  </div>
</template>

然后，进行数据绑定：

其中，data 在 vue cli 中，作为一个组件，data 以函数的形式存在，不再像以前，以对象形式存在。函数的返回值，为具体的数据。

<script>
  export default{
    data () {
      return {
        inputValue: ''
      }
    }
  }
</script>

数据绑定：

<template>
  <div>
    <div>
      <input v-model='inputValue'/>
      <button @click='handleSubmit'>提交</button>
    </div>
    <div>
      <ul>
      </ul>
    </div>
  </div>
</template>

<script>
  export default{
    data () {
      return {
        inputValue: '',
        list: []
      }
    },
    methods:{
      handleSubmit (){
        this.list.push(this.inputValue);
        this.inputValue = '';
      }
    }
  }
</script>

ul li 组件拆分

不同与之前，Vue cli 拆分组件：在 src 目录下 components 下使用 xxx.vue

引用该组件：

<template>
  <div>
    <div>
      <input v-model='inputValue'/>
      <button @click='handleSubmit'>提交</button>
    </div>
    <div>
      <ul>
        <todo-item></todo-item>
      </ul>
    </div>
  </div>
</template>

<script>
  import TodoItem from './components/Todoitem'
  export default{
    // 局部组件
    components:{
      'todo-item': TodoItem
    },
    data () {
      return {
        inputValue: '',
        list: []
      }
    },
    methods:{
      handleSubmit (){
        this.list.push(this.inputValue);
        this.inputValue = '';
      }
    }
  }
</script>

todo-list 向子组件传值

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

<script>
  import TodoItem from './components/Todoitem'
  export default{
    // 局部组件
    components:{
      'todo-item': TodoItem
    },
    data () {
      return {
        inputValue: '',
        list: []
      }
    },
    methods:{
      handleSubmit (){
        this.list.push(this.inputValue);
        this.inputValue = '';
      }
    }
  }
</script>

子组件中，申明使用的属性，并使用插值表达式使用：

<template>
  <li>{{content}}</li>
</template>

<script>
export default {
  props: ['content']
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

删除子组件：

子组件文件：

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

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

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

父组件文件：

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

<script>
  import TodoItem from './components/Todoitem'
  export default{
    // 局部组件
    components:{
      'todo-item': TodoItem
    },
    data () {
      return {
        inputValue: '',
        list: []
      }
    },
    methods:{
      handleSubmit (){
        this.list.push(this.inputValue);
        this.inputValue = '';
      },
      handleDelete (index){
        this.list.splice(index, 1);
      }
    }
  }
</script>