Day34：待办事项项目与组件化脚手架

cherise9889
135 阅读6分钟

1.todolist项目

  1. 点击添加数据到list列表
    1. 在data中定义input（todoname）和list变量
    2. 使用v-model绑定输入框中的数据input（todoname）
    3. 给添加按钮绑定点击事件add
    4. 在add方法中，添加input（todoname）到list中（可以打印list到控制台
  1. 暂无待办事项和ul列表项的显示和隐藏（数组长度为0显示暂无，长度>0显示ul

    1. 暂无待办事项

      （0取反变true，整数取反为负数变成false

    2. 暂无待办事项

      （为0的时候显示暂无，不为0则else
      • 原方法

        暂无待办事项

        data中show:false
      • watch中 if (this.list.length == 0) {

this.show = true

}else{

this.show = false

}

  1. list列表渲染收集到的数据
    1. 使用v-for循环遍历li
    3. 其中item代表输入的内容，index代表索引，key为唯一值
  1. 收集数据的时候将状态也收集进去
    1. 在上面我们仅将字符串添加到list中，字符串不能携带更多东西（li的状态，id等）
    2. 使用对象，将输入的字符串包装为一个对象
    3. {id: +new Date(),name: this.todoName,checked: false}
    4. id为时间戳，不会重复，作为li的唯一标记
    5. name中存放的是文本框输入的数据
    6. checked判断li是否被选中
  1. 去重检查，是否有重复任务
    1. 添加任务之前，判断list中是否已经存在该任务——使用数组的find()方法，返回符合条件的元素，不是布尔值
    2. const res = this.list.find(item => item.name === this.todoName)
    3. if(res){ return alert('请勿重复输入同一事项') }
  1. 删除功能
    1. 给删除按钮绑定事件，传入要删除代办事项的id，在删除的方法中，要找到和传入id相同的元素，从数组中删除（方法1和方法2
    2. filter 保留所有不等于该id的项目 this.list = this.list.filter(item => item.id !== id)
    3. 通过传入的id找到对应的索引

const index = this.list.findIndex(item => item.id === id)

