vuex网上记事本的仿写

最新推荐文章于 2020-12-18 17:27:01 发布
最新推荐文章于 2020-12-18 17:27:01 发布
阅读量397 收藏
点赞数
分类专栏： 前端

使用vue-cli初始化一个项目：
vue init webpack note
npm install
看一下文件目录：这里写图片描述
接下来说一下各个文件的主要结构形式与功能：
store文件的形式：

import Vue from 'vue'
import Vuex from 'vuex'

Vue use(Vuex)

const state = {
    //初始的我们需要用到的状态
    }
const getters = {
    //依赖于state的衍生出来的状态
    }
const mutations = {
    //改变状态的方法
    }
const actions = {
    //由mutation衍生出来的方法
    }
//暴漏借口，导出模块
export default new Vuex.store({
    state,
    getters,
    mutations,
    action
    })

组件.vue文件：

<template>
    //dom代码片
</template>
<script>
    expoet default{
        //vue 代码
        }
</script>

APP.vue:

<template>
    组件名
</template>
<script>
//引入组件
import EditNote from './components/editNode'
import ToolBar from './components/toolBar'
import NoteList from './components/noteList'

//暴漏出接口 
export default {
  components: {
    EditNote,
    ToolBar,
    NoteList
  },
  name: 'app'
}

main.js:

//引入store文件
import store from './vuex/store'

new Vue ({
    el:'#app',
    //将store引入实例里
    store,
    ...
    })

下面是全部的代码，选择性观看。。。
代码：
editNode.vue

<template>
  <div class="text-wrapper">
      <button @click="saveNote">save</button>
      <textarea class="text-input" @input="saveText" :value="text"></textarea>
  </div>
</template>
<script>
export default {
  data () {
    return {
      textInput: ''
    }
  },
  computed: {
    text () {
      this.textInput = this.$store.getters.activeNote.text
      if (this.$store.getters.activeNote.text === undefined) {
        return ''
      } else {
        return this.$store.getters.activeNote.text
      }
    }
  },
  methods: {
    saveText (e) {
    //   console.log(e.target.value)
      this.textInput = e.target.value
    //   console.log(this.textInput)
    },
    saveNote () {
      if (this.textInput) {
        this.$store.dispatch('edit_note', this.textInput)
      }
    }
  }
}
</script>
<style>
.text-wrapper{
    width:100%;
}
.text-input{
    width:100%;
    height:80%;
    border:none;
    outline:none;
    padding:20px;
    font-size:15px;
}
button {
    width:100%;
    background-color: darksalmon;
    color:white;
    border:none;
    outline: none;
}
</style>

noteList.vue:

<template>
  <div class="note-list">
      <h3>记事本</h3>
      <div class="list-wrapper">
          <div class="tab">
              <div :class="{active:showAll==true}" @click="showAllNotes">All Notes</div>
              <div :class="{active:showAll==false}" @click="showFavornotes">Favorites</div>
          </div>
          <ul class="show-all" v-if="showAll">
              <li v-for="item in favornotes" :key="11" :class="{activeNote:item==activeNote}" @click="clickNote(item)">
                  {{item.text}}
              </li>
          </ul>
          <ul class="favorites" v-else>
              <li v-for="item in favornotes" :key="22" class="note" :class="{activeNote:item==activeNote}" @click="clickNote(item)">
                  {{item.text}}
              </li>
          </ul>
      </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      showAll: true
    }
  },
  computed: {
    notes () {
      return this.$store.getters.notes
    },
    favornotes () {
      return this.$store.getters.notes.filter(note => {
        return note.favor
      })
    },
    activeNote () {
      return this.$store.getters.activeNote
    }
  },
  methods: {
    showAllNotes: function () {
      this.showAll = true
    },
    showFavornotes: function () {
      this.showAll = false
    },
    clickNote: function (item) {
      this.$store.dispath('set_activenote', item)
    }
  }
}
</script>

