本章主要是讲 Vue 的数据绑定实践，以及基本指令、事件与语法糖

Vue.js-C2

在学习本章之前，其实我也在回顾上一章对于 Vue.js 的基本介绍和现代 Web 开发的基本模式，这种 MVVM 的思想逐渐体现出软件设计的分层理念。只要从事软件开发这一行业，不管什么语言，实践践行模式，学习优秀的软件设计模式，合理的运用在日常工作中显得很重要。

在后端开发中的，我们透过 Model 层去从 DB 获取数据，并整理成 View 所需要的类容，通常包括一个类别或类别阵列，通过 Model 层提供的 Model Object，我们可以获取到 View 层的展示数据。

那么对于前端开发来说，Dom 层就可以比喻成后端的 View 层，如何做到修改数据层后渲染出不同的画面呢？通过这一章的数据绑定样例介绍，这里我还是结合后端开发的思想去找出设计的共同点，以便于更好理解本框架的设计思想。很显然，我们在开发 Laravel 项目的时候，回忆一下基本的操作，配置路由，从 Controller 获取请求数据，从 Model 中获取数据， 从 Service 中处理业务逻辑，在 Controller 层挂载 View 模板，绑定处理后的数据到 View 模板中，View 中根据自定义指令展示数据。

将数据绑定到 Vuew 实例上，设置挂载方法，设置挂载点，每个 Vue 实例创建后时，都会经历一系列的初始化过程，同时也会调用相应的生命周期的钩子，比如

  • created 实例创建完成以后调用，此阶段完成了数据的观测，但是尚未挂载，$el 还不可用，需要初始化处理一些数据时比较有用
  • mounted el 挂载到实例上后调用，一般是第一个业务逻辑会到这里开始
  • beforeDestroy 实例销毁之前调用，主要是解绑一些使用 addEventListener 监听的事件

Dom 层插入变量使用 Mushache 语法，这个也是在熟悉不过了，包括过滤器等，它会自动的将双向绑定的数据实时显示出来。下面简单记录一下本章提到的基本指令

  • v-html 输出 html 格式，而非纯文本内容 后端使用 {!! x !!}
  • v-pre 输出未编译的内容
  • v-bind 动态更新 html 元素的属性
  • v-on 绑定事件监听器，例如点击某个按钮的事件，鼠标 input 失焦事件

需要注意的地方，比如

  1. Vue.js 只支持单个表达式，不支持语句和流程控制，而且在表达式中，不能使用用户自定义的全局变量，只能使用 Vue 白名单中的全局变量，例如 Math 和 Date。
  2. 使用过滤器的时候，调用 method 时，第一个参数是数据本身，后面参数取决于方法的定义。

关于过滤器的用法也是类似于 Laravel 模板语言一样，通常用于数据微处理，比如日期格式，简单的数据转换，需要注意的是，复杂的数据转换应该使用计算属性，多个过滤器的用法是如下

1
2
3
4

{{ message | filterA | filterB}}

{{ message | filter(arg1, arg2) }}

平时在开发过程中，我们往往会使用 Vue.js 的语法糖，例如 v-bind 和 v-on，使用 :来代替实际的指令名称，并且 v-on 也可以直接用 @ 来缩写，这样的写法也更加的简洁和方便。