vue小案例–简易评论区_旧址_前端开发者

一、小案例(评论区)

1、流程

(1)分析静态页面。(vue项目创建参考https://www.cnblogs.com/l-y-h/p/11241503.html
(2)拆分静态页面,变成一个个组件。
(3)对组件编码,生成动态页面。

2、静态页面

参考来源:https://www.bilibili.com/video/av49099807/?p=22&t=1223

【举例:】
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <!--此处如果bootstrap选用 4.3.1的版本,样式会无效(没去研究)-->
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
        <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>欢迎来到吐槽大厅</h1>
                            </div>
                        </div>
                    </div>
                </header>

                <!--主体部分-->
                <!--bootstrap将页面分为12格,此处拆分为左4格,右8格-->
                <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 col-sm-offset-2 col-sm-10">
                                    <a class="pull-right">删除</a>
                                </div>
                                <p class="user"><span>Tom</span><span>说:</span></p>
                            </li>
                            <li class="list-group-item">
                                <div class="handle col-sm-offset-2 col-sm-10">
                                    <a class="pull-right">删除</a>
                                </div>
                                <p class="user"><span>Tom</span><span>说:</span></p>
                            </li>
                        </ul>
                    </div>
                    <!--md8 for List end -->
                </div>
            </div>
        </div>
        <!--app -->
    </body>

</html>
【举例:】
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <!--此处如果bootstrap选用 4.3.1的版本,样式会无效(没去研究)-->
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
        <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>欢迎来到吐槽大厅</h1>
                            </div>
                        </div>
                    </div>
                </header>

                <!--主体部分-->
                <!--bootstrap将页面分为12格,此处拆分为左4格,右8格-->
                <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 col-sm-offset-2 col-sm-10">
                                    <a class="pull-right">删除</a>
                                </div>
                                <p class="user"><span>Tom</span><span>说:</span></p>
                            </li>
                            <li class="list-group-item">
                                <div class="handle col-sm-offset-2 col-sm-10">
                                    <a class="pull-right">删除</a>
                                </div>
                                <p class="user"><span>Tom</span><span>说:</span></p>
                            </li>
                        </ul>
                    </div>
                    <!--md8 for List end -->
                </div>
            </div>
        </div>
        <!--app -->
    </body>

</html>

【举例:】
<!DOCTYPE html><html><head><meta charset=”utf-8″><meta name=”viewport” content=”width=device-width,initial-scale=1.0″><!–此处如果bootstrap选用 4.3.1的版本,样式会无效(没去研究)–><link href=”https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css” rel=”stylesheet”><script src=”https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.js></script><title></title></head><body><div id=”app”><div><!–头部–><header class=”site-header jumbotron”><div class=”container”><div class=”row”><div class=”col-xs-12″><h1></h1></div></div></div></header><!–主体部分–><!–bootstrap将页面分为12格,此处拆分为左4格,右8格–><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 col-sm-offset-2 col-sm-10″><a class=”pull-right”></a></div><p class=”user”><span></span><span></span></p></li><li class=”list-group-item”><div class=”handle col-sm-offset-2 col-sm-10″><a class=”pull-right”></a></div><p class=”user”><span></span><span></span></p></li></ul></div><!–md8 for List end –></div></div></div><!–app –></body></html>

 

页面截图:

 

 

 

3、拆分静态页面,

拆分静态页面,使其变成一个个静态组件。

Step1:是一个大的组件(App),里面包含各种组件。

Step2:页面内容可以拆分成 提交吐槽组件(Comment),吐槽回复组件(Comments)。

Step3:吐槽回复组件里面 可以对 每一条吐槽进行拆分,即每个吐槽为一个组件(Item)。

 

 

 

文件结构如下:

 

 

 

【主要文件与文件夹:】
index.html    主页面,所有组件操作均为其服务,在此处引入css、js文件
main.js       vue入口文件,从此处启动vue
App.vue       App.vue组件,项目的入口组件
components      里面保存各个小组件


【index.html】
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!--所有组件都是为index.html服务的,所以在此处引入css、js文件-->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <title>vuedemo</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vuedemo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>


【main.js】
import vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')


【App.vue】
<template>
    <div>
        <!--头部-->
        <header class="site-header jumbotron">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>欢迎来到吐槽大厅</h1>
                    </div>
                </div>
            </div>
        </header>

        <!--主体部分-->
        <!--bootstrap将页面分为12格,此处拆分为左4格,右8格-->
        <div class="container">
            <!--使用各组件-->
            <Comment></Comment>
            <Comments></Comments>
        </div>
    </div>
    <!--App -->
</template>

<script>
    // 引入各组件
    import Comment from './components/Comment.vue'
    import Comments from './components/Comments.vue'

    export default {
        name: 'app',
        // 注册各组件
        components: {
            Comment,
            Comments
        }
    }
</script>

<style>
</style>


【Comment.vue】
<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>
    <!--Comment -->
</template>

<script>
    export default{
        name: 'comment'
    }
</script>

<style>

</style>


【Comments.vue】
<template>
    <div class="col-md-8">
        <h3 class="reply">吐槽回复:</h3>
        <h2>暂无吐槽,点击左侧添加吐槽吧!</h2>
        <ul class="list-group">
            <Item></Item>
        </ul>
    </div>
    <!--md8 for List end -->
</template>

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

<style>

</style>


【Item.vue】
<template>
    <!--注意,需要使用div包裹,否则会报错-->
    <div>
        <li class="list-group-item">
            <div class="handle col-sm-offset-2 col-sm-10">
                <a class="pull-right">删除</a>
            </div>
            <p class="user"><span>Tom</span><span>说:</span></p>
        </li>
        <li class="list-group-item">
            <div class="handle col-sm-offset-2 col-sm-10">
                <a class="pull-right">删除</a>
            </div>
            <p class="user"><span>Tom</span><span>说:</span></p>
        </li>
    </div>
</template>

<script>
    export default{
        name: 'item'
    }
</script>

<style>

</style>
【主要文件与文件夹:】
index.html    主页面,所有组件操作均为其服务,在此处引入css、js文件
main.js       vue入口文件,从此处启动vue
App.vue       App.vue组件,项目的入口组件
components      里面保存各个小组件


【index.html】
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!--所有组件都是为index.html服务的,所以在此处引入css、js文件-->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <title>vuedemo</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vuedemo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>


【main.js】
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')


【App.vue】
<template>
    <div>
        <!--头部-->
        <header class="site-header jumbotron">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>欢迎来到吐槽大厅</h1>
                    </div>
                </div>
            </div>
        </header>

        <!--主体部分-->
        <!--bootstrap将页面分为12格,此处拆分为左4格,右8格-->
        <div class="container">
            <!--使用各组件-->
            <Comment></Comment>
            <Comments></Comments>
        </div>
    </div>
    <!--App -->
</template>

<script>
    // 引入各组件
    import Comment from './components/Comment.vue'
    import Comments from './components/Comments.vue'

    export default {
        name: 'app',
        // 注册各组件
        components: {
            Comment,
            Comments
        }
    }
</script>

<style>
</style>


【Comment.vue】
<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>
    <!--Comment -->
</template>

<script>
    export default{
        name: 'comment'
    }
</script>

<style>

</style>


【Comments.vue】
<template>
    <div class="col-md-8">
        <h3 class="reply">吐槽回复:</h3>
        <h2>暂无吐槽,点击左侧添加吐槽吧!</h2>
        <ul class="list-group">
            <Item></Item>
        </ul>
    </div>
    <!--md8 for List end -->
</template>

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

<style>

</style>


【Item.vue】
<template>
    <!--注意,需要使用div包裹,否则会报错-->
    <div>
        <li class="list-group-item">
            <div class="handle col-sm-offset-2 col-sm-10">
                <a class="pull-right">删除</a>
            </div>
            <p class="user"><span>Tom</span><span>说:</span></p>
        </li>
        <li class="list-group-item">
            <div class="handle col-sm-offset-2 col-sm-10">
                <a class="pull-right">删除</a>
            </div>
            <p class="user"><span>Tom</span><span>说:</span></p>
        </li>
    </div>
</template>

<script>
    export default{
        name: 'item'
    }
</script>

<style>

</style>

【主要文件与文件夹:】
index.html 主页面,所有组件操作均为其服务,在此处引入css、js文件
main.js vue入口文件,从此处启动vue
App.vue App.vue组件,项目的入口组件
components 里面保存各个小组件

【index.html】
<!DOCTYPE html><html lang=”en”><head><meta charset=”utf-8″><meta http-equiv=”X-UA-Compatible” content=”IE=edge”><meta name=”viewport” content=”width=device-width,initial-scale=1.0″><link rel=”icon” href=”<%= BASE_URL %>favicon.ico”><!–所有组件都是为index.html服务的,所以在此处引入css、js文件–><link href=”https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css” rel=”stylesheet”><title></title></head><body><noscript><strong></strong></noscript><div id=”app”></div><!– built files will be auto injected –></body></html>

【main.js】
import Vue from ‘vue’
import App from ‘./App.vue’

Vue.config.productionTip = false

new Vue({
render: h => h(App),
}).$mount(‘#app’)

【App.vue】
<template><div><!–头部–><header class=”site-header jumbotron”><div class=”container”><div class=”row”><div class=”col-xs-12″><h1></h1></div></div></div></header><!–主体部分–><!–bootstrap将页面分为12格,此处拆分为左4格,右8格–><div class=”container”><!–使用各组件–><Comment></Comment><Comments></Comments></div></div><!–App –></template><script>// 引入各组件 import Comment from ./components/Comment.vue
import Comments from
./components/Comments.vue

export default {
name:
app,
// 注册各组件 components: {
Comment,
Comments
}
}
</script><style></style>

【Comment.vue】
<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><!–Comment –></template><script>
export
default{
name:
comment
}
</script><style></style>

【Comments.vue】
<template><div class=”col-md-8″><h3 class=”reply”></h3><h2></h2><ul class=”list-group”><Item></Item></ul></div><!–md8 for List end –></template><script>
import Item from
./Item.vue

export default{
name:
comments,
components: {
Item
}
}
</script><style></style>

【Item.vue】
<template><!–注意,需要使用div包裹,否则会报错–><div><li class=”list-group-item”><div class=”handle col-sm-offset-2 col-sm-10″><a class=”pull-right”></a></div><p class=”user”><span></span><span></span></p></li><li class=”list-group-item”><div class=”handle col-sm-offset-2 col-sm-10″><a class=”pull-right”></a></div><p class=”user”><span></span><span></span></p></li></div></template><script>
export
default{
name:
item
}
</script><style></style>

 

拆分后效果与原静态页面一致。

 

 

 

 

4、组件间值的传递(组件间通信)

  静态页面上吐槽区的内容不会是写好的,是动态生成的,那么如何生成,就涉及到组件间的值的传递。通过props 来声明属性,使用data来传递数据(属性值),使用 v-bind 绑定属性。

【对上面代码进行修改】
App.vue              获取数据,将数据往吐槽区(Comments.vue)传
Comments.vue         接收App.vue传来的数据,将每条数据往Item.vue传
Item.vue             接收Comments.vue传来的数据并显示

要是一眼看不出来,可以下载个Bcompare软件,自行比较一下代码间的区别。

【App.vue】
<template>
    <div>
        <!--头部-->
        <header class="site-header jumbotron">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>欢迎来到吐槽大厅</h1>
                    </div>
                </div>
            </div>
        </header>

        <!--主体部分-->
        <!--bootstrap将页面分为12格,此处拆分为左4格,右8格-->
        <div class="container">
            <!--使用各组件-->
            <Comment></Comment>
                   <!--需使用v-bind绑定属性-->
            <Comments :contents="contents"></Comments>
        </div>
    </div>
    <!--App -->
</template>

<script>
    // 引入各组件
    import Comment from './components/Comment.vue'
    import Comments from './components/Comments.vue'

    export default {
        name: 'app',
        // 注册各组件
        components: {
            Comment,
            Comments
        },
        
        // 传递数据
        data(){
            return {
                contents:[
                    {name: 'tom', content: '妈妈,我想吃烤山药'},
                    {name: 'jarry', content: '吃,吃大块的'},
                    {name: 'jarry', content: '两块够不'},
                    {name: 'tom', content: '够了,妈妈真好,谢谢妈妈'},
                ]
            }
        }
    }
</script>

<style>
</style>


【Comments.vue】
<template>
    <div class="col-md-8">
        <h3 class="reply">吐槽回复:</h3>
        <ul class="list-group">
            <Item v-for="(content, index) in contents" :key="index" :content="content"></Item>
        </ul>
    </div>
    <!--md8 for List end -->
</template>

<script>
    import Item from './Item.vue'
    
    export default{
        name: 'comments',
        // 声明接收属性,此属性可以在该组件中使用
        props: ['contents'],  // 只指定属性名
        
        // 注册组件
        components: {
            Item
        }
    }
</script>

<style>

</style>


【Item.vue】
<template>
    <!--注意,需要使用div包裹,否则会报错-->
    <div>
        <li class="list-group-item">
            <div class="handle col-sm-offset-2 col-sm-10">
                <a class="pull-right">删除</a>
            </div>
            <p class="user"><span style="font-size: 18px;">{{content.name}}</span><span style="font-size: 18px;">说:</span>{{content.content}}</p>
        </li>
    </div>
</template>

<script>
    export default{
        name: 'item',
        props: {
            // 指定属性名以及属性值的类型
            content : Object
         }
    }
</script>

<style>

</style>
【对上面代码进行修改】
App.vue              获取数据,将数据往吐槽区(Comments.vue)传
Comments.vue         接收App.vue传来的数据,将每条数据往Item.vue传
Item.vue             接收Comments.vue传来的数据并显示

要是一眼看不出来,可以下载个Bcompare软件,自行比较一下代码间的区别。

【App.vue】
<template>
    <div>
        <!--头部-->
        <header class="site-header jumbotron">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>欢迎来到吐槽大厅</h1>
                    </div>
                </div>
            </div>
        </header>

        <!--主体部分-->
        <!--bootstrap将页面分为12格,此处拆分为左4格,右8格-->
        <div class="container">
            <!--使用各组件-->
            <Comment></Comment>
                   <!--需使用v-bind绑定属性-->
            <Comments :contents="contents"></Comments>
        </div>
    </div>
    <!--App -->
</template>

<script>
    // 引入各组件
    import Comment from './components/Comment.vue'
    import Comments from './components/Comments.vue'

    export default {
        name: 'app',
        // 注册各组件
        components: {
            Comment,
            Comments
        },
        
        // 传递数据
        data(){
            return {
                contents:[
                    {name: 'tom', content: '妈妈,我想吃烤山药'},
                    {name: 'jarry', content: '吃,吃大块的'},
                    {name: 'jarry', content: '两块够不'},
                    {name: 'tom', content: '够了,妈妈真好,谢谢妈妈'},
                ]
            }
        }
    }
</script>

<style>
</style>


【Comments.vue】
<template>
    <div class="col-md-8">
        <h3 class="reply">吐槽回复:</h3>
        <ul class="list-group">
            <Item v-for="(content, index) in contents" :key="index" :content="content"></Item>
        </ul>
    </div>
    <!--md8 for List end -->
</template>

<script>
    import Item from './Item.vue'
    
    export default{
        name: 'comments',
        // 声明接收属性,此属性可以在该组件中使用
        props: ['contents'],  // 只指定属性名
        
        // 注册组件
        components: {
            Item
        }
    }
</script>

<style>

</style>


【Item.vue】
<template>
    <!--注意,需要使用div包裹,否则会报错-->
    <div>
        <li class="list-group-item">
            <div class="handle col-sm-offset-2 col-sm-10">
                <a class="pull-right">删除</a>
            </div>
            <p class="user"><span style="font-size: 18px;">{{content.name}}</span><span style="font-size: 18px;">说:</span>{{content.content}}</p>
        </li>
    </div>
</template>

<script>
    export default{
        name: 'item',
        props: {
            // 指定属性名以及属性值的类型
            content : Object
         }
    }
</script>

<style>

</style>

【对上面代码进行修改】
App.vue 获取数据,将数据往吐槽区(Comments.vue)传
Comments.vue 接收App.vue传来的数据,将每条数据往Item.vue传
Item.vue 接收Comments.vue传来的数据并显示

要是一眼看不出来,可以下载个Bcompare软件,自行比较一下代码间的区别。

【App.vue】
<template><div><!–头部–><header class=”site-header jumbotron”><div class=”container”><div class=”row”><div class=”col-xs-12″><h1></h1></div></div></div></header><!–主体部分–><!–bootstrap将页面分为12格,此处拆分为左4格,右8格–><div class=”container”><!–使用各组件–><Comment></Comment><!–需使用v-bind绑定属性–><Comments :contents=”contents”></Comments></div></div><!–App –></template><script>// 引入各组件 import Comment from ./components/Comment.vue
import Comments from
./components/Comments.vue

export default {
name:
app,
// 注册各组件 components: {
Comment,
Comments
},

// 传递数据 data(){
return {
contents:[
{name:
tom, content: 妈妈,我想吃烤山药},
{name:
jarry, content: 吃,吃大块的},
{name:
jarry, content: 两块够不},
{name:
tom, content: 够了,妈妈真好,谢谢妈妈},
]
}
}
}
</script><style></style>

