1. Vue实例

(1) 创建Vue实例

(2) el唯一根标签

【例01】el选项:定义vue组件根元素。

(3) data初始数据

【例02】data选项:定义初始数据。

(4) methods定义方法

【例03】methods选项:定义方法。

(5) computed计算属性

【例04】computed选项:计算属性。

(6) watch状态监听

【例05】watch选项:状态监听。

(7) filters过滤器

【例06】filters选项:过滤器-插值表达式使用。

【例07】filters选项:过滤器-属性绑定使用。

2. Vue数据绑定

(1) 绑定样式

【例08】绑定样式:绑定行内样式 v-bind:style=""。

【例09】绑定样式:绑定类样式 v-bind:class=""。

(2) 内置指令

【例10】内置指令:v-model表单元素的双向绑定。

【例11】内置指令:v-text 数据影响界面文本。

【例12】内置指令:v-html 数据影响界面。

【例13】内置指令:v-bind:属性名 属性值的单向绑定。

【例14】内置指令:v-on:事件名="方法名"。

【例15】内置指令:v-for遍历数组数据。

【例16】内置指令:v-if_v-show显示与隐藏。

(3) 学生列表案例

【例17】学生列表案例。

3. Vue事件

(1) 事件监听

【例18】事件监听：v-on:事件名='js脚本|事件方法名'。

【例19】事件监听：按键修饰符。

(2) 事件修饰符

【例20】事件修饰符:.stop 阻止事件冒泡。

【例21】事件修饰符:.prevent 阻止默认行为。

【例22】事件修饰符:.capture 事件捕获。

【例23】事件修饰符:.self 只有自身才能触发。

【例24】事件修饰符:.once 事件只触发一次。

4. Vue组件

(1) 什么是组件

【例25】什么是组件：自定义标签(数据和模板)。

(2) 局部注册组件

【例26】注册局部组件 new Vue中的components属性。

(3) template模板

【例27】template模板:使用template标签编写组件结构。

(4) 组件之间数据传递

【例28】组件之间数据传递--props属性。

【例29】组件之间数据传递--$emit方法。

(5) 组件切换

【例30】组件切换 v-if v-else。

【例31】多组件切换。

5. Vue的生命周期

(1) 钩子函数

(2) 实例创建

【例32】Vue的生命周期: 实例创建。

(3) 页面挂载

【例33】Vue的生命周期: 页面挂载。

(4) 数据更新

【例34】Vue的生命周期: 数据更新。

(5) 实例销毁

【例35】Vue的生命周期: 实例销毁。