[Vue系列] Vue功能的简单实现

最新推荐文章于 2024-01-06 18:41:49 发布
置顶 最新推荐文章于 2024-01-06 18:41:49 发布
阅读量1.3k 收藏 3
点赞数 2
分类专栏： 前端 文章标签： Vue MVC MVVM 双向数据绑定
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whitsats/article/details/89285288
版权

文章目录

Vue功能的简单实现

第一章 前言

最近在进行Vue的教学工作,为了能够更好的在小兄弟面前显摆显摆,我准备在教学中加入对Vue功能的原生实现环节,也将自己理解的过程写入博客,作为记录.

第二章 MVC和MVVM

在Vue中,数据是核心,Vue让我们更加关注数据本身而不用理会它渲染和实现的过程.
Vue是一个典型的MV-VM框架,是MVC的进一步发展.在解释MVVM框架之前,我们首先要了解MVC是什么

2.1 MVC

MVC 模式代表 Model-View-Controller（模型-视图-控制器） 模式。这种模式用于应用程序的分层开发。

  • Model(模型) - 是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象在数据库中存取数据。
  • View(视图) - 视图代表模型包含的数据的可视化。
  • Controller(控制器) - 控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开。

由于View层,也就是为我们的用户呈现的页面混合了HTML、CSS和JavaScript，而且页面众多，所以，代码的组织和维护难度其实很复杂.

最早的前端页面其实就是服务器上已经编写好的,内容完全静态的页面,用户在请求时,会直接返回.

但是随着业务的复杂和用户交互的需求,完全静态的页面不能够满足用户的需求.我们无法对成千上万的用户提供成千上万个不同的静态页面.

于是人们首先想到的是使用C/C++等语言,通过动态编译HTML的方式,为用户提供不同的编译完成的HTML页面.这种技术也叫做CGI(Common Gateway Interface)

CGI的效率比较低,因为我们需要在用户请求时,完整的编译一遍需要返回的页面,用户量多的时候也会不堪负重.

后来人们发现,对于用户返回的HTML,其实只有一部分数据是会改变的,而HTML的基本内容一般情况下不需要重新编译.

于是ASP,JSP,PHP应运而生,其中PHP以标记语言的特性,能够和HTML混写,服务器在接收请求之后,PHP解释器不会理会除了PHP标签内部以外的内容,而将各异性的内容编译输出即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<?php echo $name?>
	</body>
</html>

请注意,这是一个php文件,混写了HTML

这就使得开发变得更为便利了起来.因此,直到现在,世界范围内排名前一千万的网站中,仍有近百分之八十的网站在使用PHP技术,这和PHP的灵活的特性是密不可分的.
PHP市场占有率
关于ASP和JSP技术,笔者目前没有很深的了解,就不进一步介绍了.

随着时代的进一步发展,互联网应用的用户量越来越大,功能也越来越复杂,因而开发团队变得更为庞杂.这种PHP和HTML混写的方式不太利于团队分工协作,我到底是要写PHP呢?还是要写HTML?

首先出现的是"模板引擎"的概念,PHP程序员为了分离HTML结构,CSS样式,JS特效等与PHP业务逻辑,放弃了混写模式,采用了类似Smarty等模板进行开发,通过在HTML中预留{$name}等数据的占位符,专注页面的开发,其实在这一时代,前端程序员才正式的被分离了出来.
而模板引擎会读取这些HTML,通过并结合后端程序员的数据处理和业务逻辑,将具体的$name和原有的HTML一并的渲染出来,再返回给用户.

实际上 这和混写没有本质的区别,都是在后端进行页面的渲染

由此View(视图) 被分离了出来.

而后端程序员所做的操作一般的流程是

接受用户的请求-->数据库数据的CURD操作-->完成业务逻辑-->返回响应

在这个过程中,为了让程序员更加专注与业务逻辑的处理,而并不需要把精力放在具体的SQL语句的拼接,数据的处理上,Controller和Model也被分离了出来,

MVC其实不是一种设计模式,而是为了软件开发而诞生的一种开发模式,MVC允许在不改变视图的情况下改变视图对用户输入的响应方式，用户对View的操作交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进行操作，一旦Model发生变化便通知相关视图进行更新.这也实现了程序员的业务分工.

