Vue入门练习：小王记事本

项目结构：

|--peoject：|--index.html|--css|--index.css

HTML：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小王记事本</title><link rel="stylesheet" href="./css/index.css">
</head><body><div id="app"><div id="w"><h1>小王记事本</h1><header><input type="text" placeholder="请输入任务:" v-model="inputValue" @keyup.enter="add"></header><section id="main" ><ul><li v-for="(item,index) in list"><div><span>{{ index+1 }}.</span><label>{{ item }}</label><button id="delete" @click="remove(index)">X</button></div></li></ul></section><section id="tail" ><span id="sum" v-show="list.length!=0">{{list.length}} items</span><button id="clear" @click="clear" v-show="list.length!=0">Clear</button></section><footer></footer></div></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {list: ["阿巴阿巴", "abaaba", "hahahaha"],inputValue:""},methods: {add:function(){this.list.push(this.inputValue);},remove:function(index){this.list.splice(index,1);},clear:function(){this.list=[];}}})</script>
</body>
</html>

CSS

*{margin: 0;padding: 0;box-sizing: border-box;
}
#app{width: 500px;margin: 30px auto auto auto;border: 1px  solid #ccc;border-radius: 10px;box-shadow:2px 2px 10px #ccc;
}
#w{width: 450px;margin: auto;
}
h1{margin: 50px auto 10px auto;
}
input,li{width: 100%;height: 70px;border-top: 1px  solid #ccc;border-left: 1px  solid #ccc;border-right: 1px  solid #ccc;border-bottom: 0px  solid #ccc;border-radius: 0px;font-size: 35px;padding: 15px;
}
ul{width: 100%;list-style: none;
}
li{line-height: 70px;color: #777;
}
li div{height: 40px;
}
li span{display: block;width: 40px;height: 40px;line-height: 40px;float: left;
}
li label{float: left;height: 40px;line-height: 40px;align-items: center;margin: 0px;
}
li:hover #delete{display: block;
}
#delete{border: 0px;background-color:inherit;font-size: 30px;color: #ccc;float: right;display: none;
}
#sum{display: inline-block;padding-top: 10px;background-color:inherit;font-size: 20px;color: #ccc;
}
#clear{padding-top: 10px;border: 0px;background-color:inherit;font-size: 20px;color: #ccc;float: right;
}
#tail{border-top: 1px  solid #ccc;height: 50px;
}

参考教程：

https://download.csdn.net/download/qq_43652327/85078515
https://www.bilibili.com/video/BV12J411m7MG?p=23

Vue入门练习：小王记事本相关推荐

编程入门者小王的第一篇博客
我是一名大一新生,来自武汉.由于高考没发挥好,没能成功的进入理想的计算机专业,但由于我对计算机的热情,兴趣,在今天11.17号开始了我的c语言学习道路.希望和大家一起分享,一起进步. 目标:深入学习掌 ...
axios vue 回调函数_Vue 02 —— Vue 入门小案例~使用 Axios 中的GET、POST请求
作为后端攻城狮,写前端代码是一种什么体验? 相信不少人和 @Python大星一样,有写过前端代码的经历. 记录一下,Vue 框架开发中"啼笑皆非"的故事,非专业前端人员,该案例无 ...
VUE入门+5个小案例
本文是我心血来潮学习Vue框架所做的笔记,也供童鞋们学习参考.作为后端的开发人员,学习前端的Vue框架只是单纯地去了解下前端框架的内容,所以并没有深入地去学习,因此本文只适合Vue入门的童鞋哦.由于我 ...
Vue入门之animate过渡动画效果
简介: transition方法的使用 transition内置方法 transition-group animate库实现过渡动画 `<!DOCTYPE html>` `<html ...
前端知识总结汇总！（HTML、CSS、JS、jQuery、vue、微信小程序）
前端知识总结汇总!(HTML.CSS.JS.jQuery.vue.微信小程序) 前端理论考核题 1 / HTML 1.DOCTYPE 的作用是什么?标准模式与兼容模式各有什么区别? !DOCTYPE是 ...
一周Springboot+Vue入门（1）-- 什么是Springboot
1.什么是Springboot 回答这个问题,先看下面这段话 : "为了在Java项目开发中提供一种更为简便的开发方式,来取代繁琐的项目搭建工作,Spring推出了Springboot项目. ...
一周Spring Boot + VUE 入门（2） --VUE
前后端分离目前重要的前端技术是基于VUE技术的框架进行开发. 1.前后端分离的概念 Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用 ...
vue入门（猴子都能学会）
目录一. vue简介 1. Vue.js是什么? 2. 库和框架的区别 3. MVVM的介绍二.Vue入门 1.导入js依赖 2.定义vue所管理边界 3.创建vue实例挂载边界三. Vue事 ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...

Vue入门练习：小王记事本

目录

项目结构：

HTML：

CSS

参考教程：

Vue入门练习：小王记事本相关推荐

最新文章

热门文章