Vue.component("chat", {
template: "#chatTemplate",
data: function () {
return {
messages: [
{
sender: "Vaysa",
date: "21.02.17:17:25:13",
text: "Привет!",
isRead: true,
show: true
},
{
sender: "Petya",
date: "21.02.17:17:25:50",
text: "Ну привет!",
isRead: false,
show: true
},
{
sender: "Dima",
date: "21.02.17:17:27:10",
text: "ПРИВЕТ ЛОХИ!!!",
isRead: false,
show: false
}
],
online: [
{
name: "Petya",
date: "21.02.17:16:13:01"
},
{
name: "Vaysa",
date: "21.02.17:17:24:06"
}
],
mute: [
"Dima"
]
}
},
methods: {
sendMessage: function () {
alert(this.mute[0])
},
removeMessage: function () {
},
editMessage: function () {
}
}
})
new Vue({
el: '#main',
data: {
message: 'Hello Vue!'
}
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Главная</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<title>Главная</title>
</head>
<body>
<div id="main" class="wrapper">
<chat></chat>
<template id="chatTemplate">
<section class="chat">
<div class="chat__messages">
<ul>
<li v-for="msg in messages"></li>
</ul>
</div>
</section>
</template>
</div>
<script src="js/vue.min.js"></script>
<script src="js/main.min.js"></script>
</body>
</html>
</body>
</html>
<script type="text/x-template" id="chatTemplate">
<section class="chat">
<div class="chat__messages">
<ul>
<li v-for="msg in messages"></li>
</ul>
</div>
</section>
</script>
Простой
Простой
