Javascript

vue_记事本

本文主要是介绍vue_记事本，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

开发

HTML + CSS + Vuejs基于数据的开发模式

以前开发是基于DOM的开发模式，本案例中基于数据的开发模式

  • 列表结构通过 v-for 指令结合数据生成
  • v-on 结合实践修饰符对事件进行限制，比如.enter
  • v-on 在绑定事件时可以传递自定义参数
  • 通过 v-model 可以快速的设置和获取表单元素的值
  • 基于数据的开发模式

预览

功能

新增

  1. 生成列表结构【v-for数组】
  2. 获取用户输入【v-model】
  3. 回车，新增数据【v-on .enter添加数据】

删除

  1. 点击删除指定内容（v-on splice 根据索引删除指定元素）
  2. 数据改变和数据绑定的元素同步改变
  3. 事件的自定义参数

统计

  1. 统计信息个数（v-text 长度）
  2. list.length

清空

  1. 点击清除所有信息（v-on 清空数组）
  2. this.list=[];即可实现

隐藏

  1. 没有数据时，隐藏元素（v-show v-if）
  2. 使用 v-if 作用于

源码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html" charset="UTF-8" />
  <title>记事本</title>
  <meta name="robots" content="noindex,nofollow" />
  <meta name="googlebot" content="noindex,nofollow" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link rel="stylesheet" type="text/css" href="./css/index.css">

</head>

<body>
<!--主体区域-->
<h1 class="biaoti">notepad记事本</h1>
<section id="todoapp">
  <!--输入框-->
  <header class="header">
    <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="输入任务"
           class="new-todo">
  </header>
  <!--列表区域-->
  <section class="main">
    <ul class="todo-list">
      <li class="todo" v-for="(item,index) in list">
        <div class="view">
          <span class="index">{{index+1}}.</span>
          <label>{{item}}</label>
          <button class="destroy" @click="remvoe (index)">删除</button>
        </div>
      </li>
    </ul>
  </section>
  <!--统计清空-->
  <footer class="footer">
    <div>
      <span class="left" v-if="list.length!=0"><strong>{{list.length}}</strong>&nbsp items </span>
      <span class="right" @click="clear" v-show="list.length!=0"><button>Clear</button></span>
    </div>
  </footer>
</section>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: "#todoapp",
    data: {
      list: ["今日任务1", "今日任务2", "今日任务3"],
      inputValue: "哈哈小恶习"
    },
    methods: {
      add: function () {
        this.list.push(this.inputValue)
      },
      remvoe: function (index) {
        this.list.splice(index, 1)
      },
      clear: function () {
        this.list = [];
      }

    },

  })
</script>

</html>

index.css

* {
    padding: 0;
    margin: 0;
}

#todoapp {
    width: 300px;
    margin: 5px auto;
    box-shadow: 0px 3px 10px 2px rgba(0,0,0,.1);

}

.biaoti {
    font:normal 200 34px '微软雅黑' ;
    color:  rgb(219, 82, 82);
    text-align: center;
    padding-top:100px ;
    padding-bottom: 10px;
}
.new-todo{
    width: 100%;
    height: 40px;
    padding-left:10px;
    color: rgb(88, 88, 88);
    box-sizing:border-box;
    border: 1px solid rgb(236, 236, 236);/*这里之前宽写成100%就出现对不齐的问题*/
}
.new-todo:focus{
    outline: none;
}
.footer{
    position: relative;
    width:100%;
    height: 40px;
    box-sizing:border-box; /*border-box你想要设置的边框和内边距的值是包含在width内的.不包含margin*/
    border: 1px solid rgb(236, 236, 236);
    background-color: white;

}

.footer span{
    font-size: 12px;
    color: rgb(131, 131, 131);
    float: left;
    line-height: 40px;
}
.left{
    margin-left: 10px;
}
.right{
    margin-left: 170px;
}
.todo{
    list-style: none;
    font-size: 14px;
    font-family: '微软雅黑';
    color: rgb(88, 88, 88);
    box-sizing:border-box;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border: 1px solid rgb(236, 236, 236);
    background-color: white;
}
.view{
    position: relative;
    margin-left:10px ;
}

.view label{
    width: 200px;
    height: 40px;
    position: absolute;
    overflow: hidden;  /* 超出的文本隐藏*/
    text-overflow: ellipsis;   /* 溢出用省略号显示*/
    white-space:nowrap;   /* 溢出不换行*/
}
.destroy{
    position: absolute;
    right: 10px;
    top:9px;
    font-size: 12px;
    font-family: '微软雅黑';
    outline:none;
    border: 1px solid rgb(236, 236, 236);
    color: rgb(255, 111, 111);
    display: none;
}
.view:hover .destroy{         /*这里的.destroy和前面的要有空格，不然奏效*/
    display: block;
}
.left strong{
    font-weight: 400;
}
.footer button{
    position: absolute;
    right: 10px;
    top: 9px;
    background-color: white;
    border: 0px;
    outline:none;/*去掉选中按钮是边框的颜色*/
    font-size: 12px;
    font-family: '微软雅黑';
    color: rgb(131, 131, 131);
}
这篇关于vue_记事本的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航