<style>
.note-list{
    width:300p x;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: whitesmoke;
}
.list-wraper{
    display: flex;
    flex-direction: column;
    align-content:center;
}
.tab{
    margin:0 auto;
    margin-bottom:10px;
}
.tab div{
    cursor: pointer;
    display:inline-block;
    border:1px solid #ddd;
    border-radius: 1px;
    padding:2px 14px;
}
.active{
    background-color: darksalmon;
    color: white;
}
.show-all, .favorites{
    width:300px;
    margin: 0;
    padding: 0;
}
.show-all li, .favorites li{
    overflow: hidden;
    word-wrap: break-word;
    height: 50px;
    margin:0;
    list-style: none;
    border-bottom: 1px solid #ddd;
    padding: 5px 10px;
}
.activeNote{
    background-color:blanchedalmond;
}

</style>

toolBar.vue:

<template>
  <div class="note-list">
      <h3>记事本</h3>
      <div class="list-wrapper">
          <div class="tab">
              <div :class="{active:showAll==true}" @click="showAllNotes">All Notes</div>
              <div :class="{active:showAll==false}" @click="showFavornotes">Favorites</div>
          </div>
          <ul class="show-all" v-if="showAll">
              <li v-for="item in favornotes" :key="11" :class="{activeNote:item==activeNote}" @click="clickNote(item)">
                  {{item.text}}
              </li>
          </ul>
          <ul class="favorites" v-else>
              <li v-for="item in favornotes" :key="22" class="note" :class="{activeNote:item==activeNote}" @click="clickNote(item)">
                  {{item.text}}
              </li>
          </ul>
      </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      showAll: true
    }
  },
  computed: {
    notes () {
      return this.$store.getters.notes
    },
    favornotes () {
      return this.$store.getters.notes.filter(note => {
        return note.favor
      })
    },
    activeNote () {
      return this.$store.getters.activeNote
    }
  },
  methods: {
    showAllNotes: function () {
      this.showAll = true
    },
    showFavornotes: function () {
      this.showAll = false
    },
    clickNote: function (item) {
      this.$store.dispath('set_activenote', item)
    }
  }
}
</script>

<style>
.note-list{
    width:300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: whitesmoke;
}
.list-wraper{
    display: flex;
    flex-direction: column;
    align-content:center;
}
.tab{
    margin:0 auto;
    margin-bottom:10px;
}
.tab div{
    cursor: pointer;
    display:inline-block;
    border:1px solid #ddd;
    border-radius: 1px;
    padding:2px 14px;
}
.active{
    background-color: darksalmon;
    color: white;
}
.show-all, .favorites{
    width:300px;
    margin: 0;
    padding: 0;
}
.show-all li, .favorites li{
    overflow: hidden;
    word-wrap: break-word;
    height: 50px;
    margin:0;
    list-style: none;
    border-bottom: 1px solid #ddd;
    padding: 5px 10px;
}
.activeNote{
    background-color:blanchedalmond;
}

</style>

store.js:

<template>
  <div class="note-list">
      <h3>记事本</h3>
      <div class="list-wrapper">
          <div class="tab">
              <div :class="{active:showAll==true}" @click="showAllNotes">All Notes</div>
              <div :class="{active:showAll==false}" @click="showFavornotes">Favorites</div>
          </div>
          <ul class="show-all" v-if="showAll">
              <li v-for="item in favornotes" :key="11" :class="{activeNote:item==activeNote}" @click="clickNote(item)">
                  {{item.text}}
              </li>
          </ul>
          <ul class="favorites" v-else>
              <li v-for="item in favornotes" :key="22" class="note" :class="{activeNote:item==activeNote}" @click="clickNote(item)">
                  {{item.text}}
              </li>
          </ul>
      </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      showAll: true
    }
  },
  computed: {
    notes () {
      return this.$store.getters.notes
    },
    favornotes () {
      return this.$store.getters.notes.filter(note => {
        return note.favor
      })
    },
    activeNote () {
      return this.$store.getters.activeNote
    }
  },
  methods: {
    showAllNotes: function () {
      this.showAll = true
    },
    showFavornotes: function () {
      this.showAll = false
    },
    clickNote: function (item) {
      this.$store.dispath('set_activenote', item)
    }
  }
}
</script>

