蓝色大气企业网站phpcms模板,微信建设网站找哪家,wordpress博客插件,专业团队张伟原图Web前端-Vue2Vue3基础入门到实战项目-Day3 生命周期生命周期 生命周期四个阶段生命周期钩子生命周期案例created应用mounted应用 案例 - 小黑记账清单工程化开发入门工程化开发和脚手架项目运行流程index.htmlmain.js 组件化组件注册局部注册全局注册 来源 生命周期
生命… Web前端-Vue2Vue3基础入门到实战项目-Day3 生命周期生命周期 生命周期四个阶段生命周期钩子生命周期案例created应用mounted应用 案例 - 小黑记账清单工程化开发入门工程化开发和脚手架项目运行流程index.htmlmain.js 组件化组件注册局部注册全局注册 来源 生命周期
生命周期 生命周期四个阶段
Vue生命周期: 一个Vue实例从创建到销毁的整个过程生命周期四个阶段: 创建(new Vue()): 响应式数据挂载: 渲染模板更新: 数据修改, 更新视图销毁: 销毁实例 什么时候可以发送初始化渲染请求 越早越好, 创建阶段 什么时候可以开始操作dom 至少dom得渲染出来, 挂载阶段
生命周期钩子
Vue生命周期函数(钩子函数): Vue生命周期过程中, 会自动运行一些函数, 被称为生命周期钩子 - 可以在特定阶段运行代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv idapph3{{ title }}/h3divbutton clickcount---/buttonspan{{ count }}/spanbutton clickcount/button/div/divscript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {count: 100,title: 计数器},// 1. 创建阶段(准备数据)beforeCreate(){console.log(beforeCreate 响应式数据准备好之前, this.count) // undefined},created() {console.log(beforeCreate 响应式数据准备好之前, this.count) // 100},// 2. 挂载阶段(渲染模板)beforeMount() {console.log(beforeMount 模板渲染之前, document.querySelector(h3).innerHTML) // {{ title }}},mounted() {console.log(mounted 模板渲染之后, document.querySelector(h3).innerHTML) // 计数器},// 3. 更新阶段(修改数据 - 更新视图)beforeUpdate() {console.log(beforeUpdate 数据修改了, 视图还没更新, document.querySelector(span).innerHTML)},updated() {console.log(updated 数据修改了, 视图已经更新, document.querySelector(span).innerHTML)},// 4. 卸载阶段beforeDestroy() {console.log(beforeDestroy 卸载前)console.log(清除掉一些Vue以外的资源占用, 定时器, 延时器...)},destroyed() {console.log(destroyed 卸载后)}})/script
/body/html生命周期案例
created应用
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;list-style: none;}.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;}.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;}.news .left .title {font-size: 20px;}.news .left .info {color: #999999;}.news .left .info span {margin-right: 20px;}.news .right {width: 160px;height: 120px;}.news .right img {width: 100%;height: 100%;object-fit: cover;}/style
/head
bodydiv idappulli classnews v-for(item, index) in list :keyitem.iddiv classleftdiv classtitle {{item.title}} /divdiv classinfospan {{item.source}} /spanspan {{item.time}} /span/div/divdiv classrightimg :srcitem.img alt/div/li/ul/divscript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript// 接口地址http://hmajax.itheima.net/api/news// 请求方式getconst app new Vue({el: #app,data: {list: []},async created () {// 1. 发送请求, 获取数据const res await axios.get(http://hmajax.itheima.net/api/news)// 2. 将数据更新给data中的listthis.list res.data.data}})/script
/body
/htmlmounted应用 !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title示例-获取焦点/title!-- 初始化样式 --link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/reset.css2.0.2/reset.min.css!-- 核心样式 --stylehtml,body {height: 100%;}.search-container {position: absolute;top: 30%;left: 50%;transform: translate(-50%, -50%);text-align: center;}.search-container .search-box {display: flex;}.search-container img {margin-bottom: 30px;}.search-container .search-box input {width: 512px;height: 16px;padding: 12px 16px;font-size: 16px;margin: 0;vertical-align: top;outline: 0;box-shadow: none;border-radius: 10px 0 0 10px;border: 2px solid #c4c7ce;background: #fff;color: #222;overflow: hidden;box-sizing: content-box;-webkit-tap-highlight-color: transparent;}.search-container .search-box button {cursor: pointer;width: 112px;height: 44px;line-height: 41px;line-height: 42px;background-color: #ad2a27;border-radius: 0 10px 10px 0;font-size: 17px;box-shadow: none;font-weight: 400;border: 0;outline: 0;letter-spacing: normal;color: white;}body {background: no-repeat center /cover;background-color: #edf0f5;}/style
/headbody
div classcontainer idappdiv classsearch-containerimg srchttps://www.itheima.com/images/logo.png altdiv classsearch-boxinput typetext v-modelwords idinpbutton搜索一下/button/div/div
/divscript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptconst app new Vue({el: #app,data: {words: },// 1. 等输入框渲染出来mounted() {// 2. 让输入框获取焦点document.querySelector(#inp).focus()},})
/script/body/html案例 - 小黑记账清单
基本渲染 created请求数据(封装渲染方法)将数据更新给data数据动态渲染 添加功能 收集表单数据 v-model点击发送添加请求重新渲染(封装渲染方法) 删除功能 点击按钮传递id根据id发送删除请求重新渲染(封装渲染方法) 饼图渲染 mounted初始化echarts实例渲染函数中setOption动态更新饼图(map)
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title!-- CSS only --linkrelstylesheethrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.3/dist/css/bootstrap.min.css/style.red {color: red!important;}.search {width: 300px;margin: 20px 0;}.my-form {display: flex;margin: 20px 0;}.my-form input {flex: 1;margin-right: 20px;}.table :not(:first-child) {border-top: none;}.contain {display: flex;padding: 10px;}.list-box {flex: 1;padding: 0 30px;}.list-box a {text-decoration: none;}.echarts-box {width: 600px;height: 400px;padding: 30px;margin: 0 auto;border: 1px solid #ccc;}tfoot {font-weight: bold;}media screen and (max-width: 1000px) {.contain {flex-wrap: wrap;}.list-box {width: 100%;}.echarts-box {margin-top: 30px;}}/style/headbodydiv idappdiv classcontain!-- 左侧列表 --div classlist-box!-- 添加资产 --form classmy-forminput typetext classform-control placeholder消费名称 v-model.trimname/input typetext classform-control placeholder消费价格 v-model.numberprice/button typebutton classbtn btn-primary clickadd添加账单/button/formtable classtable table-hovertheadtrth编号/thth消费名称/thth消费价格/thth操作/th/tr/theadtbodytr v-for(item, index) in list :keyitem.idtd {{index1}} /tdtd {{item.name}} /tdtd :class{red: item.price 500} {{item.price.toFixed(2)}} /tdtda hrefjavascript:; click.preventdel(item.id)删除/a/td/tr/tbodytfoottrtd colspan4消费总计 {{totalPrice}}/td/tr/tfoot/table/div!-- 右侧图表 --div classecharts-box idmain/div/div/divscript srchttps://cdn.staticfile.org/echarts/4.3.0/echarts.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript/*** 接口文档地址* https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058* * 功能需求* 1. 基本渲染* 1.1 发送请求获取数据 created* 1.2 拿到数据, 存到data的响应式数据中* 1.3 结合数据, 进行渲染 v-for* 1.4 消费统计 计算属性* 2. 添加功能* 2.1 收集表单数据 v-model* 2.2 给添加按钮注册点击事件, 发送添加请求* 2.3 需要重新渲染* 3. 删除功能* 3.1 注册点击事件, 传参传 id* 3.2 根据id发送删除请求* 3.3 需要重新渲染* 4. 饼图渲染* 4.1 初始化一个饼图 echarts.init(dom) mounted钩子实现* 4.2 根据数据实时更新饼图 echarts.setOption({ ... })*/const app new Vue({el: #app,data: {list: [],name: ,price: },created () {this.getList()},mounted () {this.myChart echarts.init(document.getElementById(main))this.myChart.setOption({// 大标题title: {text: 消费账单列表,left: center},// 提示框tooltip: {trigger: item},// 图例legend: {orient: vertical,left: left},// 数据项series: [{name: 消费账单,type: pie,radius: 50%, // 圆半径data: [],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: rgba(0, 0, 0, 0.5)}}}]})},methods: {async getList(){const res await axios.get(https://applet-base-api-t.itheima.net/bill, {params: {creator: cen}})this.list res.data.data// 更新图标this.myChart.setOption({series: [{// data: [// { value: 1048, name: Search Engine },// { value: 735, name: Direct },// ],data: this.list.map(item ({value: item.price, name: item.name}))}]})},async add(){if(!this.name){alert(请输入消费名称)return}if(typeof this.price ! number){alert(请输入正确的消费价格)return}// 1. 发送添加请求const res await axios.post(https://applet-base-api-t.itheima.net/bill, {creator: cen,name: this.name,price: this.price})// 2. 重新渲染this.getList()this.name this.price },async del(id){// 1. 发送删除请求const res await axios.delete(https://applet-base-api-t.itheima.net/bill/${id})// 2. 重新渲染this.getList()}},computed: {totalPrice(){return this.list.reduce((sum, item) sumitem.price, 0)}}})/script/body
/html工程化开发入门
工程化开发和脚手架
使用步骤 全局安装: 右键开始菜单, 在Windows PowerShell(管理员)中输入yarn global add vue/cli或npm i vue/cli -g查看Vue版本: vue --version创建项目架子: vue create project-name(项目名不能用中文)启动项目: yarn serve或npm run serve(找package.json)
项目运行流程 index.html
!DOCTYPE html
html langheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width,initial-scale1.0link relicon href% BASE_URL %favicon.icotitle% htmlWebpackPlugin.options.title %/title/headbody!-- 兼容: 给不支持js的浏览器一个提示 --noscriptstrongWere sorry but % htmlWebpackPlugin.options.title % doesnt work properly without JavaScript enabled. Please enable it to continue./strong/noscript!-- Vue所管理的容器: 将来创建结构动态渲染这个容器 --div idapp!-- 工程化开发模式中: 这里不再直接编写模板语法, 而是通过App.vue提供结构渲染 --/div!-- built files will be auto injected --/body
/htmlmain.js
// 文件核心作用: 导入App.vue, 基于App.vue创建结构渲染index.html
// 1. 导入 Vue 核心包
import Vue from vue
// 2. 导入 App.vue 根组件
import App from ./App.vue// 提示: 当前处于生命环境(生产环境 / 开发环境)
Vue.config.productionTip false// 3. Vue实例化, 提供render方法 - 基于App.vue创建结构渲染index.html
new Vue({// el: #app, // 作用: 和$mount(选择器)作用一致, 用于指定Vue所管理容器// render: h h(App),render: (createElement) {// 基于App创建元素结构return createElement(App)}
}).$mount(#app)组件化
组件化: 页面拆分成一个个组件, 每个组件有着独立的结构, 样式, 行为 好处: 便于维护, 利于复用 - 提升开发效率组件分类: 普通组件, 根组件 根组件: 整个应用最上层的组件, 包裹所有普通小组件, 一个根组件App.vue, 包含三个部分 template结构(只能有一个根节点-vue2)style样式(可以支持less, 需要装包less和less-loader)script行为
templatediv classAppdiv classbox clickfn/div/div
/templatescript
export default {methods: {fn () {console.log(点击按钮)}}
}
/scriptstyle langless
/*
让style支持less
1. 给style加上 langless
2. 安装依赖包 less less-loadernpm install less less-loader --save-dev
*/
.App {width: 400px;height: 400px;background-color: pink;.box {width: 100px;height: 100px;background-color: blue;}
}
/style组件注册
使用: 当成html标签使用组件名/组件名注意: 组件名规范 - 大驼峰命名法, HmHeader
局部注册
局部注册: 只能在注册的组件内使用
创建.vue文件(三个组成部分)在使用的组件内导入并注册
templatediv classApp!-- 头部组件 --HmHeader/HmHeader!-- 主体组件 --HmMain/HmMain!-- 底部组件 --HmFooter/HmFooter/div
/templatescript
import HmHeader from ./components/HmHeader.vue
import HmMain from ./components/HmMain.vue
import HmFooter from ./components/HmFooter.vue
export default {components: {// 组件名: 组件对象HmHeader: HmHeader,HmMain: HmMain,HmFooter: HmFooter}
}
/scriptstyle
.App {width: 600px;height: 700px;background-color: #87ceeb;margin: 0 auto;padding: 20px;
}
/style全局注册
在main.js中导入
import HmButton from ./components/HmButton.vue
Vue.component(HmButton, HmButton)来源
黑马程序员. Vue2Vue3基础入门到实战项目
