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中的代码

<template>
  <div id = "app">{{msg}}
      <div>
          <input type="text" v-model="info">
          <button @click="handleClick">添加</button>
      </div>
      <ul>
          <!-- <li v-for="item in list">{{item}}</li> -->
          <todo-item v-for="item in list" :key="item" :value="item"></todo-item>
      </ul>
  </div>
</template>

<script>
import TodoItem from './components/TodoItem.vue';

export default {
  name: 'App',
  components: {
    TodoItem
  },
  data() {
    return {
      msg: "hello geek!",
      info: '',
      list: []
    }
  },
  methods: {
    handleClick() {
        if (this.info != '') {
            this.list.push(this.info)
            this.info = ''
        }
    }
  }
}
</script>

<style>

</style>

组件定义

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

<template>
    <li class="item">{{value}}</li>
</template>

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

<style>
.item {
    color: red
}
</style>

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

组件引用

import TodoItem from './components/TodoItem.vue';
组件使用：<todo-item v-for="item in list" :key="item" :value="item"></todo-item>
这里必须绑定一个key，这个key就是这个li标签的key，应该不能重复的，这里为了简单，使用遍历的数据item

插槽 slot

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

• 修改组件代码

<li class="item">
    <slot name="value"></slot>
</li>

• 修改使用部分

<todo-item v-for="item in list" :key="item">
   <template v-slot:value>
     <span style="font-size: 30px">{{ item }}</span>
   </template>
 </todo-item>

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

作用域插槽

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

组件修改部分：

<li class="item">
    <input type="checkbox" v-model="checked">
    <slot name="value" v-bind="{checked}"></slot>
</li>

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

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

父组件修改部分：

<todo-item v-for="item in list" :key="item">
   <template v-slot:value="itemProps">
     <span :style="{fontSize: '30px', color: itemProps.checked ? 'red' : 'blue'}">{{ item }}</span>
   </template>
 </todo-item>

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

作用域样式 scoped

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

这是局部样式

样式修改代码如下：

<style scoped>
.item {
    color: red
}
</style>