美文网首页
[vue3快速入门] 8.用vue写一个小dome项目

[vue3快速入门] 8.用vue写一个小dome项目

作者: 林哥学前端 | 来源:发表于2021-09-12 00:13 被阅读0次

    这节课我们运用现在已经学的这些vue知识做一个实践,做一个“超级英雄备案管理系统”,看名字好像很复杂,其实很简单,用现有的知识很少代码就可以搞定了。
    首先,我们用vue cli创建一个新项目,叫heroes

    vue create heroes
    

    创建完以后,项目里会有vue相关介绍的自带内容,我们把用不着的都删掉,保持项目的整洁,保持一点点洁癖。打开src文件夹,删掉目前不用的文件


    打开App.vue文件,把不用的代码删掉

    <template>
      <img alt="Vue logo" src="./assets/logo.png">  // 删除
      <HelloWorld msg="Welcome to Your Vue.js App"/>  // 删除
    </template>
    
    <script>
    import HelloWorld from './components/HelloWorld.vue'  // 删除
    
    export default {
      name: 'App',
      components: {  // 删除
        HelloWorld  // 删除
      }  // 删除
    }
    </script>
    
    <style>
    #app {  // 删除
      font-family: Avenir, Helvetica, Arial, sans-serif;  // 删除
      -webkit-font-smoothing: antialiased;  // 删除
      -moz-osx-font-smoothing: grayscale;  // 删除
      text-align: center;  // 删除
      color: #2c3e50;  // 删除
      margin-top: 60px;  // 删除
    }  // 删除
    </style>
    
    

    最后剩下纯净的文件内容

    <template>
    </template>
    
    <script>
    
    export default {
      name: 'App',
    }
    </script>
    
    <style>
    
    </style>
    
    

    0.让项目跑起来,

    我们先把之前改动的代码保存好,
    打开命令行工具,把命令行工具的目录cd到我们项目的根目录下,然后执行

    npm run serve
    

    等待一会以后,命令行里输出

     App running at:
      - Local:   http://localhost:8080/
      - Network: http://127.0.0.1:8080/
    

    说明项目跑起来了,
    在浏览器打开http://localhost:8080/,这是页面时空的,因为我们还没有向页面里添加内容
    然后就可以开始写我们的代码了

    1.超级英雄列表展示

    我们的备案系统现在已有两个超级英雄备案完成了,我们要把他们展示出来,
    首先我们需要一个数组,存放我们已经备案的超级英雄
    在export default导出的对象里面增加data属性,data是一个函数,返回一个对象

    data() {
     return {
        list: ['钢铁侠', '蝙蝠侠'],
      }
    },
    

    list就是我们存放超级英雄的数组了,
    用我们之前学过的循环的知识来把数组里的内容显示到页面上,
    在template里增加一个ul,ul里面是li,用来显示英雄的名字

    <ul>
      <li v-for="(item, index) in list" :key="index">
            {{ item }}
      </li>
    </ul>
    

    这里要注意,在v-for这个元素上多了一个key的属性,可以是在使用v-for时必须要有的一个属性(你不写编辑器也会提醒你)
    这里:key的这个冒号表示这个值是动态绑定,完整写法是v-bind:,但是实际开发中肯定是写简写比较方便,所以以后所有的v-bind:都会简写为:
    还有一点在v-for循环里的key要求必须唯一,不能重复,在实际开发中最好的写法就是后台返回的数据中基本都会有id这个字段,把这个字段绑定到key上就行了,如果实在没有唯一、不重复的字段,那就用索引index讲究一下了,就像我们现在一样。

    2.添加新的超级英雄

    我们已经把备案的超级英雄显示出来了,现在又有了新的超级英雄完成了备案,我们要把他们添加进来,就需要一个添加的功能

    需求是有一个添加按钮,
    点击按钮弹出一个对话框,
    在里面的输入框里输入超级英雄的名字,
    点击确定后把英雄的名字添加到列表里
    1)我们在data里增加两个数据,inputContent用于绑定输入框里的值,showAddDialog用于控制添加英雄的弹窗是否显示,正常状态下这个弹窗应该是隐藏的,所以它的初始值应该是false

    data() {
        return {
          list: ['钢铁侠', '蝙蝠侠'],
          inputContent: '', // 新增
          showAddDialog: false,// 新增
        }
      },
    

    2)下面来在template写弹窗的html结构

    <div class="dialog-box" v-show="showAddDialog">
      <div class="dialog-content">
        <input type="text" v-model="inputContent" />
        <br />
        <button type="button" @click="onConfirm">确定</button>
      </div>
    </div>
    

    用showAddDialog控制整个弹框的显示隐藏,用inputContent绑定了input的输入内容,下面我们来实现点击确定按钮的回调函数onConfirm
    3)确定按钮逻辑
    我们在export default{}对象里添加methods对象,在这里面添加方法

    methods: {
        onConfirm() {
          this.showAddDialog = false
          this.list.push(this.inputContent)
          this.inputContent = ''
        },
    },
    

    在点击确定是做了三件事,
    ①this.showAddDialog = false 隐藏弹窗
    ②this.list.push(this.inputContent) 把输入框里输入的名字加到我们的超级英雄的数组里
    ③this.inputContent = '' 把输入框里值重新置空,方便下次点开时候重新输入
    4)添加增加的按钮,点击后出现弹框
    在template增加html代码

    <button type="button" @click="onAdd">增加</button>
    

    在methods里增加onAdd函数

    onAdd() {
      this.showAddDialog = true
    },
    

    只要把showAddDialog设置为true,弹框就显示出来了
    到这里,我们添加超级英雄的功能也实现了

    3.删除超级英雄

    有了添加也得有删除功能,我们现在就来实现删除
    我们在每个超级英雄的名字后面增加一个span标签,作为删除按钮

    <ul>
      <li v-for="(item, index) in list" v-bind:key="index">
         {{ item }}<span class="del" @click="onDel(index)">删除</span>
      </li>
    </ul>
    

    这个删除按钮有一个click时间的绑定,调用了onDel这个方法,并且传了一个index参数,把当前这一项的索引传了过去
    然后在methods添加onDel方法

    onDel(index) {
       this.list.splice(index, 1)
    },
    

    这里调用的splice方法,删除一个索引为index的元素

    现在展示、增加、删除的方法都完成了,下面是完整的代码

    <template>
      <div>
        <h1>超级英雄备案管理系统</h1>
        <div>
          <button type="button" @click="onAdd">增加</button>
        </div>
        <ul>
          <li v-for="(item, index) in list" v-bind:key="index">
            {{ item }}<span class="del" @click="onDel(index)">删除</span>
          </li>
        </ul>
        <div class="dialog-box" v-show="showAddDialog">
          <div class="dialog-content">
            <input type="text" v-model="inputContent" />
            <br />
            <button type="button" @click="onConfirm">确定</button>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
      data() {
        return {
          list: ['钢铁侠', '蝙蝠侠'],
          inputContent: '',
          showAddDialog: false,
        }
      },
      methods: {
        onAdd() {
          this.showAddDialog = true
        },
        onConfirm() {
          this.showAddDialog = false
          this.list.push(this.inputContent)
          this.inputContent = ''
        },
        onDel(index) {
          this.list.splice(index, 1)
        },
      },
    }
    </script>
    
    <style>
    .del {
      margin-left: 10px;
      color: red;
      cursor: pointer;
    }
    .dialog-box {
      width: 100%;
      height: 100%;
      position: fixed;
      background-color: rgba(0, 0, 0, 0.5);
      top: 0;
      left: 0;
    }
    .dialog-content {
      width: 500px;
      height: 200px;
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    </style>
    
    

    其实这个小dome还有好多功能可以加,小伙伴可以自己试一试,

    编辑超级英雄名称
    添加超级英雄是,输入的内容判断,是否为空,是否过长
    删除时给用户确认弹框
    刷新页面时如何保存数据

    这节课就到这里,希望小伙伴们可以自己写写,完成以后肯定有成就感

    相关文章

      网友评论

          本文标题:[vue3快速入门] 8.用vue写一个小dome项目

          本文链接:https://www.haomeiwen.com/subject/ophnwltx.html