【Comments.vue】
<template><div class=”col-md-8″><h3 class=”reply”></h3><ul class=”list-group”><Item v-for=”(content, index) in contents” :key=”index” :content=”content”></Item></ul></div><!–md8 for List end –></template><script>
import Item from
./Item.vue

export default{
name:
comments,
// 声明接收属性,此属性可以在该组件中使用 props: [contents], // 只指定属性名// 注册组件 components: {
Item
}
}
</script><style></style>

【Item.vue】
<template><!–注意,需要使用div包裹,否则会报错–><div><li class=”list-group-item”><div class=”handle col-sm-offset-2 col-sm-10″><a class=”pull-right”></a></div><p class=”user”><span style=”font-size: 18px;”></span><span style=”font-size: 18px;”></span></p></li></div></template><script>
export
default{
name:
item,
props: {
// 指定属性名以及属性值的类型 content : Object
}
}
</script><style></style>

效果如下图:

 

 

 

5、动态交互–添加

  实现添加吐槽操作。

  使用v-on 绑定事件,使用v-model 实现数据的双向绑定,方法也可以使用 v-bind 绑定 并进行组件通信。

【对上面代码进行修改】
App.vue            定义增加吐槽的方法,并作为属性传递给Comment.vue组件
Comment.vue        接收属性,并定义添加数据的事件