在这里插入图片描述

数据的通信是单向的

关于MVC,我计划书写使用PHP实现MVC框架的系列文章.

2.2 前端渲染vs后端渲染

我们讲的是Vue,并不是后端MVC框架.那么,既然后端MVC已经将视图,模型和控制器进行了分层开发,我们为什么还要把传统的View层,也就是我们的前端实现再次分层呢?

这其实就涉及到了前端渲染和后端渲染的比较.

传统意义上的后端开发,我们上文中也提起过,是服务器在后端处理数据,拼接HTML,渲染模板,并将页面返回给客户端.
即便我们做好了任务分层,也仅仅是明确了开发职责,我们无法避免用户访问时,页面在后端服务器的渲染.虽然有一些缓冲技术或者页面静态化技术,但随着用户量的增加和请求的变化,服务器承受的压力会迅速增加.

为了减缓服务器的压力,人们开始使用前端技术,也就是使用javascript渲染HTML.

前端渲染,其实就是指浏览器会从后端得到一些信息,这些信息或许是Vue的模板/组件,亦或是JSON等各种数据交换格式所包装的数据,甚至是直接的合法的HTML字符串.这些形式都不重要,重要的是,将这些信息组织排列形成最终可读的HTML字符串是由浏览器来完成的,在形成了HTML字符串之后，再进行显示。

浏览器在完成第一次请求之后,将模板/应用程序输出,剩下的数据处理都交由前端来完成,我们的服务器只负责通过接口提供数据,而浏览器则会完成剩下的工作.Web不再是一张张页面,而是一个整体的应用,一个由路由系统、数据系统、页面（组件）系统…组成的应用程序,这样的组织形式会减轻服务器的压力,程序的开发也会变得更为敏捷,

前端渲染和后端渲染互有优劣

前端渲染
优势
页面渲染在浏览器完成,减轻了服务器的压力
端口分离,更易于开发
跨平台开发和Native应用开发变得更为简单
访问和响应速度更快
劣势
不利于SEO
不兼容老旧Pc端浏览器
业务逻辑位于客户端,安全性降低
首次加载缓慢
后端渲染
优势
开发速度快 不涉及复杂的两端交互
SEO友好度高
每次基本上只打开一个页面,首次访问稍快
对于内容固定的页面,静态化的优势明显
内容隐藏于后端,安全性高
劣势
数据变化频繁的页面,静态化困难
服务器压力变大
可移植性差

技术都是为人服务的.没有优劣之分.我们应该知道在哪些场景使用哪些技术.

2.3 前端MVC

有了前端渲染的相关知识,我们首先来接触一下前端的MVC概念.

如果前端没有框架,只使用原生的html+js,MVC模式可以这样理解:
将HTML看成View,负责页面的呈现,js看成Controller，负责处理用户与应用的交互，响应对View的操作(事件监听), 将js的Ajax当做Model，也就是数据层，通过Ajax从服务器获取数据。调用Model对数据进行操作,完成Model与View的同步(根据Model的改变，通过选择器对View进行操作)

在原有的"行为-样式-结构"分离的基础之上,我们通过原生js或者jQuery技术,能够很轻易的完成对页面的前端渲染.

<style>
	#div{
		width:400px;
		height:100px;
		background-color:lightblue
	}
</style>
<!-- View -->
<div id="oBox">
	点击查看新闻
</div>
<script>
	//controller
	var oBox = document.getElementById('oBox');
	oBox.addEventListener('click',function(){
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function(){
			if(this.readyState == 4 && this.status == 200){
			//model
				var data = this.responseText;
				oBox.innerHTML == data;
			}
		}
		xhr.open("someurl");
		xhr.send(null);
	});
</script>

如果想要完成前端路由,我们可以使用hash或者history(pjax)轻易的实现.

虽然这样的前端开发,可以看做"MVC",但是对于职责的划分,并不是那么明确,并且看起来有些强行的MVC,Model层被弱化了很多.采用jQuery开发,代码书写和上述代码没有本质的区别,因为jQuery本身更加注重的是"Query".这样的划分,并不是真正的MVC.

实际开发过程中 MVC往往会更为灵活,我们来看一个MVC框架backbone的例子.

