写几个小案例来理解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. 两个i标签之间有缝隙

    给i标签的父元素设置font-size:0:

  2. [NOIP2017]注意点

    1.数据大却没开long long 导致的gg.2.文件读入时stdin打成stdout...3.桶维护数值,有负值要平移,且数值最好稍大(否则可能RE).4.很智障地打错变量.5.DP或其他涉及到转 ...

  3. go语言系列--golang在windows上的安装和开发环境goland的配置

    在windows上安装golang软件 golang中国网址为:https://studygolang.com/dl 我的学习选择版本:1.12.5 golang 1.12.5版本更新的内容:gola ...

  4. [51nod1383&1048]整数分解为2的幂：DP

    算法一 分析 \(f[x]=f[x-1]+f[x/2] \times [x \equiv 0 \mod 2],O(n)\) 代码 n=int(input()) f=[0]*(n+5) f[0]=1 m ...

  5. centos网卡配置NM_CONTROLLED=”yes” 慎用

    今天有1台服务器修改了 /etc/sysconfig/network-scripts/ifcfg-eth0 配置文件中的一个参数: NM_CONTROLLED=“yes” 修改成 NM_CONTROL ...

  6. wannafly 练习赛10 f 序列查询（莫队，分块预处理，链表存已有次数）

    链接:https://www.nowcoder.net/acm/contest/58/F 时间限制:C/C++ 5秒,其他语言10秒 空间限制:C/C++ 262144K,其他语言524288K 64 ...

  7. 利用spark将表中数据拆分

    i# coding:utf-8from pyspark.sql import SparkSession import os if __name__ == '__main__': os.environ[ ...

  8. 一台linux机器远程mount另一台linux机器

    本机电脑系统是unbantu,要将另一台linux电脑上的文件mount到本机目录下.mount的原理是网络文件系统,即NFS,本机操作步骤如下 一,安装 nfs-common  : apt inst ...

  9. Cannot connect to the Docker daemon. Is 'docker daemon' running on this host?

    if first time to install docker, be noted the docker engine started as root copied from: http://blog ...

  10. Getting CFNetwork SSLHandshake failed (-9806) error

    平常个人打测试包一切OK,今天突然不能联网了 How to handle "CFNetwork SSLHandshake failed" in iOS 参考1 Getting CF ...