您的位置：首页 > 产品设计 > UI/UE

Vue.js入门学习（2）

2016-07-19 11:48 831 查看

阅读完官网文档，我以网上一个简单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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue 实例 mvvm 源码 vue.js

相关文章推荐

新的分享

章节导航