第一天:前端工程化与 Webpack
目标:
第二天:vue基础入门
目标:
第三天:vue基础入门- part2
目标:
第四天:组件与生命周期
目标:
第五天:ref &购物车案例
目标:
第六天:Vue组件的高级用法
目标:
第七天:路由( vue-router)
目标:
第八天:黑马头条(收尾案例)
目标:
实际的前端开发:
前端工程化指的是:在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、
标准化。
企业中的Vue项目和React项目,都是基于工程化的方式进行开发的。
好处:前端开发自成体系,有一套标准的开发方案和流程。
概念: webpack是前端项目工程化的具体解决方案。
主要功能:它提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。
好处:让程序员把工作的重心放到具体功能的实现上,提高了前端开发效率和项目的可维护性。
注意:目前Vue,React等前端项目,基本上都是基于webpack进行工程化开发的
开发上线的包加-S
只在开发用的包加-D
npm install [email protected] [email protected] -D //安装webpack的代码
配置:
在项目根目录中,创建名为webpack.config.js 的webpack配置文件,并初始化如下的基本配置:
开发时:development
上线时:production
module.exports={
mode:'development'
}
在package.json的 scripts节点下,新增dev脚本如下:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack"
},
在终端中运行npm run dev命令,启动webpack进行项目的打包构建
npm run dev
webpack-dev-server
html-webpack-plugin
在实际开发过程中,webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块,
webpack 默认处理不了,需要调用loader加载器才可以正常打包,否则会报错!
loader加载器的作用:协助webpack打包处理特定的文件模块。比如:
css-loader 可以打包处理.cSs相关的文件
less-loader可以打包处理.less相关的文件
babel-loader可以打包处理webpack无法处理的高级JS语法
base64图片 减少发起的网络请求,体积变大
用vue的好处
基于wue中捉供的指令,可以方便快捷的渲染页面的结构,数据驱动视图〔只要页面依赖的数据源变化,则页面自动重新渲染)
总结什么是vue
一套用于构建用户界面的前端框架
单页面应用程序(英文名: Single Page Application)简称SPA,顾名思义,指的是一个 Web 网站中只有唯一的一个HTML页面,所有的功能与交互都在这唯一的一个页面内完成。
在工程化的项目中,vue要做的事情很单纯:通过main.js|把 App.vue渲染到index.html的指定区域中。
npm init vite-app xxx
在工程化的项目中,vue要做的事情很单纯:通过main.js 把App.vue渲染到 index.html的指定区域中。
1.从 vue中按需导入createApp函数,
createApp函数的作用:创建vue的“单页面应用程序实例”
2. 导入app组件
3. 调用createapp函数 接受实例
4. mount挂载
组件化开发指的是:根据封装的思想,把页面上可重用的部分封装为组件,从而方便项目的开发和维护。
前端组件化开发的好处主要体现在以下两方面:
组件封装好后,彼此之间是相互独立的,不存在父子关系
在使用组件的时候,根据彼此的嵌套关系,形成了父子关系,兄弟关系
npm install lees -D
引用
注册
调用方法app.component(‘组件名’,组件)
components:{
'Hi':Hi
}
注册时, 可以写xxx.name 当名字
写标签
props是组件的自定义属性,在封装通用组件的时候,合理地使用props可以极大的提高组件的复用性!它的语法格式如下:
props:['xxx' ]
vue规定:组件中封装的自定义属性是只读的,程序员不能直接修改props的值。
要想修改props 的值,可以把props的值转存到data中,因为data中的数据都是可读可写的!
props:{
xxx:{
default:0
}
}
在声明自定义属性时,可以通过type来定义属性值的类型
加一个 scoped 就行
使用样式穿透
:deep(xxx) {
}
使用对象类型的props
计算属性本质上就是一个function函数,它可以实时监听data中数据的变化,并return一个计算后的新值,供组件渲染DOM时使用。
计算属性需要以function函数的形式声明到组件的computed选项中。
注意:计算属性侧重于得到一个计算的结果,因此计算属性中必须有return返回值@!
① 计算属性必须定义在computed节点中
② 计算属性必须是一个function函数
③ 计算属性必须当做普通属性使用
④ 计算属性必须有返回值
他会缓存计算的结果,只有计算的属性改变以后才会重新计算,性能更好
在封装组件时,为了让组件的使用者可以监听到组件内状态的变化,此时需要用到组件的自定义事件。
在emits节点中声明
触发事件
this.$emit('change')
可以维护组件内外数据的同步
父传子步骤:
子传父步骤:
目标
目录
watch 侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。
例如,监视用户名的变化并发起请求,判断用户名是否可用。
开发者需要在watch节点下,定义自己的侦听器。实例代码如下: