vue part3.1 小案例 comments评论页

最新推荐文章于 2022-10-17 09:37:05 发布
最新推荐文章于 2022-10-17 09:37:05 发布
阅读量258 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/infaaf/p/9643329.html
版权

步骤概要

设计步骤

  • 拆分组件 （可以先准备好完整的bootstrap美化页面，然后切分）
  • 静态组件
  • 动态组件

软件编写步骤

  • 准备静态文件  （含bootstrap等）
  • 编写 vue webpacke

 

案例1：comment

1. 静态页面 与拆分

 静态页面

先设计html  如 bootstrap css美化过的页面

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="./static/css/bootstrap.css">
    <title>vue_demo</title>
  </head>

  <body>
    <div id="app">
      <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">
          <div class="col-md-4">
              <form action="form-horizontal">
                <div class="form-group">
                  <label>用户名</label>
                  <input type="text" class="form-control" placeholder="用户名">
                </div>
                <div class="form-group">
                  <label>评论内容</label>
                  <textarea type="text" class="form-control" placeholder="评论内容"></textarea>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-default pull-right">提交</button>
                  </div>
                </div>
              </form>
            </div> <!--md4 for Add end    -->

          <div class="col-md-8">
            <h3 class="reply">评论回复：</h3>
            <h2>暂无评论，点击左侧添加评论吧！</h2>
            <ul class="list-group">
                <li class="list-group-item">
                  <div class="handle">
                    <a>删除</a>
                  </div>
                  <p class="user"><span>Tom</span><span>说:</span></p>
                  <p class="centence">jerry是猫</p>
                </li>
            </ul>
          </div>  <!--md8 for List end -->
      </div>
      </div>
    </div> <!--app -->
  </body>

</html>
View Code

 

页面拆分

 

 红框含app，内部黄框为整体App.vue

绿框分割

 

 其中header标记是html5 新标记http://know.webhek.com/html5/html5-header.html

 

2.代码过程

2.1代码静态分割

main.js
/**
 * Created by infaa on 2018/9/18.
 */
import Vue from 'vue'
import App from './App'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: {App}

})
View Code
App.uve
<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/>
          <List/>
      </div>

</div>
</template>

<script>
import Add from './components/Add.vue'
import List from './components/List.vue'
export default {
  components: {
    Add,
    List
  }
}

</script>

<style>

</style>
View Code
./components/Add.vue   

components 实际复杂情况下为目录，每个目录为完整一组功能，含图片等元素。

<template>
<div class="col-md-4">
              <form action="form-horizontal">
                <div class="form-group">
                  <label>用户名</label>
                  <input type="text" class="form-control" placeholder="用户名">
                </div>
                <div class="form-group">
                  <label>评论内容</label>
                  <textarea type="text" class="form-control" placeholder="评论内容"></textarea>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-default pull-right">提交</button>
                  </div>
                </div>
              </form>
            </div> <!--md4 for Add end    -->
</template>

<script>
export default {

}

</script>

<style>

</style>
View Code
./components/List.vue
<template>
<div class="col-md-8">
            <h3 class="reply">评论回复：</h3>
            <h2>暂无评论，点击左侧添加评论吧！</h2>
            <ul class="list-group">
                <li class="list-group-item">
                  <div class="handle">
                    <a>删除</a>
                  </div>
                  <p class="user"><span>Tom</span><span>说:</span></p>
                  <p class="centence">jerry是猫</p>
                </li>
            </ul>
          </div>  <!--md8 for List end -->
</template>

<script>
export default {

}

</script>

<style>

</style>
View Code

 

2.2 代码动态传递（父组件->子组件->子组件）

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 :comments="comments"/>
          <List :comments="comments"/>
      </div>

</div>
</template>

<script>
import Add from './components/Add.vue'
import List from './components/List.vue'
export default {
  components: {
    Add,
    List
  },
  data () {
    return {
      comments: [
        {
          name: 'bob',
          content: 'Vue of bobaaaaaaaaaaaaaaaaaaaaaaaaaaa'
        },
        {
          name: 'cat',
          content: 'VUE OF CAT'
        },
        {
          name: 'david',
          content: 'vue of davie'
        }
      ]
    }
  }
}

</script>

<style>

</style>
View Code
list.uve    

components引入子组件，props申明父组件变量，：comment通过属性向子组件传递 。 以上过程可以多次传递

<template>
<div class="col-md-8">
  <h3 class="reply">评论回复：</h3>
  <h2>暂无评论，点击左侧添加评论吧！</h2>
  <ul class="list-group" >
    <item v-for="(comment,index) in comments" :key="index" :comment="comment"></item>
  </ul>
</div>  <!--md8 for List end -->
</template>

<script>
import Item from './Item.vue'
export default {
  props: ['comments'],
  components: {Item}
}

</script>

<style>
  .reply {
    margin-top: 0px;
  }
  li {
    transition: .5s;
    overflow: hidden;
  }
  .handle a {
    display: block;
    text-decoration: none;
  }
</style>
View Code

item.vue

测试再向内传递comment值

<template>
<li class="list-group-item">
  <div class="handle">
    <a>删除</a>
  </div>
  <p class="user"><span>{{comment.name}}</span><span>说:</span></p>
  <p class="centence">{{comment.content}}</p>
  <Item2 :comment="comment"></Item2>

</li>
</template>

<script>
import Item2 from './Item2.vue'
export default {
  props: {'comment': Object},
  components: {Item2}
}

</script>

<style>
  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>
View Code

item2.vue

<template>
<span :comment="comment">多次传递实例{{comment.content}}</span>
</template>

<script>
export default {
props:['comment']
}

</script>

<style>

</style>
View Code

 

 2.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" />
          <List :comments="comments" :deleteComment="deleteComment"/>
      </div>

</div>
</template>

<script>
import Add from './components/Add.vue'
import List from './components/List.vue'
export default {
  components: {
    Add,
    List
  },
  data () {
    return {
      comments: [
        {
          name: 'bob',
          content: 'Vue of bobaaaaaaaaaaaaaaaaaaaaaaaaaaa'
        },
        {
          name: 'cat',
          content: 'VUE OF CAT'
        },
        {
          name: 'david',
          content: 'vue of davie'
        }
      ]
    }
  },
  // 数据在哪里，就在哪里定义方法
  methods: {
    addComment (comment) {
      this.comments.unshift(comment)
    },
    deleteComment (index) {
      this.comments.splice(index, 1)
    }

  }
}

</script>

<style>

</style>
View Code

list.vue

<template>
<div class="col-md-8">
  <h3 class="reply">评论回复：</h3>
  <h2 v-show="comments.length===0">暂无评论，点击左侧添加评论吧！</h2>
  <ul class="list-group" >
    <item v-for="(comment,index) in comments" :index="index" :deleteComment="deleteComment" :comment="comment" :key="index"></item>
  </ul>
</div>  <!--md8 for List end -->
</template>

<script>
import Item from './Item.vue'
export default {
  props: ['comments', 'deleteComment'],
  components: {Item}
}

</script>

<style>
  .reply {
    margin-top: 0px;
  }
  li {
    transition: .5s;
    overflow: hidden;
  }
  .handle a {
    display: block;
    text-decoration: none;
  }
</style>
View Code

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 {
  props: {
    'comment': Object,
    'deleteComment': Function,
    'index': Number
  },
  methods: {
    deleteItem () {
      const {comment, index, deleteComment} = this
      if (window.confirm(`确定删除${comment.name}的评论吗`)) {
        deleteComment(index)
      }
    }
  }
}

</script>

<style>
  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>
View Code

add.vue

<template>
<div class="col-md-4">
              <form action="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 type="text" class="form-control" 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> <!--md4 for Add end    -->
</template>

<script>
export default {

  props: {
    addComment: {
      type: Function,
      required: true

    }
  },
  data () {
    return {
      name: '',
      content: ''
    }
  },
  methods: {
    add () {
      const name = this.name.trim()
      const content = this.content
      if (!name || !content) {
        alert('no name or content')
        return
      }
      const comment = {
        name,
        content
      }
      this.addComment(comment)
      // 清除输入
      this.name = ''
      this.content = ''
    }
  }
}

</script>

<style>

