Cara menggunakan vuejs untuk melaksanakan fungsi komen

Cara menggunakan vuejs untuk melaksanakan fungsi ulasan: 1. Gunakan komponen kandungan artikel untuk mengikat obj 2. Laksanakan fungsi ulasan melalui komponen commemt-content.

Persekitaran pengendalian artikel ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Bagaimana untuk menggunakan vuejs untuk melaksanakan fungsi ulasan?

Vue.js melaksanakan fungsi ulasan artikel dan ulasan balas:

Saya pada asalnya mahu Saya menggunakan jed untuk memaparkan halaman ini dan bahagian komen menggunakan vue, tetapi selepas memikirkannya, saya mendapati ia menyusahkan Pada akhirnya, saya memutuskan untuk menggunakan keseluruhan komponen vue untuk melengkapkannya.
Pergi dahulu ke demo dalam talian: http://jsbin.com/ceqifo/1/edit?js,output

Kemudian pergi ke pemaparan

Anda boleh mengulas terus dan klik pada ulasan orang lain untuk membalas ulasan orang lain.

html

<div id="comment">
 <article-content v-bind:article="article"></article-content>
 <commemt-content v-bind:comment="comment" v-on:change="changCommmer"></commemt-content>
 <comment-textarea v-bind:type="type" v-bind:name="oldComment" v-on:submit="addComment" v-on:canel="canelCommit"></comment-textarea>
</div>

Data semuanya terikat oleh komponen akar. Beberapa acara turut dipantau di sini.

Kemudian mari kita bincangkan sesuatu yang lebih mudah dahulu, , komponen kotak teks.