【App.vue】
<template>
    <div>
        <!--头部-->
        <header class="site-header jumbotron">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>欢迎来到吐槽大厅</h1>
                    </div>
                </div>
            </div>
        </header>

        <!--主体部分-->
        <!--bootstrap将页面分为12格,此处拆分为左4格,右8格-->
        <div class="container">
            <!--使用各组件-->
            <Comment :addComment="addComment"></Comment>
            <!--需使用v-bind绑定属性-->
            <Comments :contents="contents"></Comments>
        </div>
    </div>
    <!--App -->
</template>

<script>
    // 引入各组件
    import Comment from './components/Comment.vue'
    import Comments from './components/Comments.vue'

    export default {
        name: 'app',
        // 注册各组件
        components: {
            Comment,
            Comments
        },
        
        // 传递数据
        data(){
            return {
                contents:[
                    {name: 'tom', content: '妈妈,我想吃烤山药'},
                    {name: 'jarry', content: '吃,吃大块的'},
                    {name: 'jarry', content: '两块够不'},
                    {name: 'tom', content: '够了,妈妈真好,谢谢妈妈'},
                ]
            }
        },
        
        // 操作数据的方法
        methods: {
            addComment(comment){
                // 在数组头部插入数据
                this.contents.unshift(comment);
            }
        }
    }
