网站优化seo四个建议,住房建设官方网站,附近临时工500元一天,大连谷歌seo目录 一、今日目标
1.生命周期
2.综合案例-小黑记账清单
3.工程化开发入门
4.综合案例-小兔仙首页
二、Vue生命周期
三、Vue生命周期钩子
四、生命周期钩子小案例
1.在created中发送数据
六、工程化开发模式和脚手架
1.开发Vue的两种方式
2.Vue CLI脚手架
基本介绍…目录 一、今日目标
1.生命周期
2.综合案例-小黑记账清单
3.工程化开发入门
4.综合案例-小兔仙首页
二、Vue生命周期
三、Vue生命周期钩子
四、生命周期钩子小案例
1.在created中发送数据
六、工程化开发模式和脚手架
1.开发Vue的两种方式
2.Vue CLI脚手架
基本介绍
好处
创建一个Vue项目的标准基础架子的步骤
七、项目目录介绍和运行流程
1.项目目录介绍
2.运行流程
八、组件化开发
九、根组件 App.vue
1.根组件介绍
2.全部组件都由三部分构成
十、普通组件的注册使用-局部注册
1.特点
2.步骤
3.使用组件的方式
4.注意
5.案例
十一、普通组件的注册使用-全局注册
1.特点
2.步骤
3.使用
4.注意
5.案例
十二、综合案例
1.小兔仙首页启动项目演示
2.小兔仙组件拆分示意图
3.开发思路 一、今日目标
1.生命周期 生命周期介绍 生命周期的四个阶段 生命周期钩子 声明周期案例 2.综合案例-小黑记账清单 列表渲染 添加/删除 饼图渲染 3.工程化开发入门 工程化开发和脚手架之前都是引包开发 项目运行流程 组件化 组件注册 4.综合案例-小兔仙首页 拆分模块-局部注册 结构样式完善 拆分组件 – 全局注册
二、Vue生命周期
思考什么时候可以发送初始化渲染请求越早越好什么时候可以开始操作dom至少dom得渲染出来 初始化请求就是一进页面就立即从后台拿数据进行页面的渲染 当响应式数据创建好之后才能发初始化渲染请求才能对它修改和赋值 挂载完之后才能操作dom
Vue生命周期一个Vue实例从创建 到 销毁 的整个过程。
生命周期四个阶段① 创建 ② 挂载 ③ 更新 ④ 销毁
1.在创建阶段创建响应式数据将data中的普通数据转换为响应式数据
2.在挂载阶段基于提供的数据渲染模板
3.在更新阶段修改数据更新视图
4.在销毁阶段关闭浏览器就会销毁Vue实例 三、Vue生命周期钩子
在Vue的生命周期过程中会自动运行一些函数(生命周期函数)被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码 Vue生命周期钩子函数写的位置和data配置项同级 重点看created和mounted函数 created函数在创建响应式数据之后执行这时可以开始发送初始化渲染请求 mounted函数在模板渲染完成之后执行在这一刻开始DOM才算渲染完成才能操作DOM了 beforeDestroy函数在Vue实例快销毁的时候执行一些操作 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapph3{{ title }}/h3divbutton clickcount---/buttonspan{{ count }}/spanbutton clickcount/button/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {count: 100,title: 计数器},// 1. 创建阶段准备数据beforeCreate () {console.log(beforeCreate 响应式数据准备好之前, this.count)},created () {console.log(created 响应式数据准备好之后, this.count)// this.数据名 请求回来的数据// 可以开始发送初始化渲染的请求了},// 2. 挂载阶段渲染模板beforeMount () {console.log(beforeMount 模板渲染之前, document.querySelector(h3).innerHTML)},mounted () {console.log(mounted 模板渲染之后, document.querySelector(h3).innerHTML)// 可以开始操作dom了},// 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
浏览器控制台的效果
四、生命周期钩子小案例
1.在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 v-for(item, index) in list :keyitem.id classnewsdiv 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/vue2/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. 更新到 list 中用于页面渲染 v-forthis.list res.data.data}})/script
/body
/html
六、工程化开发模式和脚手架
1.开发Vue的两种方式 核心包传统开发模式基于html / css / js 文件直接引入核心包开发 Vue。 工程化开发模式基于构建工具例如webpack开发Vue。 工程化开发模式优点
提高编码效率比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等
工程化开发模式问题 webpack配置不简单 雷同的基础配置 缺乏统一的标准
为了解决以上问题所以我们需要一个工具Vue CLI生成标准化的配置
2.Vue CLI脚手架
基本介绍
Vue CLI 是Vue官方提供的一个全局命令工具
可以帮助我们快速创建一个Vue项目的标准基础架子就是vue的项目目录。【集成了webpack配置】
好处 开箱即用零配置 内置babel等工具 标准化的webpack配置
创建一个Vue项目的标准基础架子的步骤 全局安装Vue CLI只需安装一次即可 yarn global add vue/cli 或者 npm i vue/cli -g 前面那个命令安装可能会报找不到命令错误直接换后面那个命令安装就可以了 查看vue/cli版本确认是否安装成功 vue --version 创建项目架子vue create project-name(项目名不能使用中文) 在哪个目录下运行的这个命令项目就创建在哪个目录下 运行项目yarn serve 或者 npm run serve(命令不固定看package.json文件中的scripts) 进入到vue项目的根目录执行上述命令 七、项目目录介绍和运行流程
1.项目目录介绍
虽然脚手架中的文件有很多目前咱们只需看下面标绿的三个文件和下面这四个即可
node_modules存放第三方依赖的public存放html文件src写代码的文件夹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提供结构渲染 --!-- 将来在App.vue中提供模板提供结构 --/div!-- built files will be auto injected --/body
/html
main.js 入口文件
//main.js文件的核心作用导入App.vue基于App.vue创建结构渲染index.html//1.导入vue核心包
import Vue from vue
//2.导入App.vue根组件
import App from ./App.vue//在console中提示当前处于什么环境生产环境/开发环境
Vue.config.productionTip false//3.实例化Vue提供render方法基于App.vue创建结构渲染index.html
new Vue({render: h h(App),
}).$mount(#app) //$mount(选择器)作用和 el:#app 一样用于指定Vue要管理的容器 App.vue App根组件
templatediv idappimg altVue logo src./assets/logo.pngHelloWorld msgWelcome to Your Vue.js App//div
/templatescript
import HelloWorld from ./components/HelloWorld.vueexport default {name: App,components: {HelloWorld}
}
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
/style所以整体的流程就是基于App.vue来创建结构最终渲染index.html里面的id属性为app的盒子
2.运行流程 八、组件化开发
组件化可以将一个页面 拆分成 一个个的组件每个组件都有自己独立的结构、样式、行为在使用组件时但组件使用的顺序来渲染。
好处便于维护利于复用 → 提升开发效率。
组件分类普通组件、根组件。
根组件整个应用最上层的组件包裹所有普通小组件
比如下面这个页面可以把所有的代码都写在一个页面中但是这样显得代码比较混乱难易维护。咱们可以按模块进行组件划分 九、根组件 App.vue
1.根组件介绍
整个应用最上层的组件包裹所有的普通小组件 2.全部组件都由三部分构成 语法高亮插件 三部分构成 template标签结构 有且只能一个根元素 script标签: js逻辑 style标签 样式 (可支持less需要装包)
template!-- 这里面写HTML标签 --
/templatescript
//export default中导出当前组件的配置项
//里面可以提供data methods computed watch 生命周期八大钩子函数
export default {}
/scriptstyle!-- 这里面写CSS样式 --
/style让组件支持less 1 style标签langless 开启less功能 2 装包: yarn add less less-loader -D 或者npm i less less-loader -D
十、普通组件的注册使用-局部注册
1.特点
局部注册的组件 只能在注册的组件内使用
2.步骤 先在components目录下创建.vue组件(文件)三个组成部分 在要使用的组件内先导入组件在script标签中导入组件再注册组件在components配置项中注册组件最后使用组件注册组件的时候如果组件名和组件对象同名则只用写组件名即可
3.使用组件的方式
和使用html标签一样组件名/组件名
4.注意
组件命名的规范 — 大驼峰命名法 如 HmHeader
5.案例
components目录下的HmHeader.vue文件
templatediv classhm-header我是hm-header/div
/templatescript
export default {}
/scriptstyle
.hm-header{height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: rgb(196, 45, 207);color: white;
}
/style
components目录下的HmMain.vue文件
templatediv classhm-main我是hm-main/div/templatescriptexport default {}/scriptstyle.hm-main{height: 400px;line-height: 400px;text-align: center;font-size: 30px;background-color: coral;color: white;margin: 20px 0;}/style
components目录下的HmFooter.vue文件
templatediv classhm-footer我是hm-footer/div/templatescriptexport default {}/scriptstyle.hm-footer{height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: rgb(20, 32, 211);color: white;}/style
App.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,HmFooter},
}
/scriptstyle
.App {width: 600px;height: 700px;background-color: #459cc8;margin: 0 auto;padding: 20px;
}
/style
运行vue项目 十一、普通组件的注册使用-全局注册
1.特点
全局注册的组件在项目的任何组件中都能使用。
通用的组件可以进行全局注册。
2.步骤 在components目录下创建.vue组件(文件)三个组成部分 main.js中全局注册组件
3.使用
当成HTML标签直接使用 组件名/组件名 4.注意
组件名规范 — 大驼峰命名法 如 HmHeader
5.案例
1.先在components目录下创建HmButton.vue组件(文件)
templatebutton classhm-button通用按钮/button
/templatescript
export default {}
/scriptstyle
.hm-button {height: 50px;line-height: 50px;padding: 0 20px;background-color: #3bae56;border-radius: 5px;
}
/style
2.然后在main.js中进行全局注册
import Vue from vue
import App from ./App.vue
import HmButton from ./components/HmButton.vueVue.config.productionTip false//全局注册组件
Vue.component(HmButton, HmButton)new Vue({render: h h(App),
}).$mount(#app)3.最后在要使用的组件里面使用
templatediv classhm-main我是hm-mainHmButton/HmButton/div/templatescriptexport default {}/scriptstyle.hm-main{height: 400px;line-height: 400px;text-align: center;font-size: 30px;background-color: coral;color: white;margin: 20px 0;}/style 十二、综合案例
1.小兔仙首页启动项目演示
2.小兔仙组件拆分示意图 3.开发思路 分析页面按模块拆分组件如上图搭架子 (局部或全局注册) 根据设计图编写组件 html 结构 css 样式 (已准备好) 拆分封装通用的小组件 (局部或全局注册) 将来 → 通过 js 动态渲染实现功能
