Vue.js尚硅谷视频学习笔记(第二章：vue 组件化编码)

编程语言 2019-02-27 20:22:36 阅读次数: 0

内容大部分文字描述来自尚硅谷课件，实例操作截图和注释内容为亲测。

第二章：vue 组件化编码

2.1. 使用vue-cli 创建模板项目

2.1.1. 说明

  1. vue-cli 是vue 官方提供的脚手架工具
  2. github: https://github.com/vuejs/vue-cli
  3. 作用: 从 https://github.com/vuejs-templates 下载模板项目

2.1.2. 创建vue 项目

npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
访问: http://localhost:8080/

注释：

"vue init webpack vue_demo"中的"webpack"为固定的，即使使用webpack作为模板，提供六套模板。"vue_demo"为自起的项目名称，不可以包含大写字母。
官方文档：https://github.com/vuejs/vue-cli/tree/master
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
确认即可
在这里插入图片描述
在这里插入图片描述
听说得下载很久，但是我还是点下载了。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.1.3. 模板项目的结构

在这里插入图片描述

|-- build : webpack 相关的配置文件夹(基本不需要修改)
|-- dev-server.js : 通过express 启动后台服务器
|-- config: webpack 相关的配置文件夹(基本不需要修改)
|-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules
|-- src : 源码文件夹
|-- components: vue 组件及其相关资源文件夹
|-- App.vue: 应用根主组件
|-- main.js: 应用入口js
|-- static: 静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的readme 文件

什么是组件化

组件是包含一个功能界面的所有元素的集合。

参考文档：https://www.kancloud.cn/zep-tsang/components/341917

初始化界面的三个文件

App.vue

<template>
    <div>
        <img class="logo" src="./assets/logo.png" alt="Logo">

        <!-- 3.使用组件标签 -->
        <HelloWorld/>
    </div>
</template>

<script>
//1.引入组件
import HelloWorld from './components/HelloWorld.vue'

export default {
    //映射组件标签
    components : {
        HelloWorld
    }
}
</script>

<style>
    .logo {
        width: 200px;
        height: 200px;
    }
</style>

main.js

/*
    入口JS：创建Vue实例
*/

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el : '#app',
    components: {
        App
    },
    template: '<App/>'
})

HelloWorld.vue

<template>
    <div>
        <p class="msg">{{msg}}</p>
    </div>
</template>

<script>
export default {        //配置对象(与Vue一致)
    data () {   //必须写函数
        return {
            msg : 'Hello Vue Component'
        }
    }
}
</script>

<style>
    .msg {
        color: red;
        font-size: 30px;
    }
</style>

2.2. 项目的打包与发布

2.2.1. 打包:

npm run build

在这里插入图片描述
在这里插入图片描述

2.2.2. 发布1: 使用静态服务器工具包

npm install -g serve
serve dist
访问: http://localhost:5000
在这里插入图片描述
在这里插入图片描述

2.2.3. 发布2: 使用动态web 服务器(tomcat)

修改配置: webpack.prod.conf.js
output: {
publicPath: ‘/xxx/’ //打包文件夹的名称
}
重新打包:
npm run build
修改dist 文件夹为项目名称: xxx
将xxx 拷贝到运行的tomcat 的webapps 目录下
访问: http://localhost:8080/xxx

在这里插入图片描述

2.3. eslint

2.3.1. 说明

  1. ESLint 是一个代码规范检查工具
  2. 它定义了很多特定的规则, 一旦你的代码违背了某一规则, eslint 会作出非常有用的提示
  3. 官网: http://eslint.org/
  4. 基本已替代以前的JSLint

2.3.2. ESLint 提供以下支持

  1. ES
  2. JSX
  3. style 检查
  4. 自定义错误和提示

2.3.3. ESLint 提供以下几种校验

  1. 语法错误校验
  2. 不重要或丢失的标点符号，如分号
  3. 没法运行到的代码块（使用过WebStorm 的童鞋应该了解）
  4. 未被使用的参数提醒
  5. 确保样式的统一规则，如sass 或者less
  6. 检查变量的命名

2.3.4. 规则的错误等级有三种

  1. 0：关闭规则。
  2. 1：打开规则，并且作为一个警告（信息打印黄色字体）
  3. 2：打开规则，并且作为一个错误（信息打印红色字体）

2.3.5. 相关配置文件

  1. .eslintrc.js : 全局规则配置文件
    ‘rules’: {
    ‘no-new’: 1
    }
  2. 在js/vue 文件中修改局部规则
    /* eslint-disable no-new */
    new Vue({
    el: ‘body’,
    components: { App }
    })
  3. .eslintignore: 指令检查忽略的文件
    *.js
    *.vue

