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 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
vue 组件开发原理与实现方法详解
Nov 29 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
解析CodeIgniter自定义配置文件
2013/06/18 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
PHP错误处理函数
2016/04/03 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
My Desktop :) 桌面式代码
2008/12/29 Javascript
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
微信小程序实现人脸检测功能
2018/05/25 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
python 生成目录树及显示文件大小的代码
2009/07/23 Python
简单的Python的curses库使用教程
2015/04/11 Python
Python聊天室实例程序分享
2016/01/05 Python
Python 迭代器工具包【推荐】
2016/05/06 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
python通过链接抓取网站详解
2019/11/20 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
中药专业自荐信范文
2014/03/18 职场文书
实习单位鉴定评语
2014/04/26 职场文书
大学班级计划书
2014/04/29 职场文书
人代会标语
2014/06/30 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
单位证明范文
2015/06/18 职场文书
护士旷工检讨书
2015/08/15 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
MySQL 常见存储引擎的优劣
2021/06/02 MySQL