目录

1、计算属性和侦听器

 1.1、计算属性（computed）

1.2、 侦听器

2、 过滤器（filters）

3、组件化

4、生命周期钩子函数

1、计算属性和侦听器

 1.1、计算属性（computed）

 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性来完成。

只要依赖的属性发生变化，就会重新计算这个属性

西游记； 价格：{{xyjPrice}}，数量： 
水浒传； 价格：{{shzPrice}}，数量： 
 
总价：{{totalPrice}}
{{msg}}

1.2、 侦听器

 watch 可以让我们监控一个值的变化。从而做出相应的反应。

西游记； 价格：{{xyjPrice}}，数量： 
水浒传； 价格：{{shzPrice}}，数量： 
 
总价：{{totalPrice}}
{{msg}}

2、 过滤器（filters）

 过滤器不改变真正的`data`，而只是改变渲染的结果，并返回过滤后的版本。在很多不同的

情况下，过滤器都是有用的，比如尽可能保持 API 响应的干净，并在前端处理数据的格式。

{{user.id}} ==> {{user.name}} ==>{{user.gender == 1 ? "男":"女" }} ==>{{user.gender | genderFilter}} ==> {{user.gender | gFilter}}

3、组件化

        在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。 例如可能会有相同的头部导航。         但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。

组件其实也是一个 Vue 实例，因此它在定义时也会接收：data、methods、生命周期函 数等 - 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有 el 属性。 -但是组件渲染需要 html 模板，所以增加了 template 属性，值就是 HTML 模板 -全局组件定义完毕，任何 vue 实例都可以直接在 HTML 中通过组件名称来使用组件了 - data 必须是一个函数，不再是一个对象。

 

我被点击了 {{count}} 次

 4、生命周期钩子函数

钩子函数 - beforeCreated：我们在用 Vue 时都要进行实例化，因此，该函数就是在 Vue 实例化时调 用，也可以将他理解为初始化函数比较方便一点，在 Vue1.0 时，这个函数的名字就是 init。 - created：在创建实例之后进行调用。 - beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}} - mounted：我们可以将他理解为原生 js 中的 window.οnlοad=function({.,.}),或许大家也在用 jquery，所以也可以理解为 jquery 中的$(document).ready(function(){….})，他的功能就是：在 dom 文档渲染完毕之后将要执行的函数，该函数在 Vue1.0 版本中名字为compiled。 此时页面中的{{name}}已被渲染成张三 - beforeDestroy：该函数将在销毁实例前进行调用 。 - destroyed：改函数将在销毁实例时进行调用。 - beforeUpdate：组件更新之前。 - updated：组件更新之后。

{{num}}赞！
{{name}}，有{{num}}个人点赞