Vue基础之MVVM,模板语法和数据绑定

目录

• 1. Vue概述
• Vue官网
• MVVM架构模式
• Vue简介
• 2. 初识Vue
• 3. 模板语法
• 1、插值语法：
• 2、指令语法：
• 4. 数据绑定
• 5. el与data的两种写法
• 1、el有2种写法new
• 2、data有2种写法
• 3、一个重要的原则：
• 总结

1. Vue概述

Vue官网

英文官网: https://vuejs.org/

中文官网: https://cn.vuejs.org/

MVVM架构模式

MVVM简介

MVVM 由 M：Model 模型，V：View 视图 ，VM：ViewModel 视图模型（Vue实例对象） 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

MVVM模式图

• Vue的设计受到MVVM模型的启发
• data中所有的属性，最后都出现在了vm身上。
• vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。

Vue简介

• 是一个JavaScript MVVM库，是一套动态构建用户界面的渐进式框架
• Vue用于构建用户界面的渐进式框架，渐进式代表的含义是：主张最少。每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。
• 渐进式：Vue可以自底向上逐层地应用。简单应用只需一个轻量小巧的核心库，复杂应用可以引入各式各样的Vue插件

Vue特点

• 遵循MVVM模式
• 双向数据绑定：vue.js会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改
• 组件化：Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。采用组件化模式，提高代码复用率、且让代码更好维护。
• 视图、数据和结构的分离，声明式编码：使数据的更改更为简单,不需要进行逻辑代码的修改,无需直接操作DOM，只需要操作数据就能完成相关操作，提高开发效率。
• 虚拟DOM 和 diff算法：可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。

2. 初识Vue

• 想让Vue正常工作，就必须创建一个Vue实例，且要传入一个配置对象；
• root容器里的代码依然符合html规范，只不过加入了一些特殊的Vue语法；
• root容器里的代码被称为 Vue模板 ；
• Vue 实例和容器 是 一一对应的；
• 真实开发中只有一个Vue实例，并且会配合着组件一起使用；
• {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；

  注意区分js表达式和js代码（语句）
  1、表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
  	(1). a
  	(2). a+b
  	(3). demo(1)    //函数调用表达式
  	(4). x === y ? 'a' : 'b'      //三元表达式
  2、js代码（语句）
  	(1). if(){}
  	(2). for(){}

• 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

	
Hello，{{name.toUpperCase()}}，{{address}}

3. 模板语法

Vue模板语法有2大类：

1、插值语法：

• 功能：用于解析标签体内容（起始标签和结束标签中间均为标签体）。
• 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

2、指令语法：

• 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
• 举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
• 备注：Vue中有很多的指令，且形式都是：v-xxx，此处以v-bind举例

	
插值语法
	
你好，{{name}}
	

	
指令语法
	点我去{{address.name}}1
	点我去{{address.name}}2

4. 数据绑定

Vue中有2种数据绑定的方式：

1.单向绑定(v-bind)：数据只能从data流向页面。

2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

备注：

• 双向绑定一般都应用在表单类元素上（如：input、select等）
• v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值（只有表单类元素才存在value）。

	
	单向数据绑定：

	双向数据绑定：

	
	单向数据绑定：

	双向数据绑定：

	
	
你好啊
 

5. el与data的两种写法

1、el有2种写法new

• Vue时候配置el属性。
• 先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。

2、data有2种写法

• 对象式
• 函数式
• 如何选择：两种写法都可以，但使用到组件时，data必须使用函数式，否则会报错。

3、一个重要的原则：

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了，而是window。

	
你好，{{name}}

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!