写几个小案例来理解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. Python---webserver3

    一.v07-添加路由功能 - 路由:能够理解请求并按照请求调用相应处理函数的模块 - 理解请求内容 - 能够调用或者指定相应业务处理模块 - 算法: - 按行读取传入报文 - 假如报文能用空格分割成三 ...

  2. c++常见函数记录

    1.bitsset 模板,可以操作二进制字符串,转化成数字等 2.swap()交换函数,将a,b的值交换 3.stringstream类用于字符串和其他类型的转换,操作方便 4.stx,tr1. 5. ...

  3. 015：URLs分层模块化

    URLs分层模块化: 经过上面的14节课程,大伙有没有发现一个问题:那就是随着的项目功能模块越来越多,所有url匹配都写在一个urls.py文件中,其结果是:文件长,看着心累——需要分门别类:因此能不 ...

  4. const与#define的区别

    1.const (1)为什么需要const成员函数? C中常用:“ #define 变量名 变量值”定义一个值替代,然而却有个致命缺点:缺乏类型检测机制,这样预处理在C++中成为可能引发错误的隐患,于 ...

  5. 【深入理解CLR】1:CLR的执行模型

    将源代码编译成托管模块 下图展示了编译源代码文件的过程.如图所示,可用支持 CLR 的任何一种语言创建源代码文件.然后,用一个对应的编译器检查语法和分析源代码.无论选用哪一个编译器,结果都是一个托管模 ...

  6. TTTTTTTTTTTTT LA 2191 树状数组 稍修改

    题意:给出n个数字,操作有修改(S)和输出区间和(M). #include <iostream> #include <cstdio> #include <cstring& ...

  7. 页面禁止刷新处理Js实现

    document.onkeydown = function(e) { e = window.event || e; var k = e.keyCode; //屏蔽ctrl+R,F5键,ctrl+F5键 ...

  8. sh_05_偶数求和

    sh_05_偶数求和 # 计算 0 ~ 100 之间 所有 偶数 的累计求和结果 # 开发步骤 # # 1. 编写循环 确认 要计算的数字 # 2. 添加 结果 变量,在循环内部 处理计算结果 # 1 ...

  9. 织梦DedeCms技术资料

    Dedecms调用文章发布时间的方法 11-20 样式 ([field:pubdate function='strftime("%m-%d",@me)'/]) May 15, 20 ...

  10. android和网络连接相关的类URL，URLConnection，HttpURLConnection，HttpClient

    这几个类都是用于和服务器端的连接,有些功能都能够实现,关系是: 一.URL URL标识着网络上的一个资源:该类包含一些URL自身的方法,如获取URL对应的主机名称,端口号,协议,查询字符串外,还有些方 ...