本文实例为大家分享了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;
