vue的手脚架(vue-cli)实例

本文通过一个Vue脚手架实例,详细介绍了如何拆分组件、实现静态和动态页面,以及组件间的交互。从main.js的配置到各个组件的编写,包括header1、list和footer1组件,展示了Vue应用的基础构建过程。通过父子组件间的数据传递,实现了任务添加、删除、全选和清除等功能。
摘要由CSDN通过智能技术生成

vue脚手架实例
效果如下
在这里插入图片描述

准备工作

先安装vue需要的插件和依赖,具体参考手脚架(vue-cli)准备

基本思路分三步

1.拆分组件

App包含header1、list、footer1三个子组件,而list又包含item子组件
2.实现静态组件,即静态页面,数据固定
3.实现动态组件,包括初始化显示和交互
文件夹上下级关系如图所示
在这里插入图片描述
下面直接开始进行源码编写

main.js

main.js是主入口文件,引入了vue框架,根组件,路由插件,并定义了vue的实例

import App from './App.vue'
new Vue({
  el:'#app',
  components:{App},
  template:'<App/>'
})

index.html

index.html可以理解为一个web页面容器,挂载main.js定义的根节点,内容由组件填充。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue脚手架实例</title>
  </head>
  <style>
    body {
      background: #fff;
    }
    .btn {
      display: inline-block;
      padding: 4px 12px;
      margin-bottom: 0;
      font-size: 14px;
      line-height: 20px;
      text-align: center;
      vertical-align: middle;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
      border-radius: 4px;
    }
    .btn-danger {
      color: #fff;
      background-color: #da4f49;
      border: 1px solid #bd362f;
    }
    .btn-danger:hover {
      color: #fff;
      background-color: #bd362f;
    }
    .btn:focus {
      outline: none;
    }
  </style>
  <body>
    <div id="app"></div>
  </body>
</html>

App.vue

App.vue是根组件,组件标签需要导入此页面

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
      //使用组件,组件将在此位置显示到页面中
        <header1 :add1="add1"></header1>//这个:add1="add1",表示向子组件传递add1函数
        <list :todos="todos" :dete="dete"></list>
        <footer1 :todos="todos" :selectAll="selectAll" :deleteAll="deleteAll"></footer1>
      </div>
    </div>
  </div>
</template>
<script>
//引入组件
  import header1 from './componts/header1.vue'
  import list from './componts/list.vue'
  import footer1 from './componts/footer1.vue'
    export default {
    //初始化
    data(){ 
      return{
        todos:[{name:'吃饭',complete:false},{name:'睡觉',complete:false}]
      }
    },
    //将组件映射成标签
      components:{
        header1,
        list,
        footer1
      },
      //定义的一些方法
      methods:{
      add1(value){
        this.todos.unshift(value)
      },
        dete(index){
        this.todos.splice(index,1)
        },
        selectAll(value){
        this.todos.forEach(todo=>{
          todo.complete=value
          })
        },
        deleteAll(){
        this.todos=this.todos.filter(todo=>todo.complete==false)
        }
      }
    }
</script>
<style scoped>
  .todo-container {
    width: 600px;
    margin: 0 auto;
  }
  .todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
</style>

编写四个组件

组件1. header1.vue(用header1而不用header,是怕命名冲突)

<template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称,按回车键确认" v-model="inputtodo" @keyup.enter="add2"/>
  </div>
</template>
<script>
    export default {
    //接收从父组件传递过来的数据
      props: ['add1'],
      data(){
        return{
          inputtodo:''
        }
      },
      methods: {
        add2() {
          const inputtodo = this.inputtodo.trim()
          const todo = {
            name: inputtodo,
            complete: false
          }
          this.add1(todo)
          this.inputtodo=''
          }
        }
      }
</script>
<style scoped>
  .todo-header input {
    width: 560px;
    height: 28px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 7px;
  }
  .todo-header input:focus {
    outline: none;
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  }
</style>

组件2. list.vue

<template>
  <div>
  <ul class="todo-main">
  //它的子组件item 应该遍历产生
<item v-for="(todo,index) in todos" :key="index" :todo="todo" :dete="dete"
:index="index"></item>
  </ul>
  </div>
</template>
<script>
import item from './item'
    export default {
      props:['todos','dete'],
      components:{
        item
      }
    }
</script>
<style scoped>
  .todo-main {
    margin-left: 0px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0px;
  }
  .todo-empty {
    height: 40px;
    line-height: 40px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding-left: 5px;
    margin-top: 10px;
  }
</style>

组件3. item.vue,是组件list.vue的子组件

<template>
//鼠标移入移出改变背景颜色和显示button按钮
  <li :style="{background: bgColor}" @mouseenter="handleEnter(true)" @mouseleave="handleEnter(false)">
    <label>
      <input type="checkbox" v-model="todo.complete"/>
      <span>{{todo.name}}</span>
    </label>
    <button class="btn btn-danger" v-show="isshow" @click="deteletodo">删除</button>
  </li>
</template>
<script>
    export default {
      data(){
        return {
          isshow:false,
          bgColor: 'white'
        }
      },
      props:['todo','dete','index'],
      methods:{
        handleEnter(value){
          if(value){
            this. bgColor= '#cccccc'
            this.isshow=true
          }else{
            this.isshow=false
            this. bgColor="white"
          }
    },
        deteletodo(){
          this.dete(this.index)
        }
      }
    }
</script>
<style scoped>
  /*item*/
  li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
  }
  li label {
    float: left;
    cursor: pointer;
  }
  li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
  }
  li button {
    float: right;
    /*display: none;*/
    margin-top: 3px;
  }
 li:before {
    content: initial;
  }
  li:last-child {
    border-bottom: none;
  }
</style>

组件4. footer1.vue

<template>
  <div class="todo-footer">
    <label>
      <input type="checkbox" v-model="checkall"/>
    </label>
    <span>
          <span>已完成{{completeSize}}</span> / 全部{{todos.length}}
        </span>
    <button class="btn btn-danger" @click="deleteAllCompleted">清除已完成任务</button>
  </div>
</template>
<script>
    export default {
      props: ['todos','selectAll','deleteAll'],
      computed: {
        completeSize() {
          return this.todos.reduce((preTotal, todo) => preTotal + (todo.complete ? 1 : 0), 0)
        },
        checkall:{
          get(){
            return this.completeSize===this.todos.length && this.completeSize>0
          },
          set(value){
            this.selectAll(value)
          }
        }
      },
      methods:{
        deleteAllCompleted(){
          this.deleteAll()
        }
      }
    }
</script>
<style scoped>
  .todo-footer {
    height: 40px;
    line-height: 40px;
    padding-left: 6px;
    margin-top: 5px;
  }
  .todo-footer label {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
  }
  .todo-footer label input {
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
  }
  .todo-footer button {
    float: right;
    margin-top: 5px;
  }
</style>

运行

代码写好后,在src所在的文件夹上,输入cmd启动命令窗格,输入npm start,便能自动打开浏览器,显示画面

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值