</script>

<style>
</style>


【Comment.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>
    <!--Comment -->
</template>

<script>
    export default{
        name: 'comment',
        data(){
            return {
                name : '',
                content : ''
            }
        },
        props:{
            // 定义属性类型、属性值类型、必须性
            addComment: { 
                type: Function,
                required: true
            }
        },
        methods: {
            add(){
                // step1:进行合法性检验
                const name = this.name.trim();
                const content = this.content.trim();
                if(!name || !content){
                    alert("输入内容不能为空");
                    return;
                }
                
                // step2:将name,content封装成一个comment(吐槽)对象
                const comment = {name, content};
                
                console.log(comment);
                // step3: 将comment 加入到 comments(吐槽区)
                this.addComment(comment);
                
                // step4:清空输入框
                this.name = '';
                this.content = '';
            }
        }
    }
</script>

<style>

</style>
【对上面代码进行修改】
App.vue            定义增加吐槽的方法,并作为属性传递给Comment.vue组件
Comment.vue        接收属性,并定义添加数据的事件

【App.vue】
<template>
    <div>
        <!--头部-->
        <header class="site-header jumbotron">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>欢迎来到吐槽大厅</h1>
                    </div>
                </div>
            </div>
        </header>

        <!--主体部分-->
        <!--bootstrap将页面分为12格,此处拆分为左4格,右8格-->
        <div class="container">
            <!--使用各组件-->
            <Comment :addComment="addComment"></Comment>
            <!--需使用v-bind绑定属性-->
            <Comments :contents="contents"></Comments>
        </div>
    </div>
    <!--App -->
</template>

<script>
    // 引入各组件
    import Comment from './components/Comment.vue'
    import Comments from './components/Comments.vue'

    export default {
        name: 'app',
        // 注册各组件
        components: {
            Comment,
            Comments
        },
        
        // 传递数据
        data(){
            return {
                contents:[
                    {name: 'tom', content: '妈妈,我想吃烤山药'},
                    {name: 'jarry', content: '吃,吃大块的'},
                    {name: 'jarry', content: '两块够不'},
                    {name: 'tom', content: '够了,妈妈真好,谢谢妈妈'},
                ]
            }
        },
        
        // 操作数据的方法
        methods: {
            addComment(comment){
                // 在数组头部插入数据
                this.contents.unshift(comment);
            }
        }
    }
</script>

<style>
</style>


【Comment.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>
    <!--Comment -->
</template>

<script>
    export default{
        name: 'comment',
        data(){
            return {
                name : '',
                content : ''
            }
        },
        props:{
            // 定义属性类型、属性值类型、必须性
            addComment: { 
                type: Function,
                required: true
            }
        },
        methods: {
            add(){
                // step1:进行合法性检验
                const name = this.name.trim();
                const content = this.content.trim();
                if(!name || !content){
                    alert("输入内容不能为空");
                    return;
                }
                
                // step2:将name,content封装成一个comment(吐槽)对象
                const comment = {name, content};
                
                console.log(comment);
                // step3: 将comment 加入到 comments(吐槽区)
                this.addComment(comment);
                
                // step4:清空输入框
                this.name = '';
                this.content = '';
            }
        }
    }
</script>

<style>

</style>

【对上面代码进行修改】
App.vue 定义增加吐槽的方法,并作为属性传递给Comment.vue组件
Comment.vue 接收属性,并定义添加数据的事件

