（二）Vue2.0之基础入门

1.Vue简介

1.1 什么是Vue

官方给出的概念：Vue（读音/vju:/，类似于view）是一套用于构建用户界面的前端框架。

• 构建用户界面
  用vue往html页面中填充数据，非常的方便。
• 框架
  ① 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能
  ② 要学习vue，就是在学习vue框架中规定的用法。
  ③ vue的指令、组件（是对UI结构的复用）、路由、Vuex、vue组件库

1.2 vue的特性

vue框架的特性，主要体现在如下两方面：

• 数据驱动视图
• 双向数据绑定

1.2.1 数据驱动视图

在使用了vue的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。示意图如下:

• 好处：当页面数据发生变化时，页面会自动重新渲染！（程序员只管把数据维护好，那么页面结构会被vue自动渲染出来）
• 注意：数据驱动视图是单向的数据绑定。

1.2.2 双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源中。示意图如下：

• 好处：开发者不再需要手动操作DOM元素，来获取表单元素最新的值！
• 在网页中，form表单负责采集数据，Ajax负责提交数据。
  js数据的变化，会被自动渲染到页面上。
  页面上表单采集的数据发生变化的时候，会被vue自动获取到，并更新到js数据中。

1.2.3 MVVM

MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。MVVM指的是Model、View和ViewModel，它把每个HTML页面都拆分成了这三个部分，如图所示：

在MVVM概念中：

• Model表示当前页面渲染时所依赖的数据源。
• View表示当前页面所渲染的DOM结构。
• ViewModel表示vue的实例，它是MVVM的核心。

1.2.4 MVVM的工作原理

ViewModel作为MVVM的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。

• 当数据源发生变化时，会被ViewModel监听到，VM会根据最新的数据源自动更新页面的结构。
• 当表单元素的值发生变化时，也会被VM监听到，VM会把变化过后最新的值自动同步到Model数据源中。

1.3 vue的版本

当前，vue共有3个大版本，其中：

• 2.x版本的vue是目前企业级项目开发中的主流版本
• 3.x版本的vue于2020-09-19发布，生态还不完善，尚未在企业级项目开发中普及和推广
• 1.x版本的vue几乎被淘汰，不再建议学习与使用

总结：

• 3.x版本的vue是未来企业级项目开发的趋势；
• 2.x版本的vue在未来（1～2年内）会被逐渐淘汰；

2. vue的基本使用

2.1 基本使用步骤

① 导入 vue.js 的script脚本文件
② 在页面中声明一个将要被vue所控制的DOM区域
③ 创建vm 实例对象（vue 实例对象)

<!-- 2.在页面中声明一个将要被vue所控制的DOM区域 -->
  <div class="box">{
   {
   name}}</div>

  <!-- 1.导入Vue的库文件，在 window全局就有了 Vue 这个构造函数 -->
  <script src="js/vue.js"></script>
  <!-- 3.创建vue的实例对象 -->
  <script>
    new Vue({
   
      el: '.box',
      data: {
   
        name: 'tom'
      }
    })
  </script>
</body>

2.2 基本代码与MVVM的对应关系

3. Vue的调试工具

4. vue的指令和过滤器🎈

4.1 指令的概念

指令（Directives）是vue为开发者提供的模板语法，于辅助开发者渲染页面的基本结构。
vue中的指令按照不同的用途可以分为如下6大类：
内容渲染指令、属性绑定指令、事件绑定指令、双向绑定指令、条件渲染指令和列表渲染指令。
注意：指令是vue开发中最基础、最常用、最简单的知识点。

4.1.1 内容渲染指令

内容渲染指令用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有如下3个：

• v-text