技术标签: 组件化 前端 vue.js javascript
学习笔记:
总结TodoList案例
1.组件化编码流程:
(1).拆分静态组件:组件要按照功能点拆分,命名不要与htm|元素冲突。
(2).实现动态组件:考虑好数据的存放位置,数据是一个组件在用, 还是一些组件在用: .
1).-个组件在用:放在组件自身即可。
2). -些组件在用:放在他们共同的父组件上(状态提升)。(3).实现交互:从绑定事件开始。
(1).父组件==>子组件通信
(2).子组件==>父组件通信(要求父先给子-一个函数)
3.使用v-model时要切记: v-model绑定的值不能是props传过来的值,因为props是不可以修改的!
运行截图:
全选和取消全选,相应的全选或取消全选后全选按钮作出相应的反应:
增加
删除
清除已经完成的,全部清除后底部消失:
组件结构:
本项目是在vue-cil5,vue2,nanoid环境下运行
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
app.vue
<template>
<div id="app">
<div class="todo-container">
<div class="todo-wrap">
<myHeader :addTodo="addTodo"/>
<myList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
<myFoot :datas="todos" :checkAll="checkAll" :clearAlldone="clearAlldone"/>
</div>
</div>
</div>
</template>
<script>
import myHeader from "./components/myHeader.vue"
import myList from "./components/myList.vue"
import myFoot from "./components/myFoot.vue"
export default {
name: 'App',
data(){
return{
todos:
[{id:"001",title:"睡觉",done:true},
{id:"002",title:"开车",done:false},
{id:"003",title:"吹牛",done:true}]
}
},
methods:{
addTodo(todoObj){
const obj=todoObj;
this.todos.unshift(obj);
},
checkTodo(id){
this.todos.forEach((todo)=>{
if(todo.id==id)
todo.done=!todo.done
})
},
deleteTodo(id){
this.todos=this.todos.filter((todo)=>{
return todo.id!=id
})
},
checkAll(done){
this.todos.forEach((to)=>{
to.done=done
})
},
clearAlldone(){
this.todos=this.todos.filter((a)=>{
return !a.done
})
}
},
components: {
myHeader,
myList,
myFoot
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin-top: 60px;
}
body{
background: #fff;
}
.btn{
display: inline-block;
margin-bottom: 0;
padding: 4px 12px;
font-size: 14px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0,0,0,0.3);
}
.btn-danger{
color: #fff;
background-color:#da4f49;
border:1px solid #ba362f;
}
.btn-danger:hover{
color: #fff;
background-color: #bd362f;
}
.btn:focus{
outline:none;
}
.todo-container{
width: 600px;
margin: 0 auto;
}
.todo-container .todo-wrap{
padding: 10px;
border:1px solid #ddd;
border-radius: 5px;
}
</style>
myHeader.vue
<template>
<div class="todo-header">
<input type="text" placeholder="请输入你的任务名称,按回车生成" @keyup.enter="add" v-model="title"/>
</div>
</template>
<script>
import {nanoid} from "nanoid"
export default{
name:"myHead",
props:["addTodo"],
data(){
return{
title:""
}
},
methods:{
add(){
if(this.title.trim()!=""){
const todoobj={id:nanoid(),title:this.title,done:false}
this.addTodo(todoobj)
this.title=""
}
else{
alert("不能为空啊")
}
}
},
}
</script>
<style scoped>
.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(80,160,231,0.7);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(80,160,231,0.7);
}
</style>
myList
<template>
<ul class="todo-main">
<myItem
v-for="t in todos"
:key="t.id"
:todo="t"
:checkTodo="checkTodo"
:deleteTodo="deleteTodo"/>
</ul>
</template>
<script>
import myItem from "./myItem.vue"
export default {
name:"myList",
components:{
myItem,
},
props:["todos","checkTodo","deleteTodo"]
}
</script>
<style>
.todo-main{
border:1px #bbb solid;
}
</style>
myFoot
<template>
<div class="todo-footer" v-if="total">
<label ><input type="checkbox" v-model="istotal"/>
</label>
<span>
<span>已完成{
{donetotal}}</span>/全部{
{total}}
</span>
<button class="btn btn-dabger" @click="cleardone">清除已完成任务</button>
</div>
</template>
<script>
export default {
name:"myFoot",
props:["datas","checkAll","clearAlldone"],
computed:{
total(){
return this.datas.length
},
donetotal(){
let total=this.datas.filter((t)=>{
return t.done
}).length
return total
},
istotal:{
get(){
return this.total==this.donetotal&&this.total>0 ? true:false;
},
set(value){
this.checkAll(value)
}
}
},
methods:{
cleardone(){
this.clearAlldone()
}
}
}
</script>
<style scoped>
.todo-footer{
position: relative;
}
.todo-footer .btn{
position: absolute;
right: 10px;
top: -5px;
border-radius: 3px;
background-color: #e7064d;
border: 1px #d8235a solid;
color: white;
}
.todo-footer .btn:hover{
transform: scale(1.01);
}
.todo-footer span{
margin-left: 10px;
}
</style>
myItem
<template>
<div class="todo-footer" v-if="total">
<label ><input type="checkbox" v-model="istotal"/>
</label>
<span>
<span>已完成{
{donetotal}}</span>/全部{
{total}}
</span>
<button class="btn btn-dabger" @click="cleardone">清除已完成任务</button>
</div>
</template>
<script>
export default {
name:"myFoot",
props:["datas","checkAll","clearAlldone"],
computed:{
total(){
return this.datas.length
},
donetotal(){
let total=this.datas.filter((t)=>{
return t.done
}).length
return total
},
istotal:{
get(){
return this.total==this.donetotal&&this.total>0 ? true:false;
},
set(value){
this.checkAll(value)
}
}
},
methods:{
cleardone(){
this.clearAlldone()
}
}
}
</script>
<style scoped>
.todo-footer{
position: relative;
}
.todo-footer .btn{
position: absolute;
right: 10px;
top: -5px;
border-radius: 3px;
background-color: #e7064d;
border: 1px #d8235a solid;
color: white;
}
.todo-footer .btn:hover{
transform: scale(1.01);
}
.todo-footer span{
margin-left: 10px;
}
</style>
这给小项目作为vue新手练手组件化开发还是很不错的,这个项目b站上面有尚硅谷的课可以免费看(我只是一名普通的网友啊)
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=70
文章浏览阅读343次。五种原始的变量类型1.Undefined--未定义类型 例:var v;2.String -- ' '或" "3.Boolean4.Number5.Null--空类型 例: var v=null;Number中:NaN -- not a number非数本身是一个数字,但是它和任何数字都不相等,代表非数,它和自己都不相等判断是不是NaN不能用=_curry函数未定义
文章浏览阅读1.2w次,点赞2次,收藏17次。兑换码编码设计当前各个业务系统,只要涉及到产品销售,就离不开大大小小的运营活动需求,其中最普遍的就是兑换码需求,无论是线下活动或者是线上活动,都能起到良好的宣传效果。兑换码:由一系列字符组成,每一个兑换码对应系统中的一组信息,可以是优惠信息(优惠券),也可以是相关奖品信息。在实际的运营活动中,要求兑换码是唯一的,每一个兑换码对应一个优惠信息,而且需求量往往比较大(实际上的需求只有预期_优惠券编码规则
文章浏览阅读45次。C语言程序设计实训教程教学课件作者周林ch04结构化程序设计课件.ppt* * 4.1 选择结构程序设计 4.2 循环结构程序设计 4.3 辅助控制语句 第四章 结构化程序设计 4.1 选择结构程序设计 在现实生活中,需要进行判断和选择的情况是很多的: 如果你在家,我去拜访你 如果考试不及格,要补考 如果遇到红灯,要停车等待 第四章 结构化程序设计 在现实生活中,需要进行判断和选择的情况..._在现实生活中遇到过条件判断的问
文章浏览阅读999次。幻数使用说明 在驱动程序中实现的ioctl函数体内,实际上是有一个switch{case}结构,每一个case对应一个命令码,做出一些相应的操作。怎么实现这些操作,这是每一个程序员自己的事情。 因为设备都是特定的,这里也没法说。关键在于怎样组织命令码,因为在ioctl中命令码是唯一联系用户程序命令和驱动程序支持的途径 。 命令码的组织是有一些讲究的,因为我们一定要做到命令和设备是一一对应的,利_ioctl-number.txt幻数说明
文章浏览阅读399次。键盘按下“Shift+Ctrl+p” 输入: C++Configurations,选择JSON界面做如下改动:1.首先把 “/usr/include”,放在最前2.查看C++路径,终端输入gcc -v -E -x c++ - /usr/include/c++/5 /usr/include/x86_64-linux-gnu/c++/5 /usr/include/c++/5/backward /usr/lib/gcc/x86_64-linux-gnu/5/include /usr/local/_orb-slam3 include 报错
文章浏览阅读129次。本系列的最后一篇,因未有精力写更多的入门教程,上篇已经抛出书单,有兴趣的朋友可阅读好书来成长,此系列主讲有理由爱Sqlserver的论证性文章,希望读者们看完后,可自行做出判断,Sqlserver是否真的合适自己,目的已达成。渴望自动化及使用场景笔者所最能接触到的群体为Excel、PowerBI用户群体,在Excel中,我们知道可以使用VBA、VSTO来给Excel带来自动化操作..._sqlsever 数据分析
文章浏览阅读294次,点赞6次,收藏4次。教育智脑)建立学校的全连接中台,对学校运营过程中的数据进行处理和标准化管理,挖掘数据的价值。能:一、原先孤立的系统聚合到一个统一的平台,实现单点登录,统一身份认证,方便管理;三、数据共享,盘活了教育大数据资源,通过对外提供数。的方式构建教育的通用服务能力平台,支撑教育核心服务能力的沉淀和共享。物联网将学校的各要素(人、机、料、法、环、测)全面互联,数据实时。智慧校园解决方案,赋能教学、管理和服务升级,智慧教育体系,该数据平台具有以下几大功。教育大数据平台底座:教育智脑。教育大数据平台,以中国联通。_高校智慧大脑
文章浏览阅读9.5k次,点赞2次,收藏27次。分治法,动态规划法,贪心算法这三者之间有类似之处,比如都需要将问题划分为一个个子问题,然后通过解决这些子问题来解决最终问题。但其实这三者之间的区别还是蛮大的。贪心是则可看成是链式结构回溯和分支界限为穷举式的搜索,其思想的差异是深度优先和广度优先一:分治算法一、基本概念在计算机科学中,分治法是一种很重要的算法。字面上的解释是“分而治之”,就是把一个复杂的问题分成两_算法概念实例
文章浏览阅读5.6k次。考研篇emmmmm,这是我随笔篇章的第二更,原本计划是在中秋放假期间写好的,但是放假的时候被安排写一下单例模式,做了俩机试题目,还刷了下PAT的东西,emmmmm,最主要的还是因为我浪的很开心,没空出时间来写写东西。 距离我考研结束已经快两年了,距离今年的考研还有90天左右。 趁着这个机会回忆一下青春,这一篇会写的比较有趣,好玩,纯粹是为了记录一下当年考研中发生的有趣的事。 首先介绍..._考研调剂抑郁
文章浏览阅读438次。SpringMVC文章目录SpringMVC1、SpringMVC简介1.1 什么是MVC1.2 什么是SpringMVC1.3 SpringMVC的特点2、HelloWorld2.1 开发环境2.2 创建maven工程a>添加web模块b>打包方式:warc>引入依赖2.3 配置web.xml2.4 创建请求控制器2.5 创建SpringMVC的配置文件2.6 测试Helloworld2.7 总结3、@RequestMapping注解3.1 @RequestMapping注解的功能3._class org.springframework.web.filter.characterencodingfilter is not a jakart
文章浏览阅读4.9k次。gdb 远程调试的一个问题:Don't know how to run. Try "help target".它在抱怨不知道怎么跑,目标是什么. 你需要为它指定target remote 或target extended-remote例如:target extended-remote 192.168.1.136:1234指明target 是某IP的某端口完整示例如下:targ..._don't know how to run. try "help target".
文章浏览阅读85次。习题 11、算法描述主要是用两种基本方法:第一是自然语言描述,第二是使用专用工具进行算法描述2、c 语言程序的结构如下:1、c 语言程序由函数组成,每个程序必须具有一个 main 函数作为程序的主控函数。2、“/*“与“*/“之间的内容构成 c 语言程序的注释部分。3、用预处理命令#include 可以包含有关文件的信息。4、大小写字母在 c 语言中是有区别的。5、除 main 函数和标准库函数以..._c语言语法0x1e