【App.vue】
<template><div><!–头部–><header class=”site-header jumbotron”><div class=”container”><div class=”row”><div class=”col-xs-12″><h1></h1></div></div></div></header><!–主体部分–><!–bootstrap将页面分为12格,此处拆分为左4格,右8格–><div class=”container”><!–使用各组件–><Comment :addComment=”addComment”></Comment><!–需使用v-bind绑定属性–><Comments :contents=”contents”></Comments></div></div><!–App –></template><script>// 引入各组件 import Comment from ./components/Comment.vue
import Comments from
./components/Comments.vue

export default {
name:
app,
// 注册各组件 components: {
Comment,
Comments
},

// 传递数据 data(){
return {
contents:[
{name:
tom, content: 妈妈,我想吃烤山药},
{name:
jarry, content: 吃,吃大块的},
{name:
jarry, content: 两块够不},
{name:
tom, content: 够了,妈妈真好,谢谢妈妈},
]
}
},

// 操作数据的方法 methods: {
addComment(comment){
// 在数组头部插入数据this.contents.unshift(comment);
}
}
}
</script><style></style>

【Comment.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><!–Comment –></template><script>
export
default{
name:
comment,
data(){
return {
name :
,
content :

}
},
props:{
// 定义属性类型、属性值类型、必须性 addComment: {
type: Function,
required:
true
}
},
methods: {
add(){
// step1:进行合法性检验 const name =this.name.trim();
const content
=this.content.trim();
if(!name ||!content){
alert(
输入内容不能为空);
return;
}

// step2:将name,content封装成一个comment(吐槽)对象 const comment = {name, content};

console.log(comment);
// step3: 将comment 加入到 comments(吐槽区)this.addComment(comment);

// step4:清空输入框this.name =;
this.content =;
}
}
}
</script><style></style>

效果:

 

 

 

 

 

 

6、动态交互–删除

  进行删除操作。

  类似于添加操作。

【对上面文件进行修改】
App.vue             定义删除数据的方法,并将其作为属性传递给Comments.vue
Comments.vue        作为一个中间的组件,传递index以及删除方法
Item.vue            接收Comments.vue传递的属性,并定义删除事件


【App.vue】
<template>
    <div>
        <!--头部-->
        <header class="site-header jumbotron">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>欢迎来到吐槽大厅</h1>
                    </div>
                </div>
            </div>
        </header>

        <!--主体部分-->
        <!--bootstrap将页面分为12格,此处拆分为左4格,右8格-->
        <div class="container">
            <!--使用各组件-->
            <Comment :addComment="addComment"></Comment>
            <!--需使用v-bind绑定属性-->
            <Comments :contents="contents" :deleteComment="deleteComment"></Comments>
        </div>
    </div>
    <!--App -->
</template>

<script>
    // 引入各组件
    import Comment from './components/Comment.vue'
    import Comments from './components/Comments.vue'

    export default {
        name: 'app',
        // 注册各组件
        components: {
            Comment,
            Comments
        },
        
        // 传递数据
        data(){
            return {
                contents:[
                    {name: 'tom', content: '妈妈,我想吃烤山药'},
                    {name: 'jarry', content: '吃,吃大块的'},
                    {name: 'jarry', content: '两块够不'},
                    {name: 'tom', content: '够了,妈妈真好,谢谢妈妈'},
                ]
            }
        },
        
        // 操作数据的方法
        methods: {
            addComment(comment){
                // 在数组头部插入数据
                this.contents.unshift(comment);
            },
            deleteComment(index){
                // 删除指定下标的数据
                this.contents.splice(index, 1);
            }
        }
    }
</script>

<style>
</style>


【Comments.vue】
<template>
    <div class="col-md-8">
        <h3 class="reply">吐槽回复:</h3>
        <h3 v-show="contents.length === 0">暂无吐槽,点击左侧提交吐槽!!!</h3>
        <ul class="list-group">
            <Item v-for="(content, index) in contents" :key="index" :content="content" :deleteComment="deleteComment" :index="index"></Item>
        </ul>
    </div>
    <!--md8 for List end -->
</template>

<script>
    import Item from './Item.vue'

    export default {
        name: 'comments',
        // 声明接收属性,此属性可以在该组件中使用
        props: ['contents', 'deleteComment'], // 只指定属性名

        // 注册组件
        components: {
            Item
        }
    }
</script>

<style>

</style>


【Item.vue】
<template>
    <!--注意,需要使用div包裹,否则会报错-->
    <div>
        <li class="list-group-item">
            <div class="handle col-sm-offset-2 col-sm-10">
                <a class="pull-right" @click="deleteItem">删除</a>
            </div>
            <p class="user"><span style="font-size: 18px;">{{content.name}}</span><span style="font-size: 18px;">说:</span>{{content.content}}</p>
        </li>
    </div>
</template>

<script>
    export default{
        name: 'item',
        props: {
            // 指定属性名以及属性值的类型
            content : Object,
            deleteComment : Function,
            index : Number 
         },
         methods: {
             deleteItem() {
                 const {content, deleteComment, index} = this;
                 // 使用  反引号 + ${}, ES6模板字符串
                 if(window.confirm(`确定删除${content.name}的评论吗?`)){
                     deleteComment(index);
                 }
             }
         }
    }
</script>

<style>

</style>
【对上面文件进行修改】
App.vue             定义删除数据的方法,并将其作为属性传递给Comments.vue
Comments.vue        作为一个中间的组件,传递index以及删除方法
Item.vue            接收Comments.vue传递的属性,并定义删除事件


【App.vue】
<template>
    <div>
        <!--头部-->
        <header class="site-header jumbotron">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>欢迎来到吐槽大厅</h1>
                    </div>
                </div>
            </div>
        </header>

        <!--主体部分-->
        <!--bootstrap将页面分为12格,此处拆分为左4格,右8格-->
        <div class="container">
            <!--使用各组件-->
            <Comment :addComment="addComment"></Comment>
            <!--需使用v-bind绑定属性-->
            <Comments :contents="contents" :deleteComment="deleteComment"></Comments>
        </div>
    </div>
    <!--App -->
</template>

