原阳县建站塔山双喜_开发公司向政府申请延期交付_网络推广营销网站建设专家_重庆企业免费建站

1 vue是什么

  简单点说，vue就是一个用于创建用户界面的JavaScript框架，同时也是一个创建单页面应用的Web应用框架，Vue关注的核心是MVC（Modle-View-Controller)中的视图层（View）。同时，Vue能方便地获取数据，并且通过组件内部特定的方法（主要是双向绑定）实现视图与模型的交互。

2 Vue的核心特性

2.1 数据驱动（MVVM）

（1）什么是数据驱动
  所谓数据驱动，就是视图是由数据驱动生成，我们更新视图是通过修改数据更新的，而不是直接操作DOM。

（2）MVVM

MVVM表示的是Model-View-ViewModel

• Model：模型层，负责业务处理逻辑以及和服务端进行交互
• View：视图层，负责将数据模型转化为UI（界面）展示出来，可以简单理解为HTML页面
• ViewModel：视图模型层，用来连接Model和View（两者通信的桥梁）

下面用代码展示Model、View以及ViewModel到底是什么：

• View和Model是如何通过ViewModel进行通信的？
  
  
  
  ①　从View这边看：ViewModel中的DOM监听器（DOM Listeners）监听DOM元素的变化，当DOM元素发生变化时，Model中的数据也随之变化。
  eg.当我们从输入框输入数据时，Model中的数据页会更新为我们输入的数据
  
  
  ②　从Model这边看：数据绑定绑定了Model中的数据，Model钟的数据变化会反馈到视图中。
  eg.在message中输入‘哈哈哈’字符串，视图中的输入框中也会出现该字符串。
  
  
  

2.2 组件化

（1）什么是组件化
  Vue组件化是指将一个应用划分为多个独立的、可复用的模块，每个模块都包含自己的HTML模板、CSS样式以及JavaScript逻辑三个部分。在Vue中，每个.vue文件就是一个组件。

（2）组件化的优点

• 降低系统的耦合度（模块间的依赖程度）：需求相同的组件可以相互替换，快速完成开发。例如，输入框可以换成下拉框、日历等。
• 调试方便：由于组件之间是低耦合的，因此可以单独对组件进行调试，而不是对整个系统进行调试。
• 提高系统的可维护性：由于每个组件的职责单一，并且组件在系统中是可以被复用的，因此对代码进行优化可获得系统的整体升级。

2.3 指令系统

  指令 (Directives) 是带有 v- 前缀的特殊属性作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

常用的指令：

• 内容渲染指令‌：
  v-text‌：将变量的值作为纯文本输出。
  v-html‌：‌将变量的值作为HTML解析和渲染。

• 条件判断指令‌：
  ‌v-if：根据条件判断是否渲染元素。
  ‌v-else‌、‌v-else-if‌：与v-if配合使用进行条件判断。
  ‌v-show‌：根据条件控制元素的显示和隐藏。

• 事件绑定指令‌：
  ‌v-on‌（或缩写为@）：绑定事件监听器。

• 属性绑定指令‌：
  v-bind‌：动态绑定属性。

• ‌列表渲染指令‌：
  v-for‌：‌基于数据集合渲染列表。

• 双向绑定指令‌：
  v-model‌：‌在表单控件上创建双向数据绑定。

• 其他指令‌：
  ‌v-slot‌：插槽。
  v-once‌：‌只渲染元素和组件一次。
  ‌v-cloak‌：防止模板内容在编译完成前显示。

3 Vue跟传统开发的区别

  主要的区别有以下两个：

• Vue所有的界面事件都是去操作数据的，而传统开发操作DOM
• Vue所有界面的变动都是通过数据自动绑定出来的，而传统开发操作DOM