没有合适的资源?快使用搜索试试~ 我知道了~
7.专高2-Vue(1).docx
需积分: 9 0 下载量 152 浏览量
2022-08-31
21:35:34
上传
评论
收藏 11.14MB DOCX 举报
温馨提示
试读
197页
7.专高2-Vue(1).docx
资源推荐
资源详情
资源评论
第 I 页
专高 2 Vue
第 1 章 VUE 介绍.................................................................................................................................1
1.1 VUE 简介 1
1.2 MVC 概念 1
1.3 VUE 特点 2
1.4 HELLOWORLD 案例 3
1.5 模板语法 4
1.6 计算属性介绍 7
第 2 章 VUE 指令.................................................................................................................................9
2.1 指令介绍 9
2.2 数据绑定指令 10
2.3 V-ON 事件指令 12
2.4 V-BIND 属性绑定指令 13
2.5 条件指令 16
2.6 循环指令 17
2.7 DOM 的 DIFFING 算法 19
2.8 课堂练习 1 21
2.9 课堂练习 2 21
2.10 作业 1---选项卡 22
2.11 作业 2---三级联动 24
第 3 章 组件 ........................................................................................................................................26
3.1 模块与组件 26
3.2 全局组件 27
3.3 局部组件(重点) 28
3.4 单文件组件 31
3.5 组件通信 33
3.5.1 父传子 34
3.5.2 子传父 36
3.5.3 Prop 注意事项 38
3.6 留言板案例 39
3.7 脚手架工具 VUE-CLI 42
3.7.1 脚手架工具介绍 42
3.7.2 脚手架工具 vue-cli 安装 42
3.7.3 脚手架创建项目的目录结构 44
3.7.4 安装 vetur 插件 44
第 II 页
第 4 章 TODOLIST 案例 ..................................................................................................................45
4.1 组件化编码流程 45
4.2 初始化列表 47
4.3 添加 TODO 49
4.4 勾选 TODO 51
4.5 删除 TODO 54
4.6 底部统计 56
4.6.1 全选、取消全选 57
4.6.2 底部取消选中 58
4.6.3 统计总的任务数量 60
4.6.4 删除已完成任务 60
第 5 章 VUE 的生命周期...................................................................................................................62
5.1 生命周期介绍 62
5.2 生命周期-挂载流程 64
5.3 全局事件总线 69
5.4 全局事件总线实现步骤 70
第 6 章 VUE 插件...............................................................................................................................74
6.1 先编写一个弹框组件 74
6.2 编写弹框插件 75
6.3 点击确定按钮将数据传递给父组件 77
第 7 章 VUE 路由...............................................................................................................................80
7.1 SPA 介绍 80
7.2 VUE 路由快速入门 80
7.3 路由重定向 83
7.4 嵌套路由 84
7.5 动态路由 87
7.6 编程式路由 88
第 2 页
总结,使用 MVC 的目的是为了将业务模型层(Model)和视图层(界面展示)相分
离,更便于分工协作。
1.3 vue 特点
1. 采用组件化、模块化模式,提高代码复用率、让代码更好维护
模块,根据项目的功能拆分成不同的模块,例如:注册登录模块、订单模块、
会员模块、物流模块等等
模块,多个功能模块中,重复使用的功能,可以提取成一个组件(零件),每个
模块中,会使用不同的组件
2. 模型、视图相分离(数据、显示相分离)
3. MVVM 双向数据绑定(数据改变,视图跟着变,视图改变,数据跟着变)
4. SPA 单页面应用(Single Page Application)
多页面应用,每次点击超链接,都会重新发送 http 请求(请求服务器资源、服
务器响应),这个过程比较耗时
第 3 页
SPA 单页面应用,将所有内容都显示到 index.html 首页中,然后通过显示、隐藏
的方式实现页面的跳转
5. 使用虚拟 DOM+优秀的 Diff 算法,尽量复用 DOM 节点
6. 声明式编码
命令式编码:const a = 100; console.log(a)
声明式编码:
1.4 helloworld 案例
1. 下载/安装 vue
https://cn.vuejs.org/v2/guide/installation.html
a. 下载 vue.js,使用<script>标签引入
b. 使用 CDN 加速器
c. 使用 npm 安装
2. 准备好一个容器/根标签
3. 创建 vue 实例,只有一个参数,对象格式的:{}
4. 定义数据模块/数据项
5. 在网页中显示数据项
剩余196页未读,继续阅读
资源评论
醒了吗:-
- 粉丝: 1
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功