<script>
    // 引入各组件
    import Comment from './components/Comment.vue'
    import Comments from './components/Comments.vue'

    export default {
        name: 'app',
        // 注册各组件
        components: {
            Comment,
            Comments
        },
        
        // 传递数据
        data(){
            return {
                contents:[
                    {name: 'tom', content: '妈妈,我想吃烤山药'},
                    {name: 'jarry', content: '吃,吃大块的'},
                    {name: 'jarry', content: '两块够不'},
                    {name: 'tom', content: '够了,妈妈真好,谢谢妈妈'},
                ]
            }
        },
        
        // 操作数据的方法
        methods: {
            addComment(comment){
                // 在数组头部插入数据
                this.contents.unshift(comment);
            },
            deleteComment(index){
                // 删除指定下标的数据
                this.contents.splice(index, 1);
            }
        }
    }
</script>

<style>
</style>


【Comments.vue】
<template>
    <div class="col-md-8">
        <h3 class="reply">吐槽回复:</h3>
        <h3 v-show="contents.length === 0">暂无吐槽,点击左侧提交吐槽!!!</h3>
        <ul class="list-group">
            <Item v-for="(content, index) in contents" :key="index" :content="content" :deleteComment="deleteComment" :index="index"></Item>
        </ul>
    </div>
    <!--md8 for List end -->
</template>

<script>
    import Item from './Item.vue'

    export default {
        name: 'comments',
        // 声明接收属性,此属性可以在该组件中使用
        props: ['contents', 'deleteComment'], // 只指定属性名

        // 注册组件
        components: {
            Item
        }
    }
</script>

<style>

</style>


【Item.vue】
<template>
    <!--注意,需要使用div包裹,否则会报错-->
    <div>
        <li class="list-group-item">
            <div class="handle col-sm-offset-2 col-sm-10">
                <a class="pull-right" @click="deleteItem">删除</a>
            </div>
            <p class="user"><span style="font-size: 18px;">{{content.name}}</span><span style="font-size: 18px;">说:</span>{{content.content}}</p>
        </li>
    </div>
</template>

<script>
    export default{
        name: 'item',
        props: {
            // 指定属性名以及属性值的类型
            content : Object,
            deleteComment : Function,
            index : Number 
         },
         methods: {
             deleteItem() {
                 const {content, deleteComment, index} = this;
                 // 使用  反引号 + ${}, ES6模板字符串
                 if(window.confirm(`确定删除${content.name}的评论吗?`)){
                     deleteComment(index);
                 }
             }
         }
    }
</script>

<style>

</style>

【对上面文件进行修改】
App.vue 定义删除数据的方法,并将其作为属性传递给Comments.vue
Comments.vue 作为一个中间的组件,传递index以及删除方法
Item.vue 接收Comments.vue传递的属性,并定义删除事件

【App.vue】
<template><div><!–头部–><header class=”site-header jumbotron”><div class=”container”><div class=”row”><div class=”col-xs-12″><h1></h1></div></div></div></header><!–主体部分–><!–bootstrap将页面分为12格,此处拆分为左4格,右8格–><div class=”container”><!–使用各组件–><Comment :addComment=”addComment”></Comment><!–需使用v-bind绑定属性–><Comments :contents=”contents” :deleteComment=”deleteComment”></Comments></div></div><!–App –></template><script>// 引入各组件 import Comment from ./components/Comment.vue
import Comments from
./components/Comments.vue

export default {
name:
app,
// 注册各组件 components: {
Comment,
Comments
},

// 传递数据 data(){
return {
contents:[
{name:
tom, content: 妈妈,我想吃烤山药},
{name:
jarry, content: 吃,吃大块的},
{name:
jarry, content: 两块够不},
{name:
tom, content: 够了,妈妈真好,谢谢妈妈},
]
}
},

// 操作数据的方法 methods: {
addComment(comment){
// 在数组头部插入数据this.contents.unshift(comment);
},
deleteComment(index){
// 删除指定下标的数据this.contents.splice(index, 1);
}
}
}
</script><style></style>

【Comments.vue】
<template><div class=”col-md-8″><h3 class=”reply”></h3><h3 v-show=”contents.length === 0″></h3><ul class=”list-group”><Item v-for=”(content, index) in contents” :key=”index” :content=”content” :deleteComment=”deleteComment” :index=”index”></Item></ul></div><!–md8 for List end –></template><script>
import Item from
./Item.vue

export default {
name:
comments,
// 声明接收属性,此属性可以在该组件中使用 props: [contents, deleteComment], // 只指定属性名// 注册组件 components: {
Item
}
}
</script><style></style>

【Item.vue】
<template><!–注意,需要使用div包裹,否则会报错–><div><li class=”list-group-item”><div class=”handle col-sm-offset-2 col-sm-10″><a class=”pull-right” @click=”deleteItem”></a></div><p class=”user”><span style=”font-size: 18px;”></span><span style=”font-size: 18px;”></span></p></li></div></template><script>
export
default{
name:
item,
props: {
// 指定属性名以及属性值的类型 content : Object,
deleteComment : Function,
index : Number
},
methods: {
deleteItem() {
const {content, deleteComment, index}
=this;
// 使用 反引号 + ${}, ES6模板字符串if(window.confirm(`确定删除${content.name}的评论吗?`)){
deleteComment(index);
}
}
}
}
</script><style></style>

 

运行结果:

 

 

 

 

 

 

7、完整代码

(1)项目结构以及修改的文件

 

 

(2)代码

【index.html】
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!--所有组件都是为index.html服务的,所以在此处引入css、js文件-->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <title>vuedemo</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vuedemo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>


【main.js】
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')


【App.vue】
<template>
    <div>
        <!--头部-->
        <header class="site-header jumbotron">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>欢迎来到吐槽大厅</h1>
                    </div>
                </div>
            </div>
        </header>

        <!--主体部分-->
        <!--bootstrap将页面分为12格,此处拆分为左4格,右8格-->
        <div class="container">
            <!--使用各组件-->
            <Comment :addComment="addComment"></Comment>
            <!--需使用v-bind绑定属性-->
            <Comments :contents="contents" :deleteComment="deleteComment"></Comments>
        </div>
    </div>
    <!--App -->
