Vue常用的7个属性、内置指令、生命周期

1. 7个属性

• el 属性：

  • 用来指示 vue 编译器从什么地方开始解析 vue 的语法，也可以说是一个占位符。

• data 属性：

  • 用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。

• computed 属性：

  • 计算属性：
    • 要表示的数据不存在，要通过计算得来。
    • 在 computed 对象中定义计算属性
    • 在页面中使用{{方法名}}来显示计算的结果
    • 要用的属性不存在，要通过已有的属性计算得来。它是一个能够将计算结果缓存起来的属性，可以想象为缓存。
  • 底层借助了 Object.defineproperty 方法提供的 getter 和 setter 方法。
  • 优势：与 methods 实现相比，内部具有缓存机制（复用），效率更高，调试更方便
  • 注意：
    • 计算属性最终会出现在 Vue实例上，直接读取使用即可。
    • 如果计算属性要被修改，那必须写 set 函数去相应修改，

• template 属性：

  • 用来设置模板，会替换页面的元素，包括占位符。

• methods 属性：

  • 用来放置页面中的业务逻辑，js 方法一般放置在这里。

• render 属性：

  • 创建真正的虚拟DOM

• watch 属性：

  • 监听 Vue 实例中 data 属性中数据的变化
  • 通过 vm 对象的 $watch() 或 watch 配置来监视指定的属性
  • 当属性变化时，回调函数自动调用，在函数内部进行计算
  • eg. watch:function(new, old){}
  • 两个参数：一个用于返回新值，一个用于返回旧值。

2. 常用内置指令

• v-text：更新元素的textContent
• v-html：更新元素的innerHTML
• v-if：如果为 true，当前标签才会输出到页面
• v-else：如果为 false，当前标签才会输出到页面
• v-show：通过 display 样式来控制显示/隐藏
• v-for：遍历数组/对象
• v-on：绑定监听事件，可以简写: eg. v-on:click=“” 简写为@click=“”
• v-bind：绑定解析表达式，可以简写为 ：
• v-model：双向数据绑定
• v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }

3. Vue 的生命周期

• 初始化显示
  • beforeCreate()
  • created()
  • beforeMount()
  • mounted()
• 更新状态：this.xxx = value
  • beforeUpdate()
  • updated()
• 销毁 vue 实例：vm.$destory()
  • beforeDestory()
  • destoryed()

常用的生命周期的方法：

1）mounted()：发送 ajax 请求，启动定时器等异步任务
2）beforeDestory()：做收尾工作，如：清楚定时器等