写几个小案例来理解vue的组件化编程思想,下面是一个demo.

效果图示:



功能: Add组件用于添加用户评论,提交后右边评论回复会立马显示数据.Item组件点击删除可以删除当前用户评论.当List组件中用户评论为空时,会提示"暂无评论，点击左侧添加评论".

项目目录:



代码:

1.index.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>vue_demo</title>

    <link rel="stylesheet" href="./static/css/bootstrap.css">

  </head>

  <body>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

2.main.js

import Vue from 'vue'

import App from './App'

new Vue({

  el: '#app',

  components: { App },

  template: '<App/>'

})

3.App.vue

<template>

  <div>

    <header class="site-header jumbotron">

      <div class="container">

        <div class="row">

          <div class="col-xs-12">

            <h1>请发表对Vue的评论</h1>

          </div>

        </div>

      </div>

    </header>

    <div class="container">

      <Add :addComment="addComment" />

      <!-- 组件通信:属性名最好与model中一致(绑定表达式) -->

      <List :comments="comments" :deleteComment="deleteComment"/>

    </div>

  </div>

</template>

<script>

  import Add from './components/Add'

  import List from './components/List'

  export default {

    name: 'App',

    data(){

      return {

        comments: [   // 数据在哪个组件,更新数据的行为(方法)就应该定义在哪个组件

          {

            name: 'Jack',

            content: 'vue so easy'

          },

          {

            name: 'Tom',

            content: 'vue so nice'

          },

          {

            name: 'Cat',

            content: 'vue so cool'

          },

        ],

      }

    },

    methods: {

      // 添加评论

      addComment (comment) {

        this.comments.unshift(comment)

      },

      // 删除指定下标的评论

      deleteComment (index) {

        this.comments.splice(index,1)

      }

    },

    components: {Add ,List},

  }

</script>

<style>

</style>

4.Add.vue

<template>

  <div class="col-md-4">

    <form class="form-horizontal">

      <div class="form-group">

        <label>用户名</label>

        <input type="text" class="form-control" placeholder="用户名" v-model="name">

      </div>

      <div class="form-group">

        <label>评论内容</label>

        <textarea class="form-control" rows="6" placeholder="评论内容" v-model="content"></textarea>

      </div>

      <div class="form-group">

        <div class="col-sm-offset-2 col-sm-10">

          <button type="button" class="btn btn-default pull-right" @click="add">提交</button>

        </div>

      </div>

    </form>

  </div>

</template>

<script>

  export default {

    name: "Add",

    props: {  // 声明接受属性

      addComment: {   //指定属性名/属性值类型/必要性

        type: Function,

        required: true

      }

    },

    data () {

      return {

        name: '',

        content: ''

      }

    },

    methods: {

      add () {

        // 1.检查输入的合法性

        const name = this.name.trim()

        const content = this.content.trim()

        if (!name || !content) {

          alert('name和content不能为空')

          return

        }

        // 2.根据输入的数据,封装成一个comment对象

        const comment = {

          name,

          content

        }

        // 3.添加到comments中

        this.addComment(comment)

        // 4.清楚输入

        this.name = ''

        this.content = ''

      }

    }

  }

</script>

<style scoped>

</style>

5.List.vue

<template>

  <div class="col-md-8">

    <h3 class="reply">评论回复：</h3>

    <h2 v-show="comments.length===0">暂无评论，点击左侧添加评论！！！</h2>

    <ul class="list-group">

      <!-- 使用Item标签: 遍历数组,数组通信 -->

      <Item v-for="(comment,index) in comments" :key="index" :comment="comment"

        :deleteComment="deleteComment" :index="index"/>

    </ul>

  </div>

</template>

<script>

  // 引入Item组件

  import Item from './Item'

  export default {

    name: "List",

    // 声明接受属性: 会成为组件对象的属性(类似与vm: data(){return {comments: []}})

    props: ['comments','deleteComment'],  //只指定属性名

    components: { // 组件映射标签

      Item

    }

  }

</script>

<style scoped>

  .reply {

    margin-top: 0px;

  }

</style>

6.Item.vue

<template>

  <li class="list-group-item">

    <div class="handle">

      <a href="javascript:;" @click="deleteItem">删除</a>

    </div>

    <p class="user"><span >{{comment.name}}</span><span>说:</span></p>

    <p class="centence">{{comment.content}}</p>

  </li>

</template>

<script>

    export default {

      name: "Item",

      // 声明接受属性

      props: {  // 指定属性名和属性值的类型

        comment: Object,

        deleteComment: Function,

        index: Number

      },

      methods: {

        deleteItem () {

          const {comment,deleteComment,index} = this

          if (window.confirm(`是否确定删除${comment.name}的评论?`)) {

            deleteComment(index)

          }

        }

      }

    }

</script>

