vue学习之热更新、单文件开发、插槽、作用域插槽

vue-cli

全局安装：-g，全局安装 vue-cli
npm install -g @vuecli

创建项目

vue create my-app

生成的文件结构：

• node-modules: 存放依赖
• src：源代码文件夹
• src- components：存放组件的位置

将上一篇中我们html的文件内容移植到使用vue-cli创建的my-app项目中

完整代码，替换App.vue中的代码

组件定义

使用单文件定义组件TodoItem
在src- components下新建文件：TodoItem.vue，内容如下：

和我们在html中的写法区别不大

组件引用

import TodoItem from './components/TodoItem.vue';
组件使用：
这里必须绑定一个key，这个key就是这个li标签的key，应该不能重复的，这里为了简单，使用遍历的数据item

插槽 slot

假设要给组件中定义样式，我们要让显示的字体大小是30px

• 修改组件代码

• 修改使用部分

v-slot:value绑定插槽属性
插值表达式：{{}} 用来显示item的值

作用域插槽

通过子组件传递出来一种状态，给父组件使用，通过传递出来的状态，进一步使用，非常灵活
需求：添加可选框，未选时是蓝色，选中时，是红色

组件修改部分：

    
    


export default {
    props: ['value'],
    data() {
        return {
            checked: false
        }
    }
}

在input上进行属性绑定，在js部分，定义属性初始值为false；
子组件在插槽部分，绑定对象 {} , 将checked 属性封装进去，传递给父组件

父组件修改部分：

父组件的样式部分也修改为对象：:style=""
插槽部分接收子组件传递的对象，命名为：itemProps
在样式部分使用三目表达式，如果itemProps中的checked为true显示红色，为false，显示蓝色，即可达到为选中显示蓝色，选中显示红色

作用域样式 scoped

在子组件的样式部分，我们的样式是全局的，使用 scoped 可以将样式定义为局部的，如果在别的地方也定义了名字为 item的样式，则不会被覆盖
这是全局状态的样式：

这是局部样式

样式修改代码如下：