2、Vue 双向数据绑定及模版语法

最新推荐文章于 2024-07-29 09:05:38 发布

阿慕路泽

最新推荐文章于 2024-07-29 09:05:38 发布

阅读量547

点赞数

分类专栏： Vue+iView

本文链接：https://blog.csdn.net/sinat_33924041/article/details/88960396

版权

本文深入探讨了Vue的双向数据绑定概念，包括JS实现和Vue的内置功能。通过Vue的实例展示了如何轻松实现双向绑定，并介绍了模板语法，如文本插值、原始HTML、属性绑定和使用JavaScript表达式。

摘要由CSDN通过智能技术生成

一、双向数据绑定简介

Vue最核心的功能时双向数据绑定和组件模块化。

双向绑定：

当视图(View)的值发生改变时会自动更新Model的值；
当model的值发生改变时会自动更新视图(View);

这里的视图View是指html中的标签元素，也就是DOM元素；这里的model就是指JavaScript中的对象，也就是用object{foo: bar}。

二、双向数据绑定JS实现

下面示例写了一个基本双向数据绑定的实现，打开控制台Console我们可以看到，当在input中输入值时也就是input的值发生改变时，input中的value值会自动赋值给user对象的username属性；当对象user的username属性的值发生改变时也会改变input标签的value值，即View也会跟着改变。

<html>
<head>
	<title>双向数据绑定</title>
	<script type="text/javascript">
		// model
		var user = {
    username: ''};

		// 当view(DOM元素)发生了改变也会更改model的值
		function viewChangeModel() {
    
			// 更改model的值
			var newValue = document.getElementById("view").value;
			user.username = newValue;
			console.log(newValue);
		}

		// 改变model的值会被监听监听到，然后更改view(DOM元素)
		function modelChangeView() {
    
			user.username = 'mengday';
		}

		// 监听器：监听属性的改变
		// 当model发生改变时也会更新view
		Object.defineProperty(user, 'username', {
    
    		set:function(value){
    
          		//此处拦截了设置请求
          		console.log('newValue=' + value);
          		document

最低0.47元/天解锁文章

阿慕路泽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2、Vue 双向数据绑定及模版语法

一、双向数据绑定简介Vue最核心的功能时双向数据绑定和组件模块化。双向绑定：当视图(View)的值发生改变时会自动更新Model的值；当model的值发生改变时会自动更新视图(View);这里的视图View是指html中的标签元素，也就是DOM元素；这里的model就是指JavaScript中的对象，也就是用object{foo: bar}。二、双向数据绑定JS实现下面示例写了一...
复制链接

扫一扫

专栏目录