注释：
规则不符合会报错，但是不影响代码执行。
使用格式化文档会减少规则报错
在这里插入图片描述
配置：
修改.eslintrc.js文件
在这里插入图片描述
在这里插入图片描述
把认为不需要报错的设置为off或者0，可以0，1，2，根据自身要求。
在这里插入图片描述

2.4. 组件定义与使用

2.4.1. vue 文件的组成(3 个部分)

  1. 模板页面
<template>
页面模板
</template>
  1. JS 模块对象
<script>
	export default {
		data() {return {}},
		methods: {},
		computed: {},
		components: {}
	}
</script>
  1. 样式
<style>
样式定义
</style>

2.4.2. 基本使用

  1. 引入组件
  2. 映射成标签
  3. 使用组件标签
<template>
	<HelloWorld></HelloWorld>
	<hello-world></hello-world>
</template>
<script>
	import HelloWorld from './components/HelloWorld'
		export default {
		components: {
			HelloWorld
		}
	}
</script>

2.4.3. 关于标签名与标签属性名书写问题

  1. 写法一: 一模一样
  2. 写法二: 大写变小写, 并用-连接

2.5. 组件间通信

2.5.1. 组件间通信基本原则

  1. 不要在子组件中直接修改父组件的状态数据
  2. 数据在哪, 更新数据的行为(函数)就应该定义在哪

2.5.2. vue 组件间通信方式

  1. props
  2. vue 的自定义事件
  3. 消息订阅与发布(如: pubsub 库)
  4. slot
  5. vuex(后面单独讲)

2.6. 组件间通信1: props

2.6.1. 使用组件标签时

2.6.2. 定义MyComponent 时

  1. 在组件内声明所有的props
  2. 方式一: 只指定名称
    props: [‘name’, ‘age’, ‘setName’]
  3. 方式二: 指定名称和类型
    props: {
    name: String,
    age: Number,
    setNmae: Function
    }
  4. 方式三: 指定名称/类型/必要性/默认值
    props: {
    name: {type: String, required: true, default:xxx},
    }

2.6.3. 注意

  1. 此方式用于父组件向子组件传递数据
  2. 所有标签属性都会成为组件对象的属性, 模板页面可以直接引用
  3. 问题:
    a. 如果需要向非子后代传递数据必须多层逐层传递
    b. 兄弟组件间也不能直接props 通信, 必须借助父组件才可以

2.7. 组件间通信2: vue 自定义事件

2.7.1. 绑定事件监听

// 方式一: 通过v-on 绑定
@delete_todo="deleteTodo"
// 方式二: 通过$on()
this.$refs.xxx.$on('delete_todo', function (todo) {
this.deleteTodo(todo)
})

2.7.2. 触发事件

// 触发事件(只能在父组件中接收)
this.$emit(eventName, data)

2.7.3. 注意:

  1. 此方式只用于子组件向父组件发送消息(数据)
  2. 问题: 隔代组件或兄弟组件间通信此种方式不合适

2.8. 组件间通信3: 消息订阅与发布(PubSubJS 库)

2.8.1. 订阅消息

PubSub.subscribe(‘msg’, function(msg, data){})

2.8.2. 发布消息

PubSub.publish(‘msg’, data)

2.8.3. 注意

  1. 优点: 此方式可实现任意关系组件间通信(数据)

2.8.4. 事件的2 个重要操作(总结)

  1. 绑定事件监听(订阅消息)
    目标: 标签元素
    事件名(类型): click/focus
    回调函数: function(event){}
  2. 触发事件(发布消息)
    DOM 事件: 用户在浏览器上对应的界面上做对应的操作
    自定义: 编码手动触发

2.9. 组件间通信4: slot

2.9.1. 理解

此方式用于父组件向子组件传递标签数据

2.9.2. 子组件: Child.vue

<template>
	<div>
		<slot name="xxx">不确定的标签结构1</slot>
			<div>组件确定的标签结构</div>
		<slot name="yyy">不确定的标签结构2</slot>
	</div>
</template>

2.9.3. 父组件: Parent.vue

<child>
	<div slot="xxx">xxx 对应的标签结构</div>
	<div slot="yyy">yyyy 对应的标签结构</div>
</child>

2.10. demo1: comment manage

在static下创建comment_page文件夹
comment_page文件夹下三个文件构成静态页面

bootstrap.css，利用到bootstrap技术

index.css

.reply {
  margin-top: 0px;
}

li {
  transition: .5s;
  overflow: hidden;
}

