Vue.js实现备忘录功能


Posted in Javascript onJune 26, 2019

本文实例为大家分享了Vue.js实现备忘录的具体代码,供大家参考,具体内容如下

效果展示:

Vue.js实现备忘录功能

html代码:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <!-- 移动设备设置 -->
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
 <title>记事本</title>
 <link rel="stylesheet" type="text/css" href="css/noteUI.css" >
 <!-- vue核心框架 -->
 <script src="vue/vue.js" type="text/javascript" charset="UTF-8"></script>
 <script src="vue/vue-resource.min.js" type="text/javascript" charset="UTF-8"></script>
 </head>
 <body>
 
 <div id="app">
 <!-- 一般用于头部 -->
 <header>
 <h1>备忘录<span class="right">{{now}}</span></h1>
 </header>
 <section>
 <!-- 多行文本 -->
 <!-- 视图传数据 -->
 <!-- v-model="diary"双向数据绑定 -->
 <textarea v-model="diary" style="width: 100%;height: 200px;" placeholder="写日记是一个好习惯">
 </textarea>
 <!-- @click='finished'绑定methods属性中的方法 -->
 <button @click="finished" class="finish">完成</button>
 </section>
 <ul>
 <!-- 循环遍历data中的noteooks属性B,每次循环都赋值给nb -->
 <!-- v-for="(数组值,数组下标) in noteBooks"-->
 <li v-for="(nb,i) in noteBooks">
  <!--nb.txt类似对象访问-->
  <!-- v-html="nb.txt"绑定html代码 -->
  <p v-html="nb.txt">写日记是一个好习惯</p>
  <div class="btn_ground">
  <button @click="del" type="button" class="del left">删除</button>
  <!-- v-text="nb.time" 绑定文本等价于 {{nb.time}}-->
  <span class="time" v-text="nb.time"></span>
  <button @click="upDate(i)" type="button" class="update right">修改</button>
  </div>
 </li>
 </ul>
 </div>
 <footer>
 版权所有 zk
 </footer>
 <script src="noteBook.js" type="text/javascript" charset="UTF-8"></script>
 
 </body>
</html>

CSS代码:

*{
 margin: 0;
 padding:0;
}
header,#app,footer{
 margin:0 8px;
}
header h1{
 color: #FF4500;
 font-weight: normal;
 font-size: 24px;
 padding-top: 10px;
 padding-bottom: 4px;
 border-bottom: 1px solid #ccc;
 margin-bottom: 4px;
}
 
#app textarea{
 width: 100%;
 height: 200px;
 border: none;
 border-bottom: 1px solid #ccc;
 padding: 8px 4px;
}
button{
 padding: 4px;
 background-color: #fff;
 border: 1px solid #ccc;
 border-radius: 4px;
}
/* position: relative;没有脱离正常流 */
/* relitive相对于自己在流中的元素定位 */
/* relative一般用于位置微调,或者让absolute参考自己定位 */
#app section{
 position: relative;
 
}
.finish{
 position: absolute;
 background-color: limegreen;
 bottom: 8px;
 right: 4px;
}
#app ul{
 margin-top: 8px;
}
#app li{
 border-bottom: 1px solid #CCCCCC;
 margin-bottom: 8px;
}
.left{
 float: left;
}
.right{
 float: right;
}
/* 组合选择器 */
 
header span.right{
 font-size: 14px;
 padding-top:13px;
}
.btn_ground{
 height: 30px;
 margin-top: 4px;
}
.del{
 background-color: orangered;
 color: #FFFFFF;
}
.update{
 background-color: royalblue;
 color: #FFFFFF;
}
footer{
 color: #999;
 text-align: center;
 font-size: 12px;
}

js代码:

function getNowString(){
 var now=new Date()
 var arr=['日','一','二','三','四','五','六']
 
 return now.toLocaleDateString()
  +'星期'
 +arr[now.getDay()]
}
 
var App = new Vue({
 el:'#app',
 data:{
 now:getNowString(),
 noteBooks:[
 {
 time:'2019/6/17 星期一',
 txt:'今天天气不好'
 },{
 time:'2019/6/18 星期二',
 txt:'今天学习<i style="color:red">Adidas'
 }
 ],
 diary:'',
 index:'-1'
 },
 methods:{
 finished:function(){
 //!App.diary是考虑App.diary=null的情况
 if(!App.diary||0==App.diary.length)return
 
 if(-1==App.index){
 //存入noteBooks中
 //unshift插入到数组首位
 App.noteBooks.unshift({
  time:App.now,
  txt:App.diary
 })
 }else{
 //修改
 App.noteBooks[App.index]={
  time:App.now,
  txt:App.diary
 }
 App.index=-1
 }
 App.diary = ''
 App.now=getNowString()
 },
 del:function(i){
 // 删除 splice(起始下标,删除个数)
 App.noteBooks.splice(i,1)
 },
 upDate:function(i){
 var nb=App.noteBooks[i]
 App.diary=nb.txt
 App.now = nb.time
 //App.index 为-1表示新增,其他就是修改
 App.index=i
 }
 }
})

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
js实现简单随机抽奖的方法
Jan 27 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
微信小程序button组件使用详解
Jan 31 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
node.js中npm包管理工具用法分析
Feb 14 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 #Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 #Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 #Javascript
js+html实现周岁年龄计算器
Jun 25 #Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 #Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 #Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 #Javascript
You might like
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
vue实现提示保存后退出的方法
2018/03/15 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
python中from module import * 的一个坑
2014/07/20 Python
python从sqlite读取并显示数据的方法
2015/05/08 Python
python实现的希尔排序算法实例
2015/07/01 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
Java及python正则表达式详解
2017/12/27 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
python删除某个目录文件夹的方法
2020/05/26 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
猫咪家具:CatsPlay
2018/11/03 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
建筑工程专业毕业生自荐信
2013/10/19 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
英文自荐信常用句子
2014/03/26 职场文书
2014年变电站工作总结
2014/12/19 职场文书
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript