前言：

必备前提:

●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 ...

VUE 尚硅谷学习内容详解

前端工程化与webpack

VUE基础入门

①el: 挂载点

②data:数据对象

本地应用

①v-text

②v-html

③v-on基础

✍

VUE 尚硅谷学习内容详解相关推荐

最新文章

热门文章

VUE 尚硅谷 学习内容详解

前端工程化与webpack

VUE基础入门

①el: 挂载点

②data:数据对象

本地应用

①v-text

②v-html

③v-on基础

✍ insertAdIfNeeded();

VUE 尚硅谷 学习内容详解相关推荐

最新文章

热门文章

VUE 尚硅谷学习内容详解

✍

VUE 尚硅谷学习内容详解相关推荐