this.list.splice(index,1)

  1. 点击切换待办事项的状态
    1. 给复选框添加点击/改变事件，在事件方法中切换待办事项的isDone属性
    2. 将isDone这个vue变量，动态地绑定到待办事项span上
    3. 给input添加change事件 <input type="checkbox" class="check" :checked="item.isDone" @change="toggleIsDone(item.id)" />
    4. 改进，使用v-model绑定选中状态 ，不需要使用方法去修改—— <input type="checkbox" class="check" v-model="item.isDone"/>
    5. 书写change事件 toggleIsDone(id){ const item = this.list.find(item => item.id === id) // 返回找到的item item.isDone = !item.isDone // 取反 }
    6. 给span动态绑定样式，如果改变则为done样式，不改变则为原样式 {{item.name}}
  1. 底部footer实现
    1. 当数组的长度为0，底部不显示
    2. 统计全部事项个数：数组长度——全部事项{{list.length}}
    3. 统计已办事项个数：计算属性对数组进行过滤——已办事项{{finish}}
    4. computed: {finish(){ return this.list.filter(item => item.isDone == true).length },
  1. 底部footer前面复选框实现
    1. 使用计算属性实现全选框和复选框的双向绑定（如果复选框全部选中则全选框选中，如果全选框选中则复选框全部选中）需要根据li的选中状态设置footer前面全选框，同时还需要通过全选框设置li的选中状态。这里需要用到计算属性的get和set方法
    2. 对单个复选框与其他全部复选框进行双向绑定，需要用视图影响数据，必须要用 v-model，不能用:checked
    3. get方法：获取li的选中状态，根据结果设置全选框的状态。如果list中所有元素的isdone为true，则返回true，否则返回false
    4. allChecked: {get() { return this.list.every(item => item.isDone == true)}, },
    5. set方法：获取全选框的选中状态，根据其状态来设置前面li的选中状态
    6. get优化方法——
    7. set优化方法——
    8. 优化方法汇总——get() {return this.list.every(item => item.isDone == true)},set(value){this.list.forEach(item => item.isDone = value);}
  1. 底部footer右边两个按钮
    1. 清除已办事项：过滤数组，将item.isDone为true的内容清除
    2. delFin() {this.list = this.list.filter((item) => { item.isDone === false })},
    3. 清除所有：空数组
    4. clear() { this.list = [] },
  1. 编辑功能的实现
    1. 在span下添加input，点击span的时候使用v-if和v-else，显示input，隐藏span。修改完成后，就显示span隐藏input
    2. 需要给item添加一个属性isEdited属性，默认是false，不能编辑。当点击时切换为true
    3. 给span绑定一个点击事件这个事件就是用来切换span的可编辑状态。<span :class="item.isDone?'done':''" v-if="!item.isEdited" @click="toggleIsEdited(item.id)">{{item.name}}
    4. toggleIsEdited(id){

const item = this.list.find(item => item.id === id)

item.isEdited = !item.isEdited},

    1. 在input失去焦点的时候，先再次切换状态，并更改item里面的value值
    2. <input type="text" :value="item.value" v-else @blur="changeValue(item.id,event)">event)">event得到事件元素里的值
    3. 简洁方式：v-model绑定，在changeValue中就不需要修改值了，只需要获取id切换可编辑状态即可
    4. <input type="text" v-model="item.name" v-else v-focus @blur='changeValue(item.id)'>
    5. changeValue(id) {this.toggleIsEdited(id)}
  1. 点击span编辑框立即获取焦点
    1. 可以添加自定义指令解决
    2. directives: {// 注册一个局部的自定义指令 v-focus

focus: { // 指令的定义

inserted: function (el) {// 聚焦元素

el.focus() } } }

给input添加v-focus

<input type="text" :value="item.value" v-else v-focus @blur='changeValue(item.id,$event)'>

2.vue样式绑定

概念

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

使用

使用对象绑定样式 :class='字面量对象' 字面量对象需要和类名相一致

使用对象名绑定样式 :class="classObj" data: { classObj:{'plum':false,'green':true} },

数组绑定 :class='数组' 数组元素的值需要和类名相一致

常用三元表达式来切换元素样式

11

行内样式绑定 :style="{css样式属性名:vue变量名}"

3.组件化

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

概念

根据UI界面（视图）拆分的可重用的模块

模块化——对功能的拆分，将js功能拆分成更小的功能

组件化——对视图的拆分，能将大的视图拆分成更小的单元

优点

便于维护

便于复用组件

在一个文件内组件化

步骤

  1. 在vue实例外面，使用Vue.extends定义子组件，使用template属性渲染子组件
  2. 在vue实例里面，使用components属性来注册子组件，
  3. 在vue管控的区域内，使用刚才注册的组件构建页面
<div id="app">
    <!-- 使用header组件 -->
    <my-header>header</my-header> <!-- 一定要这样写，把MyHeader拆分开来 -->
    <div class="content">
        <h1>content</h1>
    </div>
    <div class="side">
        <h1>side</h1>
    </div>
</div>
<script>
    // 在vue实例外面定义组件
    const header = Vue.extend({
        template: '<div class="header"><h1>header</h1></div>'
    })
    // 在vue实例里面注册组件
    new Vue({
        el: '#app',
        components: {
            MyHeader: header
        },
    })

弊端

没有实现真正的重用，并且编写html代码非常不方便

解决

搭建VUE项目，使用.vue文件解决（一个.vue文件就是一个组件）

4.脚手架

概念

Vue CLI是一个基于Vue.js进行快速开发的完整系统

使用

安装

npm i -g @vue/cli

查询版本

vue --version

启动vue

vue create app（文件夹名字，可以随便起）

选择manual

选择npm

启动

待办项目，脚手架.png

avatar
文章
阅读
粉丝