Vue.component('commentTextarea',{
 template:'\
 <div class="commentBox">\
 <h3>发表评论</h3>\
 <b v-if="type">你回复 {{name}}</b>\
 <textarea name="" value="请填写评论内容" v-model="commentText"></textarea>\
 <button class="btn" @click="addComment">发表</button>\
 <button class="btn" @click="canelComment">取消</button>\
 </div>&#39;,
 props: [&#39;type&#39;,&#39;name&#39;],
 data: function(){
 return {commentText:""}
 },
 methods: {
 addComment: function() {
 this.$emit("submit",this.commentText);
 this.commentText = "";
 },
 canelComment: function() {
 this.$emit("canel");
 this.commentText = "";
 }
 }
});

taip bermakna jika anda mengklik pada ulasan orang lain, kotak gesaan "Anda membalas xxx" akan dipaparkan Ini kerana terdapat komunikasi silang komponen dan kedua-dua komponen itu bukan induk-. komponen kanak-kanak tetapi komponen adik-beradik saya meletakkan Komunikasi digantung pada harta komponen induk untuk melaksanakan komunikasi.

Kandungan dalam kotak teks terikat dua hala dengan model v Jika OK diklik, acara addComment dicetuskan dan kandungan teks dihantar kepada komponen induk, yang akan mendengar acara tersebut. .

komponen commemt-content – ​​​​comment content

Mula-mula tentukan format json

comment: [
 {
 name: "有毒的黄同学", //评论人名字
 time: "2016-08-17", 
 content: "好,讲得非常好，good",
 reply: [ //回复评论的信息，是一个数组，如果没内容就是一个空数组
 {
 responder: "傲娇的", //评论者
 reviewers: "有毒的黄同学", //被评论者
 time: "2016-09-05",
 content: "你说得对"
 }
 }
 ]

Mari kita lihat komponen commemt-content

Vue.component('commemt-content',{
 template:'\
 <div class="commentBox">\
 <h3>评论</h3>\
 <p v-if="comment.length==0">暂无评论，我来发表第一篇评论！</p>\
 <div v-else>\
 <div class="comment" v-for="(item,index) in comment" v-bind:index="index" >\
 <b>{{item.name}}<span>{{item.time}}</span></b>\
 <p @click="changeCommenter(item.name,index)">{{item.content}}</p>\
 <div v-if="item.reply.length > 0">\
  <div class="reply" v-for="reply in item.reply">\
  <b>{{reply.responder}}  回复  {{reply.reviewers}}<span>{{reply.time}}</span></b>\
  <p @click="changeCommenter(reply.responder,index)"">{{reply.content}}</p>\
  </div>\
 </div>\
 </div>\
 </div>\
 </div>&#39;,
 props: [&#39;comment&#39;],
 methods: {
 changeCommenter: function(name,index) {
 this.$emit("change",name,index);
 }
 }
});

Jika tiada kandungan, ia akan memaparkan "Belum ada komen, saya akan siarkan komen pertama!". Kalau ada isi, mulalah meredah. Kerana anda perlu mengetahui bilangan komen apabila mengklik padanya, setiap ulasan perlu terikat dengan v-bind:index="index"

Apabila ia datang kepada ulasan kedua, ia masih perlu untuk melintasi tatasusunan balasan dan mengikat pengikatan. Kerana walaupun kandungan diklik, ia ditambahkan ke bahagian bawah ulasan peringkat pertama, jadi saya mengikat dua peristiwa klik pada acara yang sama. Cuma nama yang diluluskan adalah berbeza Indeks di belakangnya ialah indeks ulasan peringkat pertama.

Peristiwa changeCommenter mencetuskan perubahan dan komponen induk mendengar serta melakukan kelakuan yang sepadan.

Komponen induk

var comment = new Vue({
 el: "#comment",
 data: {
 commenter: "session", //评论人，这里会从session拿
 type: 0, //0为评论作者1为评论别人的评论
 oldComment: null, //久评论者的名字
 chosedIndex: -1, //被选中的评论的index
 article: {
 title: "当归泡水喝的九大功效",
 time: "2016-07-12",
 read:50,
 content: ""
 },
 comment: [] //评论内容
 },
 methods: {
 //添加评论
 addComment: function(data) {
 if(this.type == 0) {
 this.comment.push({
  name: 'session',
  time: getTime(),
  content: data,
  reply: []
 });
 //服务器端
 }else if(this.type == 1){
 this.comment[this.chosedIndex].reply.push({
  responder: 'session',
  reviewers:this.comment[this.chosedIndex].name,
  time: getTime(),
  content: data
 });
 this.type = 0;
 }
 },
 //监听到了点击了别人的评论
 changCommmer: function(name,index) {
 this.oldComment = name;
 this.chosedIndex = index;
 this.type = 1;
 },
 //监听到了取消评论
 canelCommit: function() {
 this.type = 0;
 }
 }
})

data di sana. . . Ia benar-benar sukar untuk dinamakan. . . pengulas ialah nama log masuk semasa, yang akan diperolehi daripada jenis sesi adalah untuk melihat sama ada komen pengarang ulasan atau komen orang lain ialah nama pengulas (ia sepatutnya id apabila sebenarnya disimpan); mengklik Indeks komen.

canelCommit adalah untuk memantau acara pembatalan ulasan Ini digunakan jika saya mengklik pada ulasan orang lain tetapi tiba-tiba saya ingin menukar pengarang ulasan. Jadi set type=0;

changCommmer memantau apabila seseorang mengklik pada ulasan dan ingin membalas ulasan tersebut. Iaitu, taip=1.

addComment adalah untuk mendengar acara tambah ulasan. Mengikut nilai jenis, tolak tatasusunan yang sepadan. Juga ingat untuk menyambung dengan pangkalan data di sini. Terdapat dua cara untuk memindahkan data Di sini, ia dibahagikan kepada dua URL atau satu mengikut jenis, yang bergantung pada reka bentuk jadual. Selepas saya mereka bentuk jadual esok, saya akan menambah permintaan http untuk melengkapkan fungsi komen.

Ini adalah penghujung penggal. Saya benar-benar takut gagal dalam peperiksaan.

Untuk menambah:

Memandangkan ia adalah kali pertama mereka bentuk struktur jadual pangkalan data sendiri, ia sangat bermasalah.
Kemas kini, struktur jadual yang betul ialah setiap ulasan mempunyai idnya sendiri. Terdapat atribut parentId yang lalai kepada null komen, parentId ialah id komen itu. Selepas akhirnya mengetahui setiap bahagian data, obj dipasang berdasarkan sama ada terdapat parentId di dalamnya, dsb., dan dihantar ke hujung hadapan. Jika anda secara langsung mengumpulkan obj ini, gelung for akan menjadi 3 kali, jadi. . . Saya bercadang untuk menggunakan hash dalam struktur data dan bukannya menggunakan gelung for berkali-kali. Selesaikan hujung minggu ini dan ia akan menjadi artikel seterusnya.

Namun, selepas saya memikirkannya. Jika anda hanya menggunakan pencincangan, anda tidak boleh mengisih berdasarkan masa. Oleh kerana cincangan dimasukkan berdasarkan nilai id%length, tiada masa untuk mengisih. Jika anda menggabungkan obj ini secara langsung berdasarkan tatasusunan yang dikembalikan dengan menanyakan pangkalan data, id yang dimasukkan sebelum ini mesti berada di hadapan, jadi terdapat susunan masa. Masalah struktur data ini sebenarnya tidak mudah.

Disyorkan: "5 pilihan tutorial video vue.js terkini"

Atas ialah kandungan terperinci Cara menggunakan vuejs untuk melaksanakan fungsi komen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!