写几个小案例来理解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. 【NOIP2014模拟8.17】Magical GCD

    题目 对于一个由正整数组成的序列, Magical GCD 是指一个区间的长度乘以该区间内所有数字的最大公约数.给你一个序列,求出这个序列最大的 Magical GCD. 分析 根据暴力的思想, \( ...

  2. 算法——得到数据流中前K大的数

    用优先队列 public PriorityQueue<Integer> kthLargest(int k, int[]a) { PriorityQueue<Integer> q ...

  3. shiro框架学习-2-springboot整合shiro及Shiro认证授权流程

    1. 添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  4. node.js入门学习（五）--Demo模块化改造

    1.node.js中模块的分类 1)node.js内置模块(核心,原生) 所有内置模块在安装node.js时就已经编译成二进制文件,可以直接加载运行(速度较快),部分内置模块,在node.exe这个进 ...

  5. Python爬虫十六式 - 第三式：Requests的用法

    Requests: 让 HTTP 服务人类 学习一时爽,一直学习一直爽   Hello,大家好,我是Connor,一个从无到有的技术小白.今天我们继续来说我们的 Python 爬虫,上一次我们说到了 ...

  6. [BZOJ4011][HNOI2015]落忆枫音：拓扑排序+容斥原理

    分析 又是一个有故事的题目背景.作为玩过原作的人,看题目背景都快看哭了ToT.强烈安利本境系列,话说SP-time的新作要咕到什么时候啊. 好像扯远了嘛不管了. 一句话题意就是求一个DAG再加上一条有 ...

  7. Spring Boot教程（八）创建含有多module的springboot工程

    创建根工程 创建一个maven 工程,其pom文件为: <?xml version="1.0" encoding="UTF-8"?> <pro ...

  8. selectKey 标签

    原文: https://blog.csdn.net/Sun_of_Rainy/article/details/81564433 在insert语句中,在Oracle经常使用序列.在MySQL中使用函数 ...

  9. springBoot+springSecurity 数据库动态管理用户、角色、权限（二）

    序: 本文使用springboot+mybatis+SpringSecurity 实现数据库动态的管理用户.角色.权限管理 本文细分角色和权限,并将用户.角色.权限和资源均采用数据库存储,并且自定义滤 ...

  10. C语言的AES加密

    C语言的AES加密 稍微封装了几个函数 方便使用 #if 1 #include <stdio.h> #include <stdlib.h> #include <strin ...