博客
关于我
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中你必须知道的10件事,1.5万字!
查看>>
MySQL中使用IN()查询到底走不走索引?
查看>>
Mysql中使用存储过程插入decimal和时间数据递增的模拟数据
查看>>
MySql中关于geometry类型的数据_空的时候如何插入处理_需用null_空字符串插入会报错_Cannot get geometry object from dat---MySql工作笔记003
查看>>
mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案
查看>>
mysql中出现Unit mysql.service could not be found 的解决方法
查看>>
mysql中出现update-alternatives: 错误: 候选项路径 /etc/mysql/mysql.cnf 不存在 dpkg: 处理软件包 mysql-server-8.0的解决方法(全)
查看>>
Mysql中各类锁的机制图文详细解析(全)
查看>>
MySQL中地理位置数据扩展geometry的使用心得
查看>>
Mysql中存储引擎简介、修改、查询、选择
查看>>
Mysql中存储过程、存储函数、自定义函数、变量、流程控制语句、光标/游标、定义条件和处理程序的使用示例
查看>>
mysql中实现rownum,对结果进行排序
查看>>
mysql中对于数据库的基本操作
查看>>
Mysql中常用函数的使用示例
查看>>
MySql中怎样使用case-when实现判断查询结果返回
查看>>
Mysql中怎样使用update更新某列的数据减去指定值
查看>>
Mysql中怎样设置指定ip远程访问连接
查看>>
mysql中数据表的基本操作很难嘛,由这个实验来带你从头走一遍
查看>>
Mysql中文乱码问题完美解决方案
查看>>
mysql中的 +号 和 CONCAT(str1,str2,...)
查看>>