.handle {
  width: 40px;
  border: 1px solid #ccc;
  background: #fff;
  position: absolute;
  right: 10px;
  top: 1px;
  text-align: center;
}

.handle a {
  display: block;
  text-decoration: none;
}

.list-group-item .centence {
  padding: 0px 50px;
}

.user {
  font-size: 22px;
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="./bootstrap.css">
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div id="app">
    <div>
      <header class="site-header jumbotron">
        <div class="container">
          <div class="row">
            <div class="col-xs-12">
              <h1>请发表对React的评论</h1>
            </div>
          </div>
        </div>
      </header>
      <div class="container">
        <div class="col-md-4">
          <form class="form-horizontal">
            <div class="form-group">
              <label>用户名</label>
              <input type="text" class="form-control" placeholder="用户名">
            </div>
            <div class="form-group">
              <label>评论内容</label>
              <textarea class="form-control" rows="6" placeholder="评论内容"></textarea>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default pull-right">提交</button>
              </div>
            </div>
          </form>
        </div>
        <div class="col-md-8">
          <h3 class="reply">评论回复：</h3>
          <h2 style='display: none'>暂无评论，点击左侧添加评论！！！</h2>
          <ul class="list-group">
            <li class="list-group-item">
              <div class="handle">
                <a href="javascript:;">删除</a>
              </div>
              <p class="user"><span>xxx</span><span>说:</span></p>
              <p class="centence">React不错!</p>
            </li>
            <li class="list-group-item">
              <div class="handle">
                <a href="javascript:;">删除</a>
              </div>
              <p class="user"><span>yyy</span><span>说:</span></p>
              <p class="centence">React有点难!</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

在这里插入图片描述
三步：
1.拆，把页面拆成不同部分。
2.静，哪些是静态页面，直接渲染生成。
3.动，动态页面，初始化和动态加载。

在这里插入图片描述
App.vue

<template>
  <div>
    <header class="site-header jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h1>请发表对Vue的评论</h1>
          </div>
        </div>
      </div>
    </header>
    <div class="container">
        <Add :addComment="addComment"/>
        <List :comments="comments" :deleteComment="deleteComment"/>
    </div>
  </div>
</template>

<script>
import Add from './components/Add.vue'
import List from './components/List.vue'
export default {

   data () {
      return {
        comments: [   //数据在哪个组件，更新数据的行为（方法）就应该定义在哪个组件
          {
            name : 'BOB',
            content: 'Vue 还不错'
          },
          {
            name: 'Cat',
            content: 'Vue So Easy'
          },
          {
            name: 'BZ',
            content: 'Vue So So'
          }
        ]
      }
    },

    methods: {
      //添加评论
      addComment(comment) {
        this.comments.unshift(comment)
      },

      //删除指定下标的评论
      deleteComment (index) {
        this.comments.splice(index, 1)
      }
    },

    components: {
        Add,
        List
    }
};
</script>

<style>

</style>

main.js

import  Vue from 'vue'
import App from './App.vue'

new Vue({
    el: '#app',
    components: {App},
    template: '<App/>'
})

components下三个vue文件，本应该是三个文件夹，因为此例没有图片，简化为三个vue文件。

Add.vue

<template>
  <div class="col-md-4">
    <form class="form-horizontal">
      <div class="form-group">
        <label>用户名</label>
        <input type="text" class="form-control" placeholder="用户名" v-model="name" />
      </div>
      <div class="form-group">
        <label>评论内容</label>
        <textarea
          class="form-control"
          rows="6"
          placeholder="评论内容"
          v-model="content"
        ></textarea>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="button" class="btn btn-default pull-right" @click="add">
            提交
          </button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  props: {
    addComment: {
      type: Function,
      required: true
    }
  },

  data () {
    return {
      name: '',
      content: ''
    }
  },
  methods: {
    add () {
      //1.检查输入的合法性
      const name = this.name.trim()
      const content = this.content.trim()
      if(!name || !content) {
        alert('姓名或内容不能空')
        return
      }
      //2.根据输入的数据，封装成一个comment对象
      const comment = {
        name,
        content
      }
      //3.添加到comment中
      this.addComment(comment)

      //4.清除输入
      this.name = ''
      this.content = ''
    }
  }
};
</script>

<style>
</style>

List.vue

<template>
  <div class="col-md-8">
    <h3 class="reply">评论回复：</h3>
    <h2 v-show="comments.length == 0" >暂无评论，点击左侧添加评论！！！</h2>
    <ul class="list-group">
      <Item v-for="(comment, index) in comments" :index="index" :key="index" :comment="comment" :deleteComment="deleteComment"/>
    </ul>
  </div>
