VUE基础之scoped和TodList

目录

scoped样式

总结TodoList案例


scoped样式

  1. 作用:让样式在局部生效,防止冲突。

  2. 写法:<style scoped>

    复制代码
    <style scoped>
    .demo{
        background-color: pink;
    }
    </style>

    注:如果在APP.vue中写style代码则是所有组件都会用到,但如果加了scoped则只会在app.vue中有效果,所以在写代码的时候一般不会给App.vue添加scoped

    style还可以编译less例如

    less最大的特点就是可以嵌套写,代码如下

    复制代码
    <style lang="less">
    .demo{
        background-color: pink;
        .font{
            font-size: 30px;
        }
    }
    </style>

    注:要先安装less-loader。安装前先确认你的webpack的版本,如果版本是5以前的需要安装less-loader7版

    复制代码
    安装:
    npm i less-loader

总结TodoList案例

  1. 组件化编码流程:

    (1).拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突。

    (2).实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:

    1).一个组件在用:放在组件自身即可。

    2). 一些组件在用:放在他们共同的父组件上(状态提升)。

    (3).实现交互:从绑定事件开始。

  2. props适用于:

    (1).父组件 ==> 子组件 通信

    (2).子组件 ==> 父组件 通信(要求父先给子一个函数)

  3. 使用v-model时要切记:v-model绑定的值不能是props传过来的值,因为props是不可以修改的!

  4. 如果要给孙子辈传递数据要先给儿子辈传递,再给孙辈传递

  5. nanoid是一个可以帮你自动生成id的一个模块

    安装:

    复制代码
    npm i nanoid

    调用:

    复制代码
    import {nanoid} from 'nanoid'
  6. props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做。

相关推荐
前端小巷子10 分钟前
CSS单位完全指南
前端·css
SunTecTec1 小时前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
拉不动的猪2 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程2 小时前
ES练习册
java·前端·elasticsearch
Asthenia04122 小时前
Netty编解码器详解与实战
前端
袁煦丞2 小时前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
一个专注写代码的程序媛3 小时前
vue组件间通信
前端·javascript·vue.js
一笑code4 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员4 小时前
layui时间范围
前端·javascript·layui
NoneCoder4 小时前
HTML响应式网页设计与跨平台适配
前端·html