<style scoped>

  li {

    transition: .5s;

    overflow: hidden;

  }

  .handle {

    width: 40px;

    border: 1px solid #ccc;

    background: #fff;

    position: absolute;

    right: 10px;

    top: 1px;

    text-align: center;

  }

  .handle a {

    display: block;

    text-decoration: none;

  }

  .list-group-item .centence {

    padding: 0px 50px;

  }

  .user {

    font-size: 22px;

  }

</style>

vue组件化编程应用的更多相关文章

  1. vue组件化编程应用2

    写几个小案例来理解vue的组件化编程思想,下面是一个demo. 效果图示: 需求: header部输入任务,进行添加,在list中显示; list中每个item项,鼠标移入时,背景变灰并显示delet ...

  2. vue - Vue组件化编程

    今天是对vue组件化的一个理解,最主要的单文件组件,然后就可以脚手架的学习了,本来昨晚就该上传的,但是用的那个上传博客园的Python脚本不行了,换了一个新的. 组件化让我越来越感觉到框架的力量了 一 ...

  3. vue组件化编程

    vue文件包含3个部分 <template> <div></div> </template> <script> export default ...

  4. vue组件化之模板优化及注册组件语法糖

    vue组件化之模板优化及注册组件语法糖 vue组件化 模板 优化  在 https://www.cnblogs.com/singledogpro/p/12054895.html 这里我们对vue.js ...

  5. vue组件化的应用

    前言:vue组件化的应用涉及到vue-cli的内容,所以在应用之前是需要安装node和vue-cli的,具体如何安装我就不一一赘述了.可能一会儿我心情好的时候,可以去整理一下. 1.应用的内容:在一个 ...

  6. React 面向组件化编程 - 封装了webpack - npm run build 产生的包的 /static 引用路径问题

    React 面向组件化编程 面向对象 ----> 面向模块 ----> 面向组件 套路: 注意: 组件名必须大写开头: 只能有一个根标签: <input />虚拟DOM 元素必 ...

  7. 初探CORBA组件化编程

    1.掌握组件化开发的概念,了解CORBA模型及ORB机制:2.掌握CORBA组件编程方法.二.实验内容(一).步骤1.配制环境JDK环境.2.编写编译IDL接口.3.编写编译服务端程序.4.编写编译客 ...

  8. Vue组件化开发

    Vue的组件化 组件化是Vue的精髓,Vue就是由一个一个的组件构成的.Vue的组件化设计到的内容又非常多,当在面试时,被问到:谈一下你对Vue组件化的理解.这时候又有可能无从下手,因此在这里阐释一下 ...

  9. vue组件化初体验 全局组件和局部组件

    vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件  关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...

随机推荐

  1. MySQL自动生成序号列

    select (@i:=@i+1) i,a.CITYID from basis_cityinfo a ,(select @i:=0) t2 order by a.id desc limit 220;

  2. JavaWeb面试篇（6）

    51.说一说Servlet的生命周期? Servlet有良好的生存期的定义,包括加载和实例化.初始化.处理请求以及服务结束.这个生存期由javax.servlet.Servlet接口的init(),s ...

  3. UVa 11235 Frequent values (RMQ && 区间出现最多次的数的次数)

    题意 : 给出一个长度为 n 的不降序序列,并且给出 q 个形如(L, R)的问询,问你这个区间出现的最多次的数的次数. 分析 : 很自然的想到将区间“缩小”,例如1 1 2 3 3 3就可以变成2 ...

  4. Luogu P3408 恋爱

    题目链接:Click here Solution: 设f[x]表示要使x向它的父亲写信需要花的最少的钱,per[x]为要使x向它的父亲写信最少要多少人 则\(f[x]=\sum_{i=1}^{per[ ...

  5. Oracle-SQL程序优化3

    最近一个星期ETL无论在凌晨或是在中午的JOB执行过程中经常卡住,导致不能按时完成系统引擎的运行,对业务产生影响. 通过生成AWR报告,发现有三条SQL消耗大量的CPU,而且还没有执行完成被终止的.如 ...

  6. Apache Drill 调研学习

    Apache Drill 调研学习 ## 一.Drill概述 在大数据时代,对于Hadoop中的信息,越来越多的用户需要能够获得快速且互动的分析方法.大数据面临的一个很大的问题是大多数分析查询都很缓慢 ...

  7. 【每日一包0005】arr-flatten

    github地址:https://github.com/ABCDdouyae... arr-flatten 将多维数组展开成一维数组 文档地址:https://www.npmjs.com/packag ...

  8. java中 Excel表实现数据导入导出

    需要引入依赖: <!-- https://mvnrepository.com/artifact/org.apache.poi/poi --> <dependency> < ...

  9. oracle em启动问题

    这种情况出现的可能性是(1)主机IP地址改变,(2)主机名改变,(3)移植到全新的主机,(4)监听程序未启动,5)oracle服务也检查一下 关于orcl的启动: emctl start dbcons ...

  10. lnmp源码搭建

      Nginx工作原理 这里需要结合Apache的工作,对PHP文件处理过程的区别 1:Nginx是通过php-fpm这个服务来处理php文件        2:Apache是通过libphp5.so ...