vuejs知识点目录

指令

基础指令
其他指令

• {{}} 插值表达式
• v-cloak 解决插值表达式的抖动
• v-text 插入文本
• v-html 以标签形式展示数据
• v-bind 属性绑定 ：
• v-on 事件绑定 @
• v-model 双向数据绑定
• v-if 条件渲染
• v-for 循环渲染 :key number和string类型

事件修饰符

待完成

• .stop 阻止冒泡
• .prevent 阻止默认事件
• .capture 捕获事件
• .self 自身触发
• .once 只触发一次

过滤器--文本格式化

过滤器的使用

• 用处：插值表达式和v-bind后边的表达式中
• 应用：要过滤的数据 | 过滤器名称
• 定义：
  • 全局过滤器
    Vue.filter('过滤器名称',function(data,...){})
  • 私有过滤器
    filters:{'过滤器名称':function(data)

就近原则

vue生命周期

vue生命周期

• 创建：beforecreate created beforemount mounted
• 运行：beforeupdate updated
• 销毁：beforedestory destoryed
• keepalive:activated deactivated

计算属性

待完成

• computed
  • 本质上是一个方法，定义变量，变量名字不能和data中重名，数据缓存
  • 一个数据受多个数据影响的时候，使用computed
• watch
  • 监听data中的数据，也可以监听路由，也有数据缓存
  • 当一个数据影响多个数据的时候，使用watch

动画

vue中的动画

• 过渡类名实现动画
• 半场动画

组件

vue组件的使用
vue组件之间的关系

• 全局组件
  • Vue.component('组件的名称',{组件的模板对象})
• 私有组件
  • components:{
    '组件名称'：'组件的模板对象'}
• 组件传值
  • 父子组件传值
  • 兄弟组件传值 （bus总线）
• 动态组件
  • component标签 is绑定具体要展示的组件名

路由

vue路由

• 定义
• 路由传参
• 路由嵌套
• 编程式导航和声明式导航(未完成)

插槽

vue插槽

• 基本插槽
  <slot></slot>
• 具名插槽
  <slot name="left"></slot>
• 作用域插槽（变量的作用域)
  子组件决定内容，父组件决定样式

请求api （获取数据）

vue请求api

• axios
  注意：axios的拦截器
• fetch
• vue-resource（基本不用）

其他

未完成

• promise
• render渲染
  • 属性，createElements方法 直接根据组件生成html结构，替换受控区域当中的内容
• mixin混入
  • 在单独的文件中，定义多个组件中都会用的方法或者数据，或者生命周期的钩子