</style>
View Code

 index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="./static/css/bootstrap.css">
    <title>vue_demo</title>
  </head>

  <body>
    <div id="app">
    </div> <!--app -->
  </body>

</html>
View Code

main.js

/**
 * Created by infaa on 2018/9/18.
 */
import Vue from 'vue'
import App from './App'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: {App}

})
View Code

 

 

 参考

https://github.com/sunny-sky/VueDemo

 

  

转载于:https://www.cnblogs.com/infaaf/p/9643329.html

weixin_33775582
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue简单登录小案例
04-28
这是一个简单的登录注册案例，可以让初学者更好的学习vue中的路由、路由嵌套、axios以及vuex。
Comments-VueJS：使用VueJS框架列出评论
02-18
评论 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
vue中echarts图表大小适应窗口大小且不需要刷新案例
10-15
主要介绍了vue中echarts图表大小适应窗口大小且不需要刷新案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2.0实现购物车小案例
07-11
运用vue2.0实现的购物车demo，供大家共同学习参考,欢迎评论指正。
vue实现购物车小案例
12-13
本文实例为大家分享了vue实现购物车小案例的具体代码，供大家参考，具体内容如下 最终效果 HTML部分： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>shopcar.html</title> [removed][removed] [removed][removed] <link rel="stylesheet"
使用vue实现个人博客的评论功能
huangguangyourena的博客
07-02 9321
在说之前先看下效果图，这样方便于理解 样式写的比较丑，希望读者不要太介意，但是功能还是有好好实现的，接下来再看一下代码 这一块的代码是不包含评论在内的代码，对应效果图的评论框。那么实现的过程需要注意的就是 第一步 我们需要获得input中的数据已经textarea中的数据，因此我们需要使用v-model来实现双向绑定，这样一旦输入框的数据发生变 化，我们也能够直接在data中直...
Vue实现评论功能
热门推荐
原地起飞
05-10 1万+
实现评论功能最开始确实是令我头疼的一件时间，因为不确定评论的字数，就要自适应高度，还不确定评论的层级，这看起来就很令人头疼。评论功能麻烦在于它是由层次的，有不停的回复功能，这点是令人比较头疼的地方，我在写这个功能的时候做了比较笨的一个方法去处理它。 我先选择了布局页面，先把页面布局好以后在去想怎么发表评论怎么回复评论一起渲染不确定层次的评论内容。 1、布局页面 想要实现以上布局方式，我在这个地方采取了flex布局， 让他自己去撑开盒子，这样就实现了高度自适应的一个方式，我在每一条评论内容下面隐藏.
Vue递归组件：渲染嵌套评论
粉丝们务必加入微信粉丝群
08-10 561
虽然有些缺陷的，但上面的函数可以被认为是递归函数，因为它在函数中调用了自己。然而，这个定义并不包括所有的内容。递归是一种解决问题的方法。它基于这样一个前提：给定一个问题，如果我们知道其子问题的解决方案，我们就可以找到其解决方案。例如，上面的函数可以找到一个给定数组中所有数字的总和。在求和问题中，如果我们知道5之前的所有数字之和，那么我们可以将问题简化为arr中的数字之和等于最后一个元素和最后一个元素之前所有数字之和。在上面定义的函数中，表达式所做的正是我们刚才描述的。...
【Vue】高仿CSDN的评论区功能，全手敲！
小李不背锅的博客
09-07 3059
2-2、点击评论图标的时候，触发一个方法，打开弹窗，并根据文章id请求后台评论，后端用Java对评论和回复进行封装返回 2-3、发表评论，将评论内容和用户id以及文章id发给后端保存，发表的时候，前端伪更新评论区，将新发表的评论push到comments里面，就不需要再次请求后端获取所有评论，除非用户主动刷新页面。 2-4、打开回复框，注意我们动态绑定了每条评论的openReply属性，每个回复框都是独立的，并不会相互影响，更新openReply属性不能简单地用this.comment[index].o
【Vue】 前端代码风格指南--注释规范
DomCode
07-09 4586
如无必要，勿增注释 ( As short as possible ) 如有必要，尽量详尽 ( As long as necessary )
Vue入门学习小案例-小王记事本
04-05
Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本
Vue组件切换--comment(适用于多个组件切换)
AsaZyf的博客
11-01 3353
code: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;组件切换comment--适用于多个组件切换&lt;/title&gt; &lt;script type="text/javascript" src=&quo
vue——33-父子组件传方法（发表评论） 及 localStorage 的应用
肖的博客
10-16 606
引入文件：bootstrap.css html &amp;amp;amp;amp;lt;div id=&amp;amp;amp;quot;app&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;cmt-box @func=&amp;amp;amp;quot;loadComments&amp;amp;amp;quot;&amp;amp;amp;amp;gt;&a
使用Vue组件为页面添加评论
lty5240的博客
03-22 4402
简介 首先这是一个Laravel练手项目，使用blade和Vue组件混合开发Web页面。 本文章将使用Vue.js组件为博客详情页添加评论功能，主要实现以下功能： 文章页面可查看评论 用户可进行评论，并且不需要刷新视图 准备工作 首先新建好Vue组件：Comment.vue 并将它在入口（默认为app.js）进行注册： Vue.component('comments',require('./c...
vue3-API
liao__ran的博客
10-17 903
vue3使用时查询的API
vue中组件通信1(props)
Amelian的博客
11-22 317
一、数据存储部分 即是要解决存什么数据，什么时候读取，当一有对数据相关操作时要更新数据 data中的数据不能写死了，需要从localStorage中读取数据 使用window.localStorage.getItem(‘todos_key’)//但是这里获取到的是文本数据，因此需要得到key-value的形式，将其转换为JSON格式：（因为todos这里是一个JSON格式的数组）-------所以在监视中setItem存储的数据类型要相对应 ‘[ ]‘表示当为空时解析的文本 2…用到深度监视（watc
VUE3 You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignor
撑起自己半边天
05-25 7253
VUE3 You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignor
vue3评论组件
web
05-01 6857
vue评论组件，🔥基于vue3的UI组件，主要功能有评论，聊天，搜索，锚点。
VUE04
cxuyuanLch的博客
05-25 196
1.Vue渲染模板怎么保留模板中html的注释？ 在组件中将comments选项设置为true <template comments> ... </template> comments 类型：boolean 默认值：false 限制：这个选项只在完整构建版本中的浏览器内编译时可用。 详细： 当设为 true 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。 类型：boolean 默认值：false 限制：这个选项只在完整构建版本中的浏览器内编译时可用。 详细：
vue3.0实现小案例
最新发布
05-14
好的，我来给你介绍一个用 Vue 3.0 实现的小案例。 这个案例是一个简单的待办事项列表，可以添加、删除和标记完成任务。 我们先来看一下代码实现： ```html <template> <div> <h2>待办事项列表</h2> <input type="text" v-model="newTodo" placeholder="请输入待办事项"> <button @click="addTodo()">添加</button> <ul> <li v-for="(todo, index) in todos" :key="index"> <span :class="{ done: todo.done }">{{ todo.content }}</span> <button @click="deleteTodo(index)">删除</button> <button @click="toggleDone(index)">{{ todo.done ? '未完成' : '已完成' }}</button> </li> </ul> </div> </template> <script> import { reactive } from 'vue'; export default { setup() { const state = reactive({ newTodo: '', todos: [] }); const addTodo = () => { if (state.newTodo.trim() !== '') { state.todos.push({ content: state.newTodo, done: false }); state.newTodo = ''; } }; const deleteTodo = (index) => { state.todos.splice(index, 1); }; const toggleDone = (index) => { state.todos[index].done = !state.todos[index].done; }; return { newTodo: state.newTodo, todos: state.todos, addTodo, deleteTodo, toggleDone }; } }; </script> <style> .done { text-decoration: line-through; } </style> ``` 这个案例使用了 Vue 3.0 的 Composition API，使用 `reactive` 创建响应式对象，然后在 `setup` 函数中定义了添加、删除和标记完成任务的函数，并通过 `return` 返回这些函数和响应式数据，最后在模板中使用了指令和事件监听器来实现交互效果。 如果你想要更详细的介绍，可以参考 Vue 3.0 官方文档：https://v3.vuejs.org/guide/introduction.html。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值