var M = Backbone.Model.extend({  
　　defaults:{name:"lisi"} ,
　　initialize : function(){   //new M时，会执行这个初始化函数。
　　　　this.on("change",function(){   //监听change事件
　　　　　　alert(1);
　　　　})
　　}
})
var model = new M();
//这里只要改变模型，就会触发,从而改变视图。
model.set("name","wangwu");

这里Model的对象不只包含数据,也有对属性(name)的监听事件.所以backbone里的Model也不是纯Model,它有一部分Controller的功能。

而backbone里的View层也往往比较厚

var M = Backbone.Model.extend({  
　　defaults:{name:"lisi"} 　
});
 
var V = Backbone.View.extend({ 
	//new V时，触发初始化函数,进行对视图的监听 
　　initialize:function(){
　　	  //视图监听模型变化,一旦改变,触发回调函数
　　　　this.listenTo(this.model, "change", this.modify);   
　　}, 
　　//回调函数 修改视图
　　modify:funtion(model){
　　　　$("#oBox").append(this.model.name);
　　}
});
var m = new M();
// 视图中绑定模型
var v = new V({model:m});
//改变模型的name值时，就会触发change事件，执行回调函数modify,改变视图中的模型设置值。
m.set("name","wangwu");

这里view即包含了视图显示也包含了事件监听,注册了Model,属于View+Model,Controller被弱化了,更加注重了数据.

上述两个例子,我们可以看出,在backbone中,View和Model是可以互相直接影响的,而Controller的功能被分布在了View和Model中.
MVC
总结一下,backbone中的MVC有以下特性:

  1. 用户可以向 View 发送指令,再由 View 直接要求 Model 改变状态
  2. 用户也可以直接通过Controller(例子中未列出的路由Router)发送指令,触发hashChange事件,从而触发Model改变,影响View
  3. View和Model之间是互相影响的
  4. Controller被弱化,backbone中,Controller的体现更多的是在路由Router中

2.4 前端MVVM

MVVM（Model-View-ViewModel）最早由微软提出.ViewModel指 “Model of View”——视图的模型.这个概念曾在一段时间内被前端圈热炒,以至于很多初学者拿jQuery和Vue做对比…
其实两者之间没有什么可比性,完全是两个世界的东西.
MVVM更加注重的是数据,并且弱化了View层,我们不需要也不应该在视图层上做更多的DOM操作.
而jQuery更加注重的是DOM的操作.

下面,我们以Vue为例,简单介绍一下MV-VM.

<!-- view -->
<div id="oBox">{{name}}</div>
<script>
	//viewmodel
	let vm = new Vue({
		el:"#oBox",
		//model
		data:{
			name:"lisi"
		}
	});	
</script>

在上面的例子中 Vue 通过VM层实现了Model和View的数据绑定,当我从任何位置,哪怕是控制台更改name的值,View当中的name也会随之发生变化,我们无需关注DOM是如何操作的,只需要关注数据本身就可以了,VM会帮助我们自动完成数据的同步.

Model的变化会影响到View,同样的,View当中的数据变化也能够影响Model.

<!-- view -->
<div id="oBox">
	输入购买个数 : <input name="nums" v-model="num"> <br>
	总价: {{price()}} 元
</div>
<script>
	//viewmodel
	let vm = new Vue({
		el:"#oBox",
		//model
		data:{
			num:0
		},
		methods:{
			price(){
				return parseInt(this.num) * 10;
			}
		}
	});	
</script>

上例中的体现即为双向数据绑定,

我们简单总结一下MVVM
在这里插入图片描述

  1. 各部分之间的通信,都是双向的.
  2. View 与 Model 不发生联系,都通过 ViewModel 传递.
  3. View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性.
  4. ViewModel比较厚,业务逻辑主要部署在VM层
  5. 数据的绑定是双向的(绑定≠通信)

下面 我们步入正题,用原生JavaScript实现数据的绑定/双向数据绑定.

第三章 Vue功能 — 数据绑定

为了完成Vue中的数据绑定功能,我们使用了ES6中的Proxy.
Proxy可以理解为,在目标对象之前假设一层"拦截",外界对该对象的访问,都必须通过这层拦截.它可以对外界的访问进行过滤和改写.Proxy的意思是代理,我们可以把它称作"代理器";

