ToDolist小案例（组件的使用）

た入场券 2023-06-13 09:58 39阅读 0赞

### 实现效果 ###

![在这里插入图片描述][20191119221135629.gif]

### 长知识 ###

学了忘，忘了学！

1.  端口修改：

> ??直接写端口不能识别  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]  
> 还可以在index.js中直接修改  
> `can be overwritten by process.env.PORT, if port is in use, a free one will be determined`  
> 可以被process.env.PORT覆盖，如果端口正在使用，则将确定空闲端口![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]

1.  fieldset 元素可将表单内的相关元素分组。

> `<fieldset>` 标签将表单内容的一部分打包，生成一组相关表单的字段。
> 
> 当一组表单元素放到 `<fieldset>` 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，或者甚至可创建一个子表单来处理这些元素。
> 
> `<fieldset>` 标签没有必需的或唯一的属性。
> 
> `<legend>` 标签为 fieldset 元素定义标题。

1.  在给表单元素绑定checked属性时忘了使用v-bind绑定，结果没有拿到变量的值，全部默认选中。不会随变量变化动态修改

> 什么时候需要使用`v-bind`绑定？  
> 只有传递字符串常量时，不采用v-bind形式，其余情况均采用v-bind形式传递。

[这个博客里有很详细的讲解][Link 1]  
所以代码修改为

1.  `v-if`和`v-for`不能连用

> 不要在与`v-for`相同的元素上使用`v-if`。因为`v-for`指令的优先级高于`v-if`当它们处于同一节点。`v-for` 的优先级比 `v-if` 更高，这意味着 `v-if` 将分别重复运行于每个 `v-for` 循环中。

1.  按键修饰符  
    在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 `v-on` 在监听键盘事件时添加按键修饰符：

<input v-on:keyup.enter="submit">

1.  将input里的内容添加方法写在计算属性`computed`中时，如果有重复的事项不会添加到列表中，如果写在`methods`中则正常添加

> 计算属性与方法的区别
> 
> 1.  计算属性有缓存机制，方法没有；
> 2.  只要计算属性内相关依赖的值不发生改变，多次调用计算属性可以从缓存中获取值，不必重复计算；
> 3.  方法每次调用都要重新执行一遍；

综上推测，如果使用计算属性添加事项，有以前出现过的事项则在缓存中查看无需更新数据所以就刽显示在列表中(通过计算属性添加进去的才会避免重复）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]

1.  bug合集

[这里是我整理的一些Bug 这次遇到的是bug2 bug3][Bug _bug2 bug3]

1.  异步加载时，组件的标签可以写成单标签`<headnav/>`;但是别记错了！正常的双标签闭合时应该为`<name></name>`!  
    一下为没有脑子犯的错：

>  *  tag has no matching end tag.

1.  让人头大  
    ![在这里插入图片描述][20191121001818944.png]  
    在异步加载的方法二中，先注册组件然后创建vue对象就可以了

> 先注册组件，如果有多个组件则，每用一次组件就有一个相应的实例被创建

### 模块化代码 ###

每次刷新网页时新添加的数据会消失，所以需要写数据缓存

1.  在src目录下新建了storage文件夹，其中新建了一个localStorage.js文件  
    ![在这里插入图片描述][20191119220913529.png]
2.  在里面设置了缓存的 写入，读取，清空和删除操作
3.  暴露这个接口

// 缓存
    let storage = { 
        setStorage(key, value) { 
           localStorage.setItem(key,value);
        },
        getStorage(key) { 
            return JSON.parse(localStorage.getItem(key));
        },
        clearItem(){ 
            localStorage.clear();
        },
        removeItem(key){ 
            localStorage.removeItem(key);
        }
    }
    //暴露
    export default storage;
    // module.exports=storage;

1.  在页面中引入

// 引入外部缓存文件
    import Storage from "./storage/localStorage";

#### 直接（同步）加载 ####

1.  新建了components文件，里面存放一些会被其他页面调用的组件，其中暴漏了接口

<template>
    <div>
        我是网页的底部
    </div>
    </template>
    <script>
    export default{ 
    }
    </script>
    <style lang='less'>
    </style>

1.  在主vue页面中引入

> 注意尽量避免和关键词重名，建议更语义化的命名并且避免使用可能重名的名称如“footer”等

import FootUse from "./components/footer"

1.  在`components`中挂载（同名可以使用简化写法）

components:{ 
        FootUse
      }

1.  在页面中通过标签使用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]

#### 异步加载（局部加载-当前页面） ####

1.  有多少个组件要引入就要写多少个方法

components: { 
        // 异步加载
        FootUse(reslove) { 
          require(["./components/footer"], reslove);
        }
      }

1.  在页面中使用标签

#### 异步加载（全局加载-`main.js`） ####

1.  在main.js中

import Vue from 'vue'
    import App from './App.vue'
    
    //参数含义：组件名称，回调函数
    Vue.component("header-title", (resolve) => { 
      setTimeout(() => { 
        require(['./components/header.vue'], resolve)
      }, 1000);
    });
    new Vue({ 
      el: '#app',
      render: h => h(App)
    })

1.  在页面中直接使用定义的组件名称

<header-title/>

或者

<header-title></header-title>

> 异步加载的好处是，页面初始化加载的时候只会加载需要的那个组件相关的内容，没切换到的那个组件不加载，使页面加载的速度加快。同时，每个组件加载过一次之后切换出再切回来不会重复加载相关内容和重复执行渲染

两者的区别

> 方法一是局部加载，方法二是全局加载（可以在多个页面中调用）

#### 异步加载（局部加载） ####

1.  在app.vue中引入vue

import Vue from "vue";

1.  仍然使用vue.component创建组件

const footnav=Vue.component("footer-title", reslove => { 
      setTimeout(() => { 
        require(["./components/footer"], reslove);
      }, 1000);
    });

1.  在component中声明组件

components: { 
        footnav,
        }

1.  使用组件

#### 动态加载组件 ####

1.  引入外部组件

import FootUse from "./components/footer"

1.  在计算属性中有返回组件的方法，用户需要什么组件就返回什么组件

// 动态加载组件
        addmovecom(){ 
          return FootUse;
        }

1.  在页面中通过component标签加is绑定方法

[20191119221135629.gif]: https://img-blog.csdnimg.cn/20191119221135629.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191116133316190.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191116140557637.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[Link 1]: https://www.cnblogs.com/youhong/p/8964942.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191119202630314.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[Bug _bug2 bug3]: https://blog.csdn.net/qq_42701999/article/details/103058454
[20191121001818944.png]: https://img-blog.csdnimg.cn/20191121001818944.png
[20191119220913529.png]: https://img-blog.csdnimg.cn/20191119220913529.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191120160850434.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70