Vue的数据绑定和计算属性

卖火柴的小男孩2

已于 2022-05-09 11:00:10 修改

阅读量3.1k

点赞数

分类专栏：前端框架Vue 文章标签：前端框架 vue

于 2022-04-05 14:24:39 首次发布

本文链接：https://blog.csdn.net/qq_42839746/article/details/123968742

版权

本文介绍了Vue.js的MVVM架构模式，重点讲解了Vue的双向数据绑定，通过v-model指令实现文本框的实时同步，以及Vue模板语法中的文本、HTML插值和表达式。此外，还深入探讨了计算属性computed的使用，对比了它与methods的区别，强调了computed的缓存特性对于提高代码效率的重要性。

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

一、概述

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于 View 层。它的核心是 MVVM 中的 ViewModel。

1、MVVM是一种基于前端开发的架构模式，其核心是提供了双向数据绑定。

2、ViewModel （vue实例）负责连接 View（视图）和 Model（数据），保证视图和数据的一致性。

二、Vue双向数据绑定

1、使用 v-model 绑定文本框

<div id="app">
<P>{
  {number}}</P>
<input type="number" name="" v-model="number">  <!--  V-model : 它负责把用户输入到表单中的数据绑定到Vue的data  -->
</div>

2、实例化Vue对象并写入我的代码

<script type="text/javascript"> 
	//vm:viewmodel,当作new Vue对象
	//m:model,当做data
	//v:view视图，div#app
	//双向数据绑定：view和model是在viewmodel作用下绑定在一起
	new Vue({
		el:"