1.5 理解单文件组件

一、原项目使用Vue的缺点

1. 缺点：

   1. 全局定义：模板参数必须全局唯一

   2. 字符串模板：缺乏语法高亮

   3. 不支持CSS模块化

   4. 没有构建步骤

2. ES6学习建议：阮一峰：es6.ruanyifeng.com

二、使用Vue Cli构建项目

1. 安装Node.js

2. 安装Vue Cli

   npm install -g @vue/cli

3. 查看安装的版本

   vue --version

   备注：Windows的powerShell默认阻止了node脚本运行，因此，运行版本查看脚本会报错，解决办法：管理员模式运行powerShell，运行set-ExecutionPolicy RemoteSigned， 然后输入A全部即可

4. 创建简单项目

   vue create vue-demo

   1. 安装过程中会有一些默认选项，这里进行介绍

      1. 选择使用的Vue版本(我选择Vue2)

         

      2. 选择后，便开始安装，出现如下内容后，安装完成

         

三、将todolist改造成单文件组件

1. 目录结构

   

2. 改造todoList

   // 新建TodoList.vue文件
   <template>
        <ul>
           <slot></slot>
       </ul>
   </template>
   
   <script>
   export default {
       data: function() {
           return {
   
           }
       }
   }
   </script>
   
   
   // 新建TodoItem.vue文件
   <template>
       <li>
           <slot name="pre-icon">这是默认值</slot>
           <span v-if="!del">{{title}}</span>
           <span v-else style="text-decoration: line-through;">{{title}}</span>
           <slot name="suf-icon" :value="val"></slot>
           <button v-show="!del" @click.stop=handleClick>删除</button>
       </li>
   </template>
   
   <script>
   export default {
       // 属性声明
       props: {
           title: String,  // 直接定义类型，没有默认值
           del: {
               type: Boolean,  // 定义类型
               default: false  // 默认值
           },
       },
       // 绑定对象 
       data: function() {
           return {
               val: Math.random()
           }
       },
       // 方法
       methods: {
           handleClick() {
               console.log("点击了删除按钮")
               // 向外抛出事件，以及丢出参数
               this.$emit('remove-delete', this.title)
           }
       }
   }
   </script>
   
   
   // 修改App.vue文件
   // 页面替换
   <template>
     <div id="app">
       <div v-bind:id="message"></div>
         <todo-list>
             <todo-item @remove-delete="handleDelete" v-for="item in list" :key="item.title" :title="item.title" :del="item.del">
                 <!-- <span slot="pre-icon">前置图标</span>
                 <span slot="suf-icon">后置图标</span> -->
                 <!-- <template v-slot:pre-icon>
                     <span>前置图标</span>
                 </template> -->
                 <template v-slot:suf-icon ="{value}">
                     <span>后置图标{{value}}</span>
                 </template>
             </todo-item>
         </todo-list>
     </div>
   </template>
   
   // 导包引入：
   import TodoItem from './components/TodoItem.vue'
   import TodoList from './components/TodoList.vue'
   
   // 注册到本服务中
    components: {
       TodoItem,
       TodoList
     },
   
   // 数据以及其他函数
    data() {
       return {
         message: 'LonelySnow',
         list: [{
           title: '课程1',
           del: false,
         },{
           title: '课程2',
           del: true,
         }]
       }
     },
     methods: {
       handleDelete(val) {
         console.log('handleDelete', val)
       }
     }

   备注：

   1. 导入的组件文件，需要在components中导入，不然不会生效

   2. 数据的data需要用函数形式返回，因为穿件的vue文件也是组件

   3. 循环内容中，文件需要加入:key=进行绑定，不然会报错

   4. 可以进行单页面的css设置，可以有效防止污染<style scoped></style>

   5. 如果想要设置全局组件，则需要在main.js中进行导入