Vue.js入门学习（2）

最新推荐文章于 2024-06-12 08:41:10 发布

SophiaWoo

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量865

点赞数

分类专栏：大二暑假学习日志文章标签： vue 实例 mvvm 源码 vue.js

本文链接：https://blog.csdn.net/sophiawoo/article/details/51954535

版权

大二暑假学习日志专栏收录该内容

5 篇文章 0 订阅

订阅专栏

阅读完官网文档，我以网上一个简单demo（Vue Chat）为例，学习如何别人是如何使用Vue.js进行组件化开发的。完整的项目地址如下：https://github.com/coffcer/vue-chat。大家可以对照着项目源码进行分析学习。

demo实现的效果如图：

该项目有一个顶级组件app.vue，挂载在id为chat的div块中。src/main.js是项目的entry，在这里导入app组件，并创建一个Vue的根实例。

<body>
    <div id="chat"></div>
    <script src="dist/vue.js"></script>
    <script src="dist/main.js"></script>
</body>

分析效果图，我们可以很快的把界面分为左右两栏：在左栏（sidebar），又分为个人信息、聊天列表上下两大部分；右栏（main）分为消息记录和聊天输入框上下两部分。因此，在app.vue中，我们不妨将具体的编码任务交给4个子组件去完成：card、list、message、text。

<template>
    <div>
        <div class="sidebar">
            <card :user="user" :search.sync="search"></card>
            <list :user-list="userList" :session="session" :session-index.sync="sessionIndex" :search="search"></list>
        </div>
        <div class="main">
            <message :session="session" :user="user" :user-list="userList"></message> 
            <text :session="session"></text>
        </div>
    </div>
</template>

在具体看每一个子组件前，先来看app.vue对数据的一些处理。app.vue导入了store.js文件，而store.js使用localStorage预存了一些伪数据，暴露了fetch和save两个方法，以供前端测试使用。（在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage，他们的区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会保存。）app.vue获取了预存的登录用户、用户列表、会话列表信息，并定义了搜索关键词search、选中的会话列表序号sessionIndex，供子组件进行通信。根据sessionList和sessionIndex动态获取当前的会话session。而当sessionList改变时，则将信息保存到localStorage中。

(这里有bug，用户列表和会话列表的顺序要保持一致)

    export default {
        el: '#chat',
        data () {
            let serverData = store.fetch();

            return {
                // 登录用户
                user: serverData.user,
                // 用户列表
                userList: serverData.userList,
                // 会话列表
                sessionList: serverData.sessionList,
                // 搜索key
                search: '',
                // 选中的会话Index
                sessionIndex: 0
            };
        },
        computed: {
            session () {
                return this.sessionList[this.sessionIndex];
            }
        },
        watch: {
            // 每当sessionList改变时，保存到localStorage中
            sessionList: {
                deep: true,
                handler () {
                    store.save({
                        user: this.user,
                        userList: this.userList,
                        sessionList: this.sessionList
                    });
                }
            }
        },
        components: {
            card, list, text, message
        }
    };

下面具体来看看每一个子组件。

card：

父组件向card传入了两个参数，user和search。要注意的是，props默认是单向绑定，由父组件传递参数给子组件；显示定义为sync双向绑定，子组件可以将输入的参数search关键词返回来交给userList筛选列表。在card.vue中，v-model双向绑定search。

<template>
    <div class="m-card">
        <header>
            <img class="avatar" width="40" height="40" :alt="user.name" :src="user.img">
            <p class="name">{{user.name}}</p>
        </header>
        <footer>
            <input class="search" type="text" placeholder="search user..." v-model="search">
        </footer>
    </div>
</template>

list：

主要完成下面几件事：使用v-for渲染用户列表；定义了select方法，对用户点击的对话用户完成了选定（修改sessionIndex，并增加active类使之突出显示）；定义了search过滤器，对搜索关键词进行筛选。注意sessionIndex也是双向绑定，在list的select方法修改后，传回给父组件动态计算当前session。

<template>
    <div class="m-list">
        <ul>
            <li v-for="item in userList | search" :class="{ active: session.userId === item.id }" @click="select(item)">
                <img class="avatar"  width="30" height="30" :alt="item.name" :src="item.img">
                <p class="name">{{item.name}}</p>
            </li>
        </ul>
    </div>
</template>

message：

使用v-for渲染会话列表，用到了avatar筛选用户头像、time过滤时间显示格式两个filter。和上面组件类似，没有什么特别的。

text：

在每次按键（@keyon）调用inputing方法，判断是否为发送信息，并进行处理。

完整的项目地址如下：https://github.com/coffcer/vue-chat

SophiaWoo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js入门学习（2）

阅读完官网文档，我以网上一个简单demo（Vue Chat）为例，学习如何别人是如何使用Vue.js进行组件化开发的。完整的项目地址如下：https://github.com/coffcer/vue-chat。大家可以对照着项目源码进行分析学习。demo实现的效果如图：该项目有一个顶级组件app.vue，挂载在id为chat的div块中。src/main.js是项目的ent
复制链接

扫一扫