ES6原生提供Proxy构造函数,用来生成Proxy对象

var proxy = new Proxy(target,handler);

target是用于代理的对象,而handler参数也是一个对象,用于定制拦截行为;

具体代理的行为可以分为

  • get 拦截某个属性的读取操作
  • set 拦截某个属性的赋值操作
  • apply 拦截函数的调用,call和apply操作

当然,除了Proxy以外,我们也可以使用Object.defineProperty()定义属性权限

书归正传,我们简单实现一下Vue的数据绑定/同步功能;

我们期待

  1. Model的变化和View是绑定的,Model发生了变化,View也会发生变化
  2. Model和View不直接通信,开发者可以更加关注数据,而不是View的变化

首先,我们用Proxy实现数据代理,其实也就是我们的VM层,直接跟View/Model进行通信;

<div id="oBox">
	姓名: {{name}}<br>
	年龄: {{age}}
</div>
<script type="text/javascript">
	let el = document.getElementById('oBox');
	// 保留原始状态 以便多次编译
	let template = el.innerHTML;
	
	// Vue 使用 Proxy 完成数据代理 在数据变的时候更新html
	
	// 真正的数据
	let _data = {
		name:"whitsats",
		age:18
	}
	let data = new Proxy(_data,{
		// 监控数据修改
		set(obj,name,value){
			alert(`有人试图设置 ${name}=>${$value}`)
		}
	});
	
</script>

在命令行修改data.name,会弹出相应的窗体;

在这里插入图片描述
那么剩下的工作其实就是在数据发生改变时,重新渲染模板了;
我们定义一个render函数,用于渲染html,它会在初始化和数据变化时对页面进行重新的渲染

<!-- View -->
<div id="oBox">
	姓名: {{name}}<br>
	年龄: {{age}}
</div>

<script type="text/javascript">
	let el = document.getElementById('oBox');
	// 保留原始状态 以便多次编译
	let template = el.innerHTML;
	
	// Vue 使用 Proxy 完成数据代理 在数据变的时候更新html
	
	// 真正的数据
	//Model
	let _data = {
		name:"whitsats",
		age:18
	}
	// ViewModel
	let data = new Proxy(_data,{
		// 监控数据修改 obj即为_data 
		// 代理数据data修改,会影响到原始数据_data
		set(obj,name,value){
			obj[name] = value;
			render();
		}
	});
	
	render();
	function render(){
		// replace 正则替换的第一个参数为匹配到的字符串
		// 初次渲染 会将原始数据_data渲染到模板上
		// 代理数据data修改,会影响_data的值,我们仍然返回_data中的值
		el.innerHTML = template.replace(/\{\{\w+\}\}/g,str=>{
			str = str.substring(2,str.length-2);
			return _data[str];
		});
	}
</script>

render
相信读者能够很清楚的知晓 M-V-VM各层的所在

第四章 Vue功能 — 双向数据绑定

我们上一步中的数据绑定是 Model发生变化 影响View变化,
我们期待的是通过View可以直接映射到Model变化,而Model变化同样可以导致View的更改.

首先做好模板

<div id="oBox">
	<input type="text" v-model="name" />
	姓名: {{name}}<br>
	年龄: {{age}}
</div>

我们期望

  1. input框中的value在页面初始化时是_data原始数据中的name值
  2. _data原始数据中的name发生变化,input的value值也同步了变化
  3. 在input中输入内容,同样也能影响到_data

看似是View和Model的互相影响,其实通过前面关于MVVM的描述中,VM才是实现双向数据绑定的关键,View和Model不应该有直接的关联.
为了实现上述功能,我们需要将VM功能完善一下

首先实现input的初始化工作
我们寻找带有v-model属性的input标签,并根据绑定的属性名称进行赋值

<body>
<!-- view -->
<div id="oBox">
	<input type="text" v-model="name" />
	姓名: {{name}}<br>
	年龄: {{age}}
</div>

<script type="text/javascript">
	let el = document.getElementById('oBox');

	let template = el.innerHTML;
	// Model
	let _data = {
		name:"whitsats",
		age:18
	}
	// ViewModel
	let data = new Proxy(_data,{

		set(obj,name,value){
			obj[name] = value;
			render();
		}
	});
	
	render();
	function render(){
		el.innerHTML = template.replace(/\{\{\w+\}\}/g,str=>{
			str = str.substring(2,str.length-2);
			return _data[str];
		});
		// 寻找v-model
		// 1. 格式化元素为数组
		// 2. 筛选数组中含有v-model属性的input标签
		// 3. 循环v-model属性标签,并赋予相应的值
		Array.from(el.getElementsByTagName('input'))
			.filter(ele=>ele.getAttribute('v-model'))
			.forEach(input=>{
				let name = input.getAttribute('v-model');
				input.value = _data[name];
			});
	}
</script>

在这里插入图片描述
成功渲染之后,我们需要完成View到Model的绑定,同样需要VM来完成,这里肯定会使用到事件监听;

<!-- View -->
<div id="oBox">
	<input type="text" v-model="name" />
	姓名: {{name}}<br>
	年龄: {{age}}
</div>
	
<script type="text/javascript">
	let el = document.getElementById('oBox');

	let template = el.innerHTML;
	//Model
	let _data = {
		name:"whitsats",
		age:18
	}
	//ViewModel
	let data = new Proxy(_data,{

		set(obj,name,value){
			obj[name] = value;
			render();
		}
	});
	
	render();
	function render(){
		el.innerHTML = template.replace(/\{\{\w+\}\}/g,str=>{
			str = str.substring(2,str.length-2);
			return _data[str];
		});
		// 寻找v-model
		Array.from(el.getElementsByTagName('input'))
			.filter(ele=>ele.getAttribute('v-model'))
			.forEach(input=>{
				let name = input.getAttribute('v-model');
				input.value = _data[name];
				input.oninput = function(){
					//此处只是通过事件通知代理数据进行变化
					//代理数据一旦变化, 触发set,重新渲染
					data[name] = this.value;
				}
			});
		
	}
</script>

MVVM

后记

坑算是开了XD!
我比较懒,系列文章可能更新的慢一些
在不同平台上开的博客也都长了草了
emmm…尽快更新吧

