本文共 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-on和v-on:keydown.enter或@缩写
• 绑定条件样式：使用v-bind和:class结合数据逻辑
• 数据更新：通过Vue.set或Array.prototype.splice方法实现
• 事件传递：通过$emit方法触发事件，父子组件通过@监听

5. 父子组件交互

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

6. Vue缓存

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

7. 元素生命周期

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

8. 工具推荐

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

9. 路由配置

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

10. Vue实例方法

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

11. 计算属性vs侦听属性

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

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

12. Class与Style绑定

对象语法：

数组语法：

13. 条件渲染

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

14. 数组更新检测

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

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/