VUE 尚硅谷 学习内容详解
前言:
必备前提:
●HTML + CSS + JavaScript
●WebAPI ( DOM + BOM)
●Ajax
可选前提:
●Node.js
特点:
1.采用组件化模式,提高代码复用率、且让代码更好维护。
2.声明式编码,让编码人员无需直接操作DOM,提高开发效率。
3.使用 虚拟DOM +优秀的 Diff算法 ,尽量复用DOM节点。
本篇文章学习内容包括:
1️⃣前端工程化与Webpack
●前端工程化的相关概念
●Webpack 的常见用法
●打包发布
●Source Map
目标:
①了解工程化的前端开发方式;
②能够知道Webpack在实际开发中所起到的作用。
2️⃣vue基础入门- part1
●Vue 的基本使用步骤
●Vue中常用的指令
●vue-devtools 调试工具
目标:
①能够使用 Vue的指令完成页面结构的渲染
②能够使用 Vue的调试工具辅助Vue的开发
3️⃣vue基础入门- part2
●过滤器和侦听器
●计算属性的用法
●axios的基本用法
●vue-cli 的安装和使用
目标:
①能够在 实际开发中合理运用过滤器、侦听器、计算属性解决自己遇到的问题
②能够使用 axios发起Ajax请求
③能够使用vue-cli工具生成工程化的Vue项目
4️⃣组件与生命周期
●组件的注册与使用
●组件的 props自定义属性
●解决组件样式冲突
●组件的生命周期
●组件之间的通讯 (数据共享)
目标:
①能够掌握.vue单文件组件的基本用法
②能够掌握组件通讯的三种方式
③掌握组件生命周期的执行顺序和应用场景
5️⃣ref &购物车案例
●使用ref引用DOM元素和组件实例
●$nextTick的基本使用
●购物车案例
目标:
①能够使用ref获取页面上DOM或组件的引用
②能够知道$nextTick的应用场景并合理地使用
③通过“购物车案例”巩固前4天所有学知识
6️⃣Vue组件的高级用法
●动态组件的使用
●插槽的使用(默认插槽、具名插槽、作用域插槽)
●自定义指令
●ESLint的使用
目标:
①能够使用keep-alive实现组件的缓存
②能够使用插槽提高组件的复用性
③能够了解常见的ESLint语法规则
7️⃣路由( vue-router )
●路由的基本配置与使用
●路由重定向
●嵌套路由、 动态路由
●编程式导航、路由导航守卫
目标:
①能够在项目中安装和配置路由
②能够使用路 由实现单页面应用程序的开发
③能够使用 导航守卫控制路由的访问权限
8️⃣黑马头条(收尾案例)
●Vant组件库
●封装axios
●上拉加载&下拉刷新
●Vant主题定制
目标:
①掌握Vant组件库的基本使用
②能够知道如何封装axios请求模块
③能够知道如何实现上拉加载和下拉刷新功能
前端工程化与webpack
①理解什么是前端工程化
●转变对前端开发的认知
②了解webpack的基本用法
●为后面Vue和React课程的学习做技术储备
③不强制要求大家能手动配置webpack
●一定要知道webpack在项目中有什么作用
●清楚webpack中的核心概念
小白眼中的前端开发VS实际的前端开发
小白眼中的前端开发:
●会写HTML + CSS + JavaScript就会前端开发
●需要美化页面样式,就拽一个bootstrap过来
●需要操作DOM或发起Ajax请求,再拽-一个jQuery过来
●需要快速实现网页布局效果,就拽一个Layui过来
实际的前端开发:
●模块化(js的模块化、CSS 的模块化、资源的模块化)
●组件化(复用现有的UI结构、样式、行为)
●规范化(目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理)
●自动化(自动化构建、自动部署、自动化测试)
前端工程化
指的是:在企业级的前端项目开发中, 把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
企业中的Vue项目和React项目,都是基于工程化的方式进行开发的。
好处:前端开发自成体系,有一套标准的开发方案和流程。
前端工程化的解决方案
早期的前端工程化解决方案:
●grunt ( Grunt: JavaScript 世界的构建工具 | Grunt中文网Grunt 是基于 Node.js 的项目构建工具。它可以自动运行你所设定的任务。Grunt 拥有数量庞大的插件,几乎任何你所要做的事情都可以用 Grunt 实现。https://www.gruntjs.net/ )
●gulp ( https:/ /www.gulpjs.com.cn/ )
目前主流的前端工程化解决方案:
●webpack ( https:/ /www.webpackjs.com/ )
●parcel ( Parcel 中文网https://zh.parceljs.org/ )
VUE基础入门
①el: 挂载点
el是用来设置Vue实例挂载(管理)的元素
Vue.js - 渐进式 JavaScript 框架 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org
<div id="app">{{ message }}
</div>var app = new Vue({el:"#app",data:{message:"黑马程序员"}
})
Vue实例的作用范围是什么呢?
Vue会管理el选项命中的元素及其内部的后代元素
是否可以使用其他的选择器?
可以使用其他的选择器但是建议使用ID选择器(唯一)
是否可以设置其他的dom元素呢?
可以使用其他的双标签, 不能使用HTML和BODY
②data:数据对象
◆Vue中用到的数据定义在data中
◆data中可以写复杂类型的数据
◆渲染复杂类型数据时,遵守js的语法即可
本地应用
①v-text
设置标签的文本值(textContent)
- v-text 指令的作用是:设置标签的内容(textContent)
- 默认写法会替换全部内容使用差值表达式{ }可以替换指定内容
②v-html
设置标签的 innerHTML。
- v-html指令的作用是: 设置元素的innerHTML
- 内容中有html结构会被解析为标签
- v-text指令无论内容是什么,只会解析为文本
③v-on基础
为元素绑定事件。
- v-on指令的作用是:为元素绑定事件
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义在methods属性中
- 方法内部通过this关键字可以访问定义在data中数据
✍
VUE 尚硅谷 学习内容详解相关推荐
- Java学习笔记 | 尚硅谷项目三详解
该笔记基于B站视频:尚硅谷Java入门视频教程 目录 1,目标 2,需求说明 2.1,功能实现 2.1,菜单显示 2.2,添加功能 2.3,删除功能 2.3,查看团队成员 3,软件设计结构 4,具体实 ...
- JavaScript pink老师学习内容详解
计算机基础 区分: 编程语言 编程语言和标记语言的不同 常见的数据存储单位及其换算关系 内存的主要作用以及特点 ①编程: 让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程 ...
- SQL Server DBA工作内容详解
原文:SQL Server DBA工作内容详解 在Microsoft SQL Server 2008系统中,数据库管理员(Database Administration,简称为DBA)是最重要的角色. ...
- keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处 在做电商有关的项目中 ...
- php动态写入vue,Vue自定义动态组件使用详解
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下. 现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这 ...
- Java 基础 第3阶段:高级应用——尚硅谷学习笔记(含面试题) 2023年
Java 基础 第 3 阶段:高级应用--尚硅谷学习笔记(含面试题) 2023 年 Java 基础 第 3 阶段:高级应用--尚硅谷学习笔记(含面试题) 2023 年 第 9 章 异常处理 9.1 异 ...
- 深度学习优化函数详解(5)-- Nesterov accelerated gradient (NAG)
深度学习优化函数详解系列目录 本系列课程代码,欢迎star: https://github.com/tsycnh/mlbasic 深度学习优化函数详解(0)-- 线性回归问题 深度学习优化函数详解(1 ...
- vue里页面的缓存详解
关于vue里页面的缓存详解 实用的例子ABC 往下查看 keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染. 用法: 在keep-alive标签内部添加 i ...
- 视频教程-深度学习原理详解及Python代码实现-深度学习
深度学习原理详解及Python代码实现 大学教授,美国归国博士.博士生导师:人工智能公司专家顾问:长期从事人工智能.物联网.大数据研究:已发表学术论文100多篇,授权发明专利10多项 白勇 ¥88.0 ...
最新文章
- 2021全国高校计算机能力挑战赛(初赛)Java试题二
- android linearlayout 边框 圆角,如何将圆角半径应用于LinearLayout
- pytho sin(1/x)震荡间断点
- 通过HTTP协议实现多线程下载
- wifi定位算法android,WIFI定位算法
- 电脑公司 Ghost XP SP3 国庆特别版 v2011.10
- jmeter 加密解密_犯罪大师入门篇密文答案 谜之解密入门篇密文解题详解_游戏资讯...
- mysql 查看索引 命令_MySQL命令篇之库、表、索引、用户、视图及SELECT查询
- python 加锁_Python 共享变量加锁、释放详解
- 10个精妙的Java编码最佳实践
- python3—列表
- Python控制Photoshop(Python+Com)
- jmeter开发导入excel脚本
- Heckman 两阶段法及与工具变量法的区别
- stata 导出 相关系数表_STATA数据处理技巧与计量分析二|基本语句介绍
- 【生物信息学】外显子测序的原理及优缺点
- PCI/PCIe的学习笔记
- 电子表格计算机时间格式,在Excel表格中输入日期的五种方法与技巧
- 《金牌网管师——助理级网吧网管》目录
- 关于vue项目中的 日志管理功能
热门文章
- 【WT588F】网页上位机操作演示
- Oracle DBA-01_Oracle 11G R2 for Solaris 10(Spac)安装实施报告
- 在手机上编程:自制的小飞可编程复数计算器(小飞计算器)
- 群晖监控备份方案,为金融企业信息安全保驾护航
- 提供云媒体服务器图片,云开发 把媒体文件上传到微信服务器 已知报错
- 【LeetCode第59题】长舒一口气,终于学会了这苦涩难懂的 螺旋矩阵II
- 动车组检修问题 数学建模
- java期末考试复习题_JAVA期末考试复习试题
- Sublime Text3(mac版)上好用的插件
- python3 破解 geetest(极验)的滑块验证码
该笔记基于B站视频:尚硅谷Java入门视频教程 目录 1,目标 2,需求说明 2.1,功能实现 2.1,菜单显示 2.2,添加功能 2.3,删除功能 2.3,查看团队成员 3,软件设计结构 4,具体实 ...
计算机基础 区分: 编程语言 编程语言和标记语言的不同 常见的数据存储单位及其换算关系 内存的主要作用以及特点 ①编程: 让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程 ...
原文:SQL Server DBA工作内容详解 在Microsoft SQL Server 2008系统中,数据库管理员(Database Administration,简称为DBA)是最重要的角色. ...
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处 在做电商有关的项目中 ...
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下. 现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这 ...
Java 基础 第 3 阶段:高级应用--尚硅谷学习笔记(含面试题) 2023 年 Java 基础 第 3 阶段:高级应用--尚硅谷学习笔记(含面试题) 2023 年 第 9 章 异常处理 9.1 异 ...
深度学习优化函数详解系列目录 本系列课程代码,欢迎star: https://github.com/tsycnh/mlbasic 深度学习优化函数详解(0)-- 线性回归问题 深度学习优化函数详解(1 ...
关于vue里页面的缓存详解 实用的例子ABC 往下查看 keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染. 用法: 在keep-alive标签内部添加 i ...
深度学习原理详解及Python代码实现 大学教授,美国归国博士.博士生导师:人工智能公司专家顾问:长期从事人工智能.物联网.大数据研究:已发表学术论文100多篇,授权发明专利10多项 白勇 ¥88.0 ...