博客
关于我
vue散碎知识点学习
阅读量:498 次
发布时间:2019-03-07

本文共 1586 字,大约阅读时间需要 5 分钟。

Vue.js学习笔记总结

1. Vue.js特点

Vue.js是一款基于数据驱动的前端框架,具有以下核心特点:

  • 数据渲染/数据同步:通过双向绑定实现实时数据更新
  • 组件化/模块化:支持代码按组件划分,提高项目复杂度管理能力
  • 功能路由、AJAX和数据流处理:支持高效的页面跳转和数据异步请求

2. Vue.js学习资源

以下是获取Vue.js相关资源的推荐链接:

  • 官方中文网站:http://cn.vuejs.org
  • 源码仓库:https://github.com/vuejs/vue
  • 常用工具:https://github.com/vuejs

3. Vue实例对象

创造一个Vue实例:

new Vue({  el: '#app',  template: '
{msg}
', data: { msg: 'Hello Vue' }})

4. 绑定事件

  • 弹性事件绑定:使用v-onv-on:keydown.enter@缩写
  • 绑定条件样式:使用v-bind:class结合数据逻辑
  • 数据更新:通过Vue.setArray.prototype.splice方法实现
  • 事件传递:通过$emit方法触发事件,父子组件通过@监听

5. 父子组件交互

  • 子组件调用父方法:@my-event="getMyEvent"
  • 父组件调用子方法:使用this.$emit
  • 子组件通讯:通过$slots传递内容和数据
  • 动态组件:通过<component v-bind:is="currentView">实现

6. Vue缓存

对缓存的处理可以使用<keep-alive>包裹组件实现

7. 元素生命周期

  • 过度的元素管理:使用v-ifv-else实现条件渲染
  • 阻止事件传播:使用.stop.prevent修饰符
  • 动画效果:使用<transition>组件实现过度效果

8. 工具推荐

  • MobaXterm:开源终端多功能工具
  • FinalShell: SSH工具推荐

9. 路由配置

  • 路由参数传递:路径参数可以直接在组件中获取
  • 自定义路由:通过routes数组实现多级页面跳转
  • 组件路由:支持通过路径参数传递组件参数

10. Vue实例方法

  • 数据监听:使用$watch方法
  • 必定显示:使用v-once指令
  • 对 supremacist语法:v-bindv-on的省略形式

11. 计算属性vs侦听属性

合理使用computed属性替代watch,避免不必要的复杂性

  • computed适用于基于其他属性计算的场景
  • watch适用于需要直接观察数据的场景

12. Class与Style绑定

对象语法:

数组语法:

13. 条件渲染

  • 条件判断:v-ifv-else
  • 逻辑控制:基于条件渲染相应的组件或内容
  • 动态模板切换:使用v-else如果v-if结合

14. 数组更新检测

  • 执行变异方法:pushpopshift等方法将触发视图更新
  • 注意事项:避免直接索引修改数组元素和改变数组长度

15. 表单输入绑定

  • Lazy加载:使用v-model.lazy优化输入绑定
  • 数字输入:使用v-model.number自动转换数据类型
  • trim处理:使用v-model.trim清除首尾空格

16. 自定义指令

  • 注册全局指令:Vue.directive
  • 指令参数传递:通过binding对象处理

17. 过滤器

  • 数据格式化:通过v-model结合filters实现
  • 场景化使用:支持链式调用和参数传递
  • 常用过滤器:实现字符串和数字转换

18. 工具

  • 使用json-server实现快速API伪造

19. 注意事项

  • 全局指令注册需优先在new Vue前执行
  • 数据变异需通过Vue.set实现响应式

通过以上内容,可以系统性地掌握Vue.js的核心知识点和实践技巧。

转载地址:http://iuhcz.baihongyu.com/

你可能感兴趣的文章
MySQL 中文问题
查看>>
MySQL 中日志的面试题总结
查看>>
mysql 中的all,5分钟了解MySQL5.7中union all用法的黑科技
查看>>
MySQL 中的外键检查设置:SET FOREIGN_KEY_CHECKS = 1
查看>>
Mysql 中的日期时间字符串查询
查看>>
mysql 中索引的问题
查看>>
MySQL 中锁的面试题总结
查看>>
MySQL 中随机抽样:order by rand limit 的替代方案
查看>>
MySQL 为什么需要两阶段提交?
查看>>
mysql 为某个字段的值加前缀、去掉前缀
查看>>
mysql 主从
查看>>
mysql 主从 lock_mysql 主从同步权限mysql 行锁的实现
查看>>
mysql 主从互备份_mysql互为主从实战设置详解及自动化备份(Centos7.2)
查看>>
mysql 主从关系切换
查看>>
MYSQL 主从同步文档的大坑
查看>>
mysql 主键重复则覆盖_数据库主键不能重复
查看>>
Mysql 事务知识点与优化建议
查看>>
Mysql 优化 or
查看>>
mysql 优化器 key_mysql – 选择*和查询优化器
查看>>
MySQL 优化:Explain 执行计划详解
查看>>