本文介绍如何使用Vue构建一个Markdown笔记本，包括基础框架搭建、多条笔记管理、新增、编辑、收藏和删除功能。通过v-model实现输入与预览的双向绑定，使用localStorage存储笔记，以及动态处理笔记列表和选中状态。同时，文章还涵盖了时间格式化、字数统计和图标使用等细节。
基础框架1.0
index.html
<html>
<head>
<title>Notebook</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Include the library :VUE+marked -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/marked"></script>
<!-- Notebook app挂载vue实例 -->
<div id="notebook">
<!-- 输入 pane -->
<section class="main">
<textarea v-model="content"></textarea>
</section>
<!-- 预览pane v-html内容可以加载CSS样式 ，注意notePreview是计算属性 -->
<aside class="preview" v-html="notePreview">
</aside>
</div>
<!--生成vue实例，数据视图模型-->
<script src="script.js"></script>
</body>
</html>
script.js（核心）
输入View main
用v-model双向绑定输入content
watch监听content，一旦变化就保存笔记
用localStorage保存笔记，初始化的时候读取
预览View preview
用计算属性notePreview给v-html赋值
计算属性notePreview取决于marked(this.content)
content一变化就重新调用计算属性值
// New VueJS instance
new Vue({
name: 'notebook',
// CSS selector of the root DOM element
el: '#notebook',
data () {
return {
content: localStorage.getItem('content') || 'You can write in **markdown**',
}
},
computed: {
//全写：notePreview: function () {
notePreview () {
// Markdown rendered to HTML
return marked(this.content)
},
},
watch: {
content: {
//content一变就执行handler
handler: 'saveNote',
// immediate: true,
// deep:true,
},
},
methods: {
saveNote (val, oldVal) {
console.log('new note:', val, 'old note:', oldVal)
console.log('saving note:', this.content)
localStorage.setItem('content', this.content)
},
},
})
style.css
分为三部分：基础+布局+解析marked传回的HTML模板样式
*{
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-size: 16px;
height: 100%;
margin: 
最低0.47元/天 解锁文章
扫一扫
577
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
