08|理解单文件组件

1.使用Vue.component定义全局组件的缺点

• 强制要求每个component的命名不得重复
• 字符串模板缺乏语法高亮，多行html需要用ES6新增的反引号``
• 不支持CSS模块化
• 没有构建步骤（推荐阮一峰ES6入门）
  使用.vue的单文件组件，还可以用webpack或Browserify等构建工具。

2.使用vue-cli搭建项目

2.1 安装Node.js

使用vue-cli必须先装上前端的服务器Node.js （https://nodejs.org/en/download/）

• 运行node.js安装包，闭着眼睛下一步
• cmd中运行node -v查看Node.js版本

2.2 安装vue-cli

npm命令h会随着Node安装

// 使用以下命令安装vue
npm install -g @vue/cli@3.4.1

// 检查版本是否正确
vue --version

2.3 创建一个工程

vue create vue-demo

选择default preset

2.4 启动项目

npm run serve

3.实例

3.1 main.js

项目入口文件

import Vue from 'vue'
import App from './App.vue'
import TodoItem from './components/TodoItem'   // 导入组件
import TodoList from './components/TodoList'   // 导入组件

Vue.component('todo-list',TodoList)     // 全局注册组件
Vue.component('todo-item',TodoItem)     // 全局注册组件
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

3.2 App.vue

<template>
  <div id="app">
    {{message}} {{message + message}}
    <div :id="message"></div>
    <todo-list>
      <todo-item @delete="handlerDelete" v-for="item in list" :key="item.title" :title="item.title" :del="item.del" slot="item">
        <template v-slot:pre-icon1="{value}">
          <span v-if="value>0.5">{{value}}大于0.5—</span>
          <span v-else>{{value}}小于0.5—</span>
        </template>

        <template v-slot:pre-icon2>
          <span>{{message}}—</span>
        </template>
      </todo-item>
    </todo-list>
  </div>
</template>

<script>
import TodoItem from './components/TodoItem'  // 导入组件
import TodoList from './components/TodoList'

export default {
  name: 'App',
  components: {   // 导入组件
    TodoItem,
    TodoList
  },
  data: function() {  // 用函数返回数据对象
    return {
      message: 'hello world',
      list: [
        {
          title: '课程1',
          del: false
        },
        {
          title: '课程2',
          del: true
        }
      ]
    }
  },
  methods: {
    handlerDelete(val) {
      console.log('handlerDelete', val)
    }
  }
}
</script>

<style>
</style>

3.3 TodoList.vue

<template>
<ul>
    <slot name="item"></slot>
</ul>
</template>

<script>
export default {
    data: function() {
        return {
        }
    }
}
</script>

3.4 TodoItem.vue

<template>
<li>
    <slot name="pre-icon1" :value="value"></slot>
    <slot name="pre-icon2"></slot>
    <span class="red" v-if="del"> {{title}} </span>
    <span class="red" v-else style="text-decoration: line-through"> {{title}} </span>
    <slot name="suf-icon3">—🙂—</slot>
    <button v-show="!del" @click.stop="handlerClick">删除</button>
</li>
</template>

<script>
export default {
    props: {
        title: String,
        del: {
            type: Boolean,
            default: false
        }
    },
    data: function() {
        return {
            value: Math.random()
        }
    },
    methods: {
        handlerClick: function () {
            console.log('点击删除按钮')
            this.$emit('delete', this.title)
        }
    }
}
</script>

// 定义css样式，只改变局部
<style scoped>
    .red {
        color: red;
    }
</style>