</template>

<script>
import Item from './Item.vue'
export default {
  //声明接收属性: 这个属性就会成为组件对象的属性
  props: ['comments','deleteComment'],    //只指定属性名
  components : {
    Item
  }
};
</script>

<style>
.reply {
  margin-top: 0px;
}


</style>

Item.vue

<template>
  <li class="list-group-item">
    <div class="handle">
      <a href="javascript:;" @click="deleteItem" >删除</a>
    </div>
    <p class="user"><span>{{comment.name}}</span><span>说:</span></p>
    <p class="centence">{{comment.content}}</p>
  </li>
</template>

<script>
export default {
    props: {       //指定属性名和属性值的类型
        comment: Object,
        deleteComment: Function,
        index: Number
    },

    methods: {
        deleteItem () {
            const {comment, index, deleteComment} = this
            if(window.confirm(`确定删除${comment.name}的评论吗?`)){
                this.deleteComment(index)
            }
        }
    }
};
</script>

<style>
li {
  transition: 0.5s;
  overflow: hidden;
}

.handle {
  width: 40px;
  border: 1px solid #ccc;
  background: #fff;
  position: absolute;
  right: 10px;
  top: 1px;
  text-align: center;
}

.handle a {
  display: block;
  text-decoration: none;
}

.list-group-item .centence {
  padding: 0px 50px;
}

.user {
  font-size: 22px;
}
</style>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.11. demo2: todo list

在这里插入图片描述
main.js

import  Vue from 'vue'
import App from './App.vue'

import './base.css'

new Vue({
    el: '#app',
    components: {App},
    template: '<App/>'
})

base.css

/*base*/
body {
    background: #fff;
  }
  
  .btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }
  
  .btn-danger {
    color: #fff;
    background-color: #da4f49;
    border: 1px solid #bd362f;
  }
  
  .btn-danger:hover {
    color: #fff;
    background-color: #bd362f;
  }
  
  .btn:focus {
    outline: none;
  }

App.vue

<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <!-- 给TodoHeader标签对象绑定addTodo事件监听 -->
      <!-- <TodoHeader @addTodo="addTodo" /> -->

      <TodoHeader ref="header" />
      <TodoList :todos="todos"/>
      <!-- <TodoFooter
        :todos="todos"
        :deleteCompleteTodos="deleteCompleteTodos"
        :selectAllTodos="selectAllTodos"
      /> -->
      <todo-footer>
        <input type="checkbox" v-model="isAllCheck" slot="checkAll" />
        <span slot="count">已完成{{ completeSize }} / 全部{{ todos.length }}</span>
        <button
          class="btn btn-danger"
          v-show="completeSize"
          @click="deleteAllCompleted"
          slot="delete"
        >
          清除已完成任务
        </button>
      </todo-footer>
    </div>
  </div>
  <!-- 绑定事件监听
触发事件

订阅消息
发布消息 -->
</template>



<script>
import PubSub from 'pubsub-js'
import TodoHeader from "./components/TodoHeader.vue";
import TodoList from "./components/TodoList.vue";
import TodoFooter from "./components/TodoFooter.vue";
import storageUtil from './util/storageUtil.js'


export default {
  mounted() {
    //执行异步代码
    //给<TodoHeader />绑定addTodo事件监听
    this.$refs.header.$on("addTodo", this.addTodo);

    //订阅消息
    PubSub.subscribe('deleteTodo', (msg, index) => {
        this.deleteTodo(index)
    })
  },

  data() {
    return {
      //从localStorage读取todos，深度监视
      // todos: JSON.parse(window.localStorage.getItem("todos_key") || "[]")

      todos: storageUtil.readTodos()
    };
  },

  computed: {
    completeSize() {
      return this.todos.reduce(
        (preTotal, todo) => preTotal + (todo.complete ? 1 : 0),
        0
      );
    },

    isAllCheck: {
      get() {
        return this.completeSize === this.todos.length && this.completeSize > 0;
      },

      set(value) {
        //value 是当前checkbox最新的值
        this.selectAllTodos(value);
      }
    }
  },

  watch: {
    //监视
    todos: {
      deep: true, //深度监视
      // handler: function (newValue, oldValue) { }
      // handler: function(value) {
      //   //将todos最新的值的json数据，保存到localStorage
      //   // window.localStorage.setItem("todos_key", JSON.stringify(value));

      //   storageUtil.saveTodos(value)
      // }

      handler: storageUtil.saveTodos
    }
  },

  components: {
    TodoHeader,
    TodoList,
    TodoFooter
  },

  methods: {
    addTodo(todo) {
      this.todos.unshift(todo);
    },

    deleteTodo(index) {
      this.todos.splice(index, 1);
    },

    //删除所有选中的todo
    deleteCompleteTodos() {
      this.todos = this.todos.filter(todo => !todo.complete);
    },

    //全选/全不选
    selectAllTodos(check) {
      this.todos.forEach(todo => {
        todo.complete = check;
      });
    },

    deleteAllCompleted() {
      if (window.confirm("确定清除已完成的吗?")) {
        this.deleteCompleteTodos();
      }
    }
  }
};
</script>