<style>
.note-list{
    width:300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: whitesmoke;
}
.list-wraper{
    display: flex;
    flex-direction: column;
    align-content:center;
}
.tab{
    margin:0 auto;
    margin-bottom:10px;
}
.tab div{
    cursor: pointer;
    display:inline-block;
    border:1px solid #ddd;
    border-radius: 1px;
    padding:2px 14px;
}
.active{
    background-color: darksalmon;
    color: white;
}
.show-all, .favorites{
    width:300px;
    margin: 0;
    padding: 0;
}
.show-all li, .favorites li{
    overflow: hidden;
    word-wrap: break-word;
    height: 50px;
    margin:0;
    list-style: none;
    border-bottom: 1px solid #ddd;
    padding: 5px 10px;
}
.activeNote{
    background-color:blanchedalmond;
}

</style>

app.vue:

<template>
  <div class="note-list">
      <h3>记事本</h3>
      <div class="list-wrapper">
          <div class="tab">
              <div :class="{active:showAll==true}" @click="showAllNotes">All Notes</div>
              <div :class="{active:showAll==false}" @click="showFavornotes">Favorites</div>
          </div>
          <ul class="show-all" v-if="showAll">
              <li v-for="item in favornotes" :key="11" :class="{activeNote:item==activeNote}" @click="clickNote(item)">
                  {{item.text}}
              </li>
          </ul>
          <ul class="favorites" v-else>
              <li v-for="item in favornotes" :key="22" class="note" :class="{activeNote:item==activeNote}" @click="clickNote(item)">
                  {{item.text}}
              </li>
          </ul>
      </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      showAll: true
    }
  },
  computed: {
    notes () {
      return this.$store.getters.notes
    },
    favornotes () {
      return this.$store.getters.notes.filter(note => {
        return note.favor
      })
    },
    activeNote () {
      return this.$store.getters.activeNote
    }
  },
  methods: {
    showAllNotes: function () {
      this.showAll = true
    },
    showFavornotes: function () {
      this.showAll = false
    },
    clickNote: function (item) {
      this.$store.dispath('set_activenote', item)
    }
  }
}
</script>

<style>
.note-list{
    width:300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: whitesmoke;
}
.list-wraper{
    display: flex;
    flex-direction: column;
    align-content:center;
}
.tab{
    margin:0 auto;
    margin-bottom:10px;
}
.tab div{
    cursor: pointer;
    display:inline-block;
    border:1px solid #ddd;
    border-radius: 1px;
    padding:2px 14px;
}
.active{
    background-color: darksalmon;
    color: white;
}
.show-all, .favorites{
    width:300px;
    margin: 0;
    padding: 0;
}
.show-all li, .favorites li{
    overflow: hidden;
    word-wrap: break-word;
    height: 50px;
    margin:0;
    list-style: none;
    border-bottom: 1px solid #ddd;
    padding: 5px 10px;
}
.activeNote{
    background-color:blanchedalmond;
}

</style>