whitsats
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
VUE一些小功能案例
青椒的博客
04-08 736
计数器 <div id="app"> <h2>当前计数: {{counter}}</h2> <button @click="add">+</button> <button @click="sub">-</button> </div> <script> con...
vue多种小功能
羽下佳人的博客
09-10 773
vue+element+es6 滚轮到最底部 添加新一条数据，input框自动获得焦点 打开新窗口页面 elelment table 序号排列 资料文件上传 this.reload() 方法配置   1.滚轮到最底部 this.$nextTick(() =&gt; { document.documentElement.scrollTop = 10000; }) 2.添...
vue基础功能实现
08-10
vue基础功能实现
vue的基本代码
浪丶荡
04-08 1014
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
vue api 帮助类
wzq806341010的专栏
01-17 251
import axios from 'axios'; import { getCookie } from '../utils/cookies' var service = axios.create({ //baseURL: 'http://xxxxxx:xx', baseURL: 'http://127.0.0.1:8001', headres: { "Content-T...
vue实现商城购物车功能
12-29
本文实例为大家分享了vue实现商城购物车功能的具体代码，供大家参考，具体内容如下 首先，先上最终的效果图 效果并不是很好看，但是这不是重点。 首先，我们先看下布局： 购物车 (item,index)> ...
vue实现扫码功能
10-15
在 Vue 中实现扫码功能，通常需要借助浏览器的API或者第三方库来访问设备的摄像头并解析二维码或条形码。在这个示例中，开发人员利用了HBuilder集成的H5+ SDK，这使得在Vue应用中直接调用原生的扫码功能成为可能。 ...
vue实现弹幕功能
01-19
(2)使用技术 vue + vue-baberrage 1.安装：  npm install vue-baberrage 2.引入 方式一： import Vue from 'vue' import { vueBaberrage } from 'vue-baberrage' Vue.use(vueBaberrage) 方式二： const ...
Vue实现自定义下拉菜单功能
10-18
主要介绍了Vue实现自定义下拉菜单功能,文章先通过实例代码给大家介绍，后面对用到的知识点总结，需要的朋友可以参考下
Vue 实现登录界面验证码功能
10-15
本文通过实例代码给大家介绍了Vue 实现登录界面 验证码功能，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue2源码解析（3）——生成ats树
如果相遇，那么你好哦~
10-02 145
ast树是模板想要转换为真实DOM的第一步，其实基本上是使用正则进行不断地匹配，然后根据匹配的结果进行相对应的处理。总体实现来讲不算很难，逻辑也不会太过于复杂。多注意一些细节上的处理就可以了。好啦，本文就讲到这里，希望能对各位小伙伴有所帮助哦！Vue2源码解析（2）——响应式详解-CSDN博客vue2的响应式源码https://blog.csdn.net/c18559787293/article/details/133454673?
vue原理--AST语法树
weixin_52786170的博客
02-28 232
vue原理 vue2原理 AST语法树 AST算法
Vue相关零散知识点
m0_60386281的博客
07-27 117
Vue 运行时的核心主要包括数据初始化、数据更新、异步队列、DOM渲染这几个部分 Vue的异步队列的思路以及实现原理？ new Vue实例初始化data的2种写法？ // 第1种 new Vue({ el: 'example1', data(){ return(){ a:1, b:2 } } }); // 第2种 new Vue({ el: 'example2', data:{ a:1, b:2 } }
vue构建完整项目-以及实现
weixin_30699235的博客
04-23 192
简介 由于开发vue项目的时候,需要重新搭建项目的架子,比较麻烦,其实之前做过的项目好多都可以直接拿过来用,比如接下来的这个项目,就可以满足平常的vue单页面开发. 该项目包括了:全局配置axios,全局配置接口集合,切换页面动画,全局配置vuex（其中vuex做的很经典 规范 ，可以参考）,页面请求数据增加loading效果 项目地址: https://github.com...
我的头条（vue项目实战）--个人中心页
Zwq8023520的博客
08-27 4446
项目实战 vue axios 文件上传
Vue官方文档（44）：自定义插件
amadeus_liu2的博客
11-09 327
vue
vue的功能介绍
最新发布
forRita的博客
01-06 1814
Vue是一个渐进式框架，用于构建用户界面。它从头开始设计，以便逐步采用，并且易于上手和使用。具有很高的性能，能够处理复杂的单页应用程序。Vue 是一个基于组件的框架，这意味着它围绕组件的概念构建。组件是可重用的代码片段，可用于构建应用程序的不同部分。这使得 Vue 非常灵活和易于使用，开发者可以简单地重用组件来构建应用程序的不同部分。Vue 也是一个响应式框架，这意味着它会自动更新视图，当数据发生变化时。这使得 Vue 非常高效，因为当数据发生变化时它不需要手动更新视图。
vue项目帮助文档
无知者无畏
05-15 1334
vue项目帮助文档 vue脚手架 Router Vue框架 Element-UI mdn 阿里巴巴字体 iconfont 富文本编辑器 vue-quill-editor 进度条
vue的简单实现
weixin_44488616的博客
12-23 1062
要实现vue需要在文件中引入一下代码 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> 下面分开几种操作来实现vue <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &lt.
vue实现简单评论与回复功能
12-28
Vue是一种流行的JavaScript框架，用于构建用户界面。要实现简单的评论与回复功能，首先需要安装Vue并创建一个新的Vue实例。然后，我们可以使用Vue的组件化特性来创建评论和回复组件。 评论组件会显示用于输入评论内容的文本框和提交按钮。当用户提交评论时，可以将评论存储在一个数组中，并在页面上显示出来。回复功能可以通过在每条评论下添加一个回复按钮来实现。当用户点击回复按钮时，可以显示一个输入框和提交按钮，让用户输入回复内容并提交。回复内容也可以存储在评论数组中，并在页面上显示出来。 为了使评论与回复功能更加动态，我们可以使用Vue的数据绑定和条件渲染功能。当用户提交评论或回复时，页面会立即更新显示最新的评论内容。此外，Vue的双向数据绑定功能还可以让评论内容实时更新，而无需刷新整个页面。 最后，为了使评论与回复功能更加美观，我们可以使用Vue的样式绑定功能来设置评论和回复的样式。这样可以使页面看起来更加清晰和整洁。 总的来说，通过使用Vue的组件化、数据绑定和条件渲染功能，实现简单的评论与回复功能是相对简单的。这样的功能可以让用户在页面上交流和互动，从而增强用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值