开始学习vue2(Vue方法)

一、过滤器

过滤器Filters)是 vue 为开发者提供的功能,常用于文本的格式 化。过滤器可以用在两个地方:插值表达式 v-bind 属性绑定过滤器应该被添加在 JavaScript 表达式的尾部,由“管道符 ”进行

调用,示例代码如下

开始学习vue2(Vue方法)_第1张图片

1、定义过滤器

在创建 vue 实例期间,可以在 filters 节点中定义过滤器,示例代

码如下:

开始学习vue2(Vue方法)_第2张图片

2、私有过滤器和全局过滤器

在 filters 节点下定义的过滤器,称为“私有过滤器 ”,因为它能在当前 vm 实例所控制的 el 区域内使用

如果希望在多个 vue 实例之间共享过滤器,则可以按照如下的格式

定义全局过滤器

开始学习vue2(Vue方法)_第3张图片

3、连续调用多个过滤器

过滤器可以串联地进行调用,例如:

开始学习vue2(Vue方法)_第4张图片

示例代码:

开始学习vue2(Vue方法)_第5张图片

在企业级项目开发中

如果使用的是 2.x 版本的 vue,则依然可以使用过滤器相关的功能

如果项目已经升级到了 3.x 版本的 vue,官方建议使用计算属性方法

替被剔除的过滤器功能

二、watch 侦听器

watch 侦听器允许开发者监视数据的变化,从而针对数据的

变化做特定的操作

语法格式如下:

开始学习vue2(Vue方法)_第6张图片

使用 watch 检测用户名是否可用侦听属性 watch:

监听 username 值的变化,并使用 axios 发起 Ajax 请求,

测当前输入的用户名是否可用

开始学习vue2(Vue方法)_第7张图片

immediate 选项

默认情况下,组件在初次加载完毕后不会调用 watch 侦听器。

如果想让 watch 侦听器立即被调用,则需要使

immediate 选项。示例代码如下:

开始学习vue2(Vue方法)_第8张图片

deep 选项

如果 watch 侦听的是一个对象,如果对象中的属性值发生了变化,则无法被监听到。此时需要使用 deep 选

,代码示例如下:

开始学习vue2(Vue方法)_第9张图片

三、 Computed 计算属性

计算属性指的是通过一系列运算之后,最终得到一个属性

这个动态计算出来的属性值可以被模板结构methods方法使用。示例代码如下:

开始学习vue2(Vue方法)_第10张图片

计算属性 computed 特点

① 虽然计算属性在声明的时候被定义为方法,但是计算属性的本质是一个属性

② 计算属性会缓存计算的结果,只有计算属性依赖的数据变化时,才会重新进行运算

案例:全选和非全选

步骤:1、先写数据 data

2、进行 v-for 遍历数据渲染视图

3、进行对 id 的过滤处理

4、找到监听的元素实施监听

相同

1   computed  watch 都是观察页面的数据变化的。

2   watch、computed  data 同级

不同:

1   Computed  计算监视对象,写在了函数内部,凡是函数内部  this.相关属性 改变都会触发当前函数,当数据没有变化时,它 会读取缓存。而 watch 每次都需要执行函数。methods 也是每次都需

要执行

2   数据变化时执行异步操作,这个时候使用 watch

3   watch 监听单个,computed 监听多个

4   Computed 监听的属性不能和 data 中的属性冲突,但是watch

中监听的属性必须在 data 中声明了

案例:

买狗子购物车

开始学习vue2(Vue方法)_第11张图片

练习:购物车

开始学习vue2(Vue方法)_第12张图片

要求:

1.添加课程和价格的功能,添加上的商品会显示在列表当中

2.点击添加购物车,此商品会添加到下面的表格中

3.购物车中的数量可以加减

4.购物车下面有选中的课程记录,和选中商品的金额

你可能感兴趣的:(vue.js,学习,前端)