<style>
/*app*/
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>

storageUtil.js

// 使用localStorage存储数据的工具模块
// 1.函数       ：1个功能
// 2.对象       ：2个功能
// 需要向外暴露1个功能还是多个功能

const TODOS_KEY = "todos_key"
export default {
    saveTodos (todos) {
        window.localStorage.setItem(TODOS_KEY, JSON.stringify(todos));
    },

    readTodos () {

        return JSON.parse(window.localStorage.getItem(TODOS_KEY) || "[]")
    }
}

TodoHeader.vue

<template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="addItem" />
  </div>
</template>

<script>
export default {
    props: {
        
    },
    data () {
        return {
            title: ''
        }
    },

    methods: {
        addItem () {
            //1.检查输入的合法性
            const title = this.title.trim()
            if(!title) {
                alert('必须输入')
                return
            }
            //2.根据输入生成一个todo对象
            const todo = {
                title,
                complete: false
            }
            //3.添加到todos

            // this.addTodo(todo)
            //触发自定义事件:   addTodo
            this.$emit('addTodo', todo)

            //4.清除输入

            this.title = ''
        }
    }
};
</script>

<style>
/*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

</style>

TodoList.vue

<template>
  <ul class="todo-main">
      <TodoItem v-for="(todo, index) in todos" :key="index" :todo="todo" :index="index"/>
  </ul>
</template>

<script>
import TodoItem from './TodoItem.vue'
export default {
    props: {
        todos: Array,
    },

    components: {
        TodoItem
    }
};
</script>

<style>
/*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}

</style>

TodoItem.vue

<template>
  <li @mouseenter="handleEnter(true)" @mouseleave="handleEnter(false)" :style="{background: bgColor}">
    <label>
      <input type="checkbox" v-model="todo.complete" />
      <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-danger" v-show="isShow" @click="deleteItem">删除</button>
  </li>
</template>

<script>
import PubSub from 'pubsub-js'
export default {
    props: {
        todo: Object,
        index: Number
    },

    data () {
        return {
            bgColor: 'white',     //默认的背景颜色
            isShow: false //按钮默认是否显示
        }
    },

    methods: {
        handleEnter(isEnter) {
            if(isEnter) {
                this.bgColor = '#aaaaaa'
                this.isShow = true
            } else {
                this.bgColor = 'white'
                this.isShow = false
            }
        },

        deleteItem () {
            const {todo, index, deleteTodo} = this
            if(window.confirm(`确认删除${todo.title}吗?`)) {
                // deleteTodo(index)

                //发布消息
                PubSub.publish('deleteTodo', index)
            }
        }
    },
};
</script>

<style>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

</style>

TodoFooter.vue

<template>
  <div class="todo-footer">
    <label>
      <!-- <input type="checkbox" v-model="isAllCheck" /> -->
      <slot name="checkAll"></slot>
    </label>
    <span>
      <!-- <span>已完成{{ completeSize }} / 全部{{ todos.length }}</span> -->
      <slot name="count"></slot>
    </span>
    <!-- <button
      class="btn btn-danger"
      v-show="completeSize"
      @click="deleteAllCompleted"
    >
      清除已完成任务
    </button> -->
    <slot name="delete"></slot>
  </div>
</template>

<script>
export default {
//   props: {
//     todos: Array,
//     deleteCompleteTodos: Function,
//     selectAllTodos: Function
//   },

//   computed: {
//     completeSize() {
//       return this.todos.reduce(
//         (preTotal, todo) => preTotal + (todo.complete ? 1 : 0),
//         0
//       );
//     },

//     isAllCheck: {
//       get() {
//         return this.completeSize === this.todos.length && this.completeSize > 0;
//       },

//       set(value) {
//         //value 是当前checkbox最新的值
//         this.selectAllTodos(value);
//       }
//     }
//   },

//   methods: {
//     deleteAllCompleted() {
//       if (window.confirm("确定清除已完成的吗?")) {
//         this.deleteCompleteTodos();
//       }
//     }
//   }
};
</script>

<style>
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
</style>

在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/canxuezhang/article/details/87907106
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022