main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  template: '<App/>',
  components: { App }
})
lijixuanA
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cil+vuex 构建一个简单的记事本应用
cc_fys的博客
07-18 1468
学习vuex文档稍微了解了一下vuex，这个练习用于应用一下vuex。构建一个简单的单页笔记本应用，加深对vuex的理解。 Demo：https://ccessl.github.io/test/ 实现效果：     安装npm和vue-cli这里就略过了，首先创建一个webpack模板项目 在命令提示符终端输入： npm init webpack 之后输入项目名称、描述等信息。因...
c# 仿写记事本
03-16
在本实验中，我们将探讨如何使用C#进行Windows桌面应用程序开发，具体目标是仿写一个基本的记事本程序。这个任务旨在帮助初学者掌握Windows编程的基础知识，包括文件操作、文本编辑、格式设置以及用户界面设计。 1....
模拟有道云笔记
A199445的博客
03-02 858
package action; import java.io.FileWriter; import org.apache.struts2.ServletActionContext; import beans.User; import com.opensymphony.xwork2.ActionSupport; import dao.UserDAO; public class Andro
vue本地存储_手摸手Electron + Vue实战教程（四）
weixin_39598094的博客
11-20 430
系列文章：手摸手Electron + Vue实战教程（一）手摸手Electron + Vue实战教程（二）手摸手Electron + Vue实战教程（三）截止上一篇我们已经基本全部完成了静态页部分了，今天我们要开始玩玩数据了。。1 数据持久化存储的必要性electron应用说到底是个桌面级应用，我们写好的 Markdown 文档，毋庸置疑的必须要保存下来吧，否则一旦重启应用，那我们辛辛苦苦写的文档...
Vue高仿饿了吗学习笔记
兔子juan的博客
08-01 1828
VUE高仿饿了么app 本项目github地址：https://github.com/motysla/eleme.git VUE 搭建简介 刚学习了VUE高仿饿了么app课,记录课的要点,巩固知识。 VUE 优势 Vue.js 是一个用于创建 web 交互界面的。其特点是 简洁 HTML 模板...
vue仿去哪儿网实践笔记
曹乐乐的博客
03-29 704
用git建立仓库和本地的联系 1、安装vue脚手架 cnpm install vue-cli -g 2、使用vue-cli初始化项目 vue init webpack my-project 3.安装项目依赖 cnpm i 4.查看初始化的项目 npm run dev 可以在config.js里修改是否自动打开浏览器 5.npm run build 生成本地打包文件，后在本地打开问题 6.目录介...
Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例
qq_36573925的博客
01-28 1282
Vue UI组件  element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 iview ★5801 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★5517 - Vue 2的移动UI元素 vue-material ★2790 - 通过Vue Mater
前端 vue源码-小黑记事本.rar
07-22
在这个“小黑记事本”的项目中，我们看到作者运用了Vue的核心概念来创建一个简单的应用，这对我们深入理解Vue的使用和源码有很大帮助。 首先，让我们来看看Vue中的核心概念： 1. **数据绑定（Data Binding）**：...
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
10-19
本篇文章主要介绍了详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
记事本源码vuex本地
05-23
"记事本源码vuex本地"这个标题表明我们即将探讨一个使用Vuex构建的记事本应用程序，它能够将数据存储在用户的本地浏览器中。这通常涉及到前端开发中的状态管理和本地存储技术。 首先，让我们深入了解Vuex。Vuex是一...
使用VUE仿写【E宠商城】踩坑点
hzxOnlineOk的博客
11-06 1249
使用VUE仿写【E宠商城】踩坑点 1、无论是否是否写了！important 父元素的规则 都是被子元素继承的 继承的样式优先级小 所以这边的字体大小还是保留reset那边的样式！！！ 2、canvas的宽度必须设在标签中，不能设在样式中，否则会被默认拉伸（也不能canvas.style.width去设置！！！） 3、transform: translateX(-34p
使用 vue 仿写的一个购物商城
Zh_qq228672130的博客
12-18 3821
在学习了 vue 之后，决定做一个小练习，仿写了一个有关购物商城的小项目。下面就对项目做一个简单的介绍。 项目的目录结构 -assets 与项目有关的静态资源，包括 css，以及一些 images -common 公共的工具类方法 -components 公共组件 -common 与项目耦合度较低的组件 -content 与项目耦合度较高的
udp分片报文pcap文件
07-18
udp分片报文pcap文件：64kudp大包分成每片658字节总计100片
计算机教学导案.doc
07-18
计算机
摩根：2024年大市前瞻.pdf
最新发布
07-18
摩根：2024年大市前瞻
计算机控制专业技术专题实习任务书温度控制.doc
07-18
计算机
计算机控制系统.doc
07-18
计算机
使用vuex实现记事本
12-25
使用vuex实现记事本可以实现数据的集中管理和状态的共享。下面是一个使用vuex实现记事本的示例： 1. 首先，在项目中安装vuex： ```shell npm install vuex --save ``` 2. 创建一个store.js文件，用于定义vuex的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值