Vue.js基础入门

简介

Vue.js是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

Vue.js核心概念

• 实例
  • 每个Vue应用都是通过Vue构造函数创建一个Vue实例开始的
  • 选项对象: data、methods、computed、watch等
  • 生命周期钩子: created、mounted、updated、destroyed等
• 模板语法
  • 插值: {{ message }}
  • 指令: v-bind、v-on、v-model、v-if、v-for等
  • 过滤器: {{ message | capitalize }}
• 计算属性和侦听器
  • 计算属性: computed选项，基于依赖缓存
  • 侦听器: watch选项，观察和响应Vue实例上的数据变动
• 组件
  • 可复用的Vue实例
  • 组件选项: props、data、methods、computed等
  • 组件通信: props向下传递、事件向上传递

Vue.js指令系统

• 条件渲染
  • v-if: 条件性地渲染元素
  • v-show: 切换元素的display CSS属性
  • v-else和v-else-if: 配合v-if使用
• 列表渲染
  • v-for: 基于数组渲染列表
  • 支持数组、对象、整数等多种数据类型
  • 提供key属性以维护列表状态
• 事件处理
  • v-on: 监听DOM事件
  • 事件修饰符: .stop、.prevent、.capture等
  • 按键修饰符: .enter、.tab、.delete等
• 表单输入绑定
  • v-model: 在表单控件元素上创建双向数据绑定
  • 支持文本、多行文本、复选框、单选按钮等
  • 修饰符: .lazy、.number、.trim

Vue.js组件进阶

• 组件注册
  • 全局注册: Vue.component()
  • 局部注册: components选项
• Props
  • 父组件向子组件传递数据
  • Props验证: type、required、default等
  • 非Prop特性: 自动添加到组件根元素上
• 自定义事件
  • $emit: 触发事件
  • $on: 监听事件
  • .sync修饰符: 双向绑定Props
• 插槽
  • 默认插槽:
  • 具名插槽:
  • 作用域插槽: 传递数据给插槽内容