</template>

<script>
    // 引入各组件
    import Comment from './components/Comment.vue'
    import Comments from './components/Comments.vue'

    export default {
        name: 'app',
        // 注册各组件
        components: {
            Comment,
            Comments
        },
        
        // 传递数据
        data(){
            return {
                contents:[
                    {name: 'tom', content: '妈妈,我想吃烤山药'},
                    {name: 'jarry', content: '吃,吃大块的'},
                    {name: 'jarry', content: '两块够不'},
                    {name: 'tom', content: '够了,妈妈真好,谢谢妈妈'},
                ]
            }
        },
        
        // 操作数据的方法
        methods: {
            addComment(comment){
                // 在数组头部插入数据
                this.contents.unshift(comment);
            },
            deleteComment(index){
                // 删除指定下标的数据
                this.contents.splice(index, 1);
            }
        }
    }
</script>

<style>
</style>


【Comment.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>
    <!--Comment -->
</template>

<script>
    export default{
        name: 'comment',
        data(){
            return {
                name : '',
                content : ''
            }
        },
        props:{
            // 定义属性类型、属性值类型、必须性
            addComment: { 
                type: Function,
                required: true
            }
        },
        methods: {
            add(){
                // step1:进行合法性检验
                const name = this.name.trim();
                const content = this.content.trim();
                if(!name || !content){
                    alert("输入内容不能为空");
                    return;
                }
                
                // step2:将name,content封装成一个comment(吐槽)对象
                const comment = {name, content};
                
                console.log(comment);
                // step3: 将comment 加入到 comments(吐槽区)
                this.addComment(comment);
                
                // step4:清空输入框
                this.name = '';
                this.content = '';
            }
        }
    }
</script>

<style>

</style>


【Comments.vue】
<template>
    <div class="col-md-8">
        <h3 class="reply">吐槽回复:</h3>
        <h3 v-show="contents.length === 0">暂无吐槽,点击左侧提交吐槽!!!</h3>
        <ul class="list-group">
            <Item v-for="(content, index) in contents" :key="index" :content="content" :deleteComment="deleteComment" :index="index"></Item>
        </ul>
    </div>
    <!--md8 for List end -->
</template>

<script>
    import Item from './Item.vue'

    export default {
        name: 'comments',
        // 声明接收属性,此属性可以在该组件中使用
        props: ['contents', 'deleteComment'], // 只指定属性名

        // 注册组件
        components: {
            Item
        }
    }
</script>

<style>

</style>


【Item.vue】
<template>
    <!--注意,需要使用div包裹,否则会报错-->
    <div>
        <li class="list-group-item">
            <div class="handle col-sm-offset-2 col-sm-10">
                <a class="pull-right" @click="deleteItem">删除</a>
            </div>
            <p class="user"><span style="font-size: 18px;">{{content.name}}</span><span style="font-size: 18px;">说:</span>{{content.content}}</p>
        </li>
    </div>
</template>

<script>
    export default{
        name: 'item',
        props: {
            // 指定属性名以及属性值的类型
            content : Object,
            deleteComment : Function,
            index : Number 
         },
         methods: {
             deleteItem() {
                 const {content, deleteComment, index} = this;
                 // 使用  反引号 + ${}, ES6模板字符串
                 if(window.confirm(`确定删除${content.name}的评论吗?`)){
                     deleteComment(index);
                 }
             }
         }
    }
</script>

<style>

</style>
【index.html】
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!--所有组件都是为index.html服务的,所以在此处引入css、js文件-->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <title>vuedemo</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vuedemo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>


【main.js】
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')


【App.vue】
<template>
    <div>
        <!--头部-->
        <header class="site-header jumbotron">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>欢迎来到吐槽大厅</h1>
                    </div>
                </div>
            </div>
        </header>

        <!--主体部分-->
        <!--bootstrap将页面分为12格,此处拆分为左4格,右8格-->
        <div class="container">
            <!--使用各组件-->
            <Comment :addComment="addComment"></Comment>
            <!--需使用v-bind绑定属性-->
            <Comments :contents="contents" :deleteComment="deleteComment"></Comments>
        </div>
    </div>
    <!--App -->
</template>

<script>
    // 引入各组件
    import Comment from './components/Comment.vue'
    import Comments from './components/Comments.vue'

    export default {
        name: 'app',
        // 注册各组件
        components: {
            Comment,
            Comments
        },
        
        // 传递数据
        data(){
            return {
                contents:[
                    {name: 'tom', content: '妈妈,我想吃烤山药'},
                    {name: 'jarry', content: '吃,吃大块的'},
                    {name: 'jarry', content: '两块够不'},
                    {name: 'tom', content: '够了,妈妈真好,谢谢妈妈'},
                ]
            }
        },
        
        // 操作数据的方法
        methods: {
            addComment(comment){
                // 在数组头部插入数据
                this.contents.unshift(comment);
            },
            deleteComment(index){
                // 删除指定下标的数据
                this.contents.splice(index, 1);
            }
        }
    }
</script>

<style>
</style>


【Comment.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>
    <!--Comment -->
</template>

<script>
    export default{
        name: 'comment',
        data(){
            return {
                name : '',
                content : ''
            }
        },
        props:{
            // 定义属性类型、属性值类型、必须性
            addComment: { 
                type: Function,
                required: true
            }
        },
        methods: {
            add(){
                // step1:进行合法性检验
                const name = this.name.trim();
                const content = this.content.trim();
                if(!name || !content){
                    alert("输入内容不能为空");
                    return;
                }
                
                // step2:将name,content封装成一个comment(吐槽)对象
                const comment = {name, content};
                
                console.log(comment);
                // step3: 将comment 加入到 comments(吐槽区)
                this.addComment(comment);
                
                // step4:清空输入框
                this.name = '';
                this.content = '';
            }
        }
    }
</script>

<style>

</style>


【Comments.vue】
<template>
    <div class="col-md-8">
        <h3 class="reply">吐槽回复:</h3>
        <h3 v-show="contents.length === 0">暂无吐槽,点击左侧提交吐槽!!!</h3>
        <ul class="list-group">
            <Item v-for="(content, index) in contents" :key="index" :content="content" :deleteComment="deleteComment" :index="index"></Item>
        </ul>
    </div>
    <!--md8 for List end -->
</template>

<script>
    import Item from './Item.vue'

    export default {
        name: 'comments',
        // 声明接收属性,此属性可以在该组件中使用
        props: ['contents', 'deleteComment'], // 只指定属性名

        // 注册组件
        components: {
            Item
        }
    }
</script>

<style>

</style>


【Item.vue】
<template>
    <!--注意,需要使用div包裹,否则会报错-->
    <div>
        <li class="list-group-item">
            <div class="handle col-sm-offset-2 col-sm-10">
                <a class="pull-right" @click="deleteItem">删除</a>
            </div>
            <p class="user"><span style="font-size: 18px;">{{content.name}}</span><span style="font-size: 18px;">说:</span>{{content.content}}</p>
        </li>
    </div>
</template>

<script>
    export default{
        name: 'item',
        props: {
            // 指定属性名以及属性值的类型
            content : Object,
            deleteComment : Function,
            index : Number 
         },
         methods: {
             deleteItem() {
                 const {content, deleteComment, index} = this;
                 // 使用  反引号 + ${}, ES6模板字符串
                 if(window.confirm(`确定删除${content.name}的评论吗?`)){
                     deleteComment(index);
                 }
             }
         }
    }
</script>

<style>

</style>

【index.html】
<!DOCTYPE html><html lang=”en”><head><meta charset=”utf-8″><meta http-equiv=”X-UA-Compatible” content=”IE=edge”><meta name=”viewport” content=”width=device-width,initial-scale=1.0″><link rel=”icon” href=”<%= BASE_URL %>favicon.ico”><!–所有组件都是为index.html服务的,所以在此处引入css、js文件–><link href=”https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css” rel=”stylesheet”><title></title></head><body><noscript><strong></strong></noscript><div id=”app”></div><!– built files will be auto injected –></body></html>

【main.js】
import Vue from ‘vue’
import App from ‘./App.vue’

Vue.config.productionTip = false

new Vue({
render: h => h(App),
}).$mount(‘#app’)

【App.vue】
<template><div><!–头部–><header class=”site-header jumbotron”><div class=”container”><div class=”row”><div class=”col-xs-12″><h1></h1></div></div></div></header><!–主体部分–><!–bootstrap将页面分为12格,此处拆分为左4格,右8格–><div class=”container”><!–使用各组件–><Comment :addComment=”addComment”></Comment><!–需使用v-bind绑定属性–><Comments :contents=”contents” :deleteComment=”deleteComment”></Comments></div></div><!–App –></template><script>// 引入各组件 import Comment from ./components/Comment.vue
import Comments from
./components/Comments.vue

export default {
name:
app,
// 注册各组件 components: {
Comment,
Comments
},

// 传递数据 data(){
return {
contents:[
{name:
tom, content: 妈妈,我想吃烤山药},
{name:
jarry, content: 吃,吃大块的},
{name:
jarry, content: 两块够不},
{name:
tom, content: 够了,妈妈真好,谢谢妈妈},
]
}
},

// 操作数据的方法 methods: {
addComment(comment){
// 在数组头部插入数据this.contents.unshift(comment);
},
deleteComment(index){
// 删除指定下标的数据this.contents.splice(index, 1);
}
}
}
</script><style></style>

【Comment.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><!–Comment –></template><script>
export
default{
name:
comment,
data(){
return {
name :
,
content :

}
},
props:{
// 定义属性类型、属性值类型、必须性 addComment: {
type: Function,
required:
true
}
},
methods: {
add(){
// step1:进行合法性检验 const name =this.name.trim();
const content
=this.content.trim();
if(!name ||!content){
alert(
输入内容不能为空);
return;
}

// step2:将name,content封装成一个comment(吐槽)对象 const comment = {name, content};

console.log(comment);
// step3: 将comment 加入到 comments(吐槽区)this.addComment(comment);

// step4:清空输入框this.name =;
this.content =;
}
}
}
</script><style></style>

【Comments.vue】
<template><div class=”col-md-8″><h3 class=”reply”></h3><h3 v-show=”contents.length === 0″></h3><ul class=”list-group”><Item v-for=”(content, index) in contents” :key=”index” :content=”content” :deleteComment=”deleteComment” :index=”index”></Item></ul></div><!–md8 for List end –></template><script>
import Item from
./Item.vue

export default {
name:
comments,
// 声明接收属性,此属性可以在该组件中使用 props: [contents, deleteComment], // 只指定属性名// 注册组件 components: {
Item
}
}
</script><style></style>

【Item.vue】
<template><!–注意,需要使用div包裹,否则会报错–><div><li class=”list-group-item”><div class=”handle col-sm-offset-2 col-sm-10″><a class=”pull-right” @click=”deleteItem”></a></div><p class=”user”><span style=”font-size: 18px;”></span><span style=”font-size: 18px;”></span></p></li></div></template><script>
export
default{
name:
item,
props: {
// 指定属性名以及属性值的类型 content : Object,
deleteComment : Function,
index : Number
},
methods: {
deleteItem() {
const {content, deleteComment, index}
=this;
// 使用 反引号 + ${}, ES6模板字符串if(window.confirm(`确定删除${content.name}的评论吗?`)){
deleteComment(index);
}
}
}
}
</script><style></style>

运行结果此处不再重复截图,与上述截图相同。

 

» 本文来自:前端开发者 » 《vue小案例–简易评论区_旧址_前端开发者》
» 本文链接地址:https://www.rokub.com/73601.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!