销毁1.创建阶段#xff1a;创建响应式数据2.挂载阶段#xff1a;渲染模板3.更新阶段#xff1a;修改…1.

生命周期

销毁1.创建阶段创建响应式数据2.挂载阶段渲染模板3.更新阶段修改数据更新视图4.销毁阶段销毁Vue实例

1.2

/titleDocument/title/headbodydiv

idapph3{{

clickcount/button/div/divscript

srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script!--

Vue生命周期钩子Vue生命周期过程中会自动运行一些函数被称为【生命周期钩子】让开发者可以在【特定阶段】运行自己的代码--scriptconst

app

{console.log(beforeUpdata,this.count,document.querySelector(span).innerHTML);//

beforeUpdata

{console.log(updated,this.count,document.querySelector(span).innerHTML);//

updated

{console.log(beforeDestory);},destroyed()

{console.log(destroyed);},});/script/body

/html1.3

classtitle{{item.title}}/divdiv

classinfospan{{item.source}}/spanspan{{item.time}}/span/div/divdiv

classrightimg

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

axios.get(http://hmajax.itheima.net/api/news);//

console.log(res.data.data)this.list

res.data.data;},});/script/body

/html1.3.2

--linkrelstylesheethrefhttps://cdn.jsdelivr.net/npm/reset.css2.0.2/reset.min.css/!--

核心样式

content-box;-webkit-tap-highlight-color:

.search-box

srchttps://www.itheima.com/images/logo.png

alt

/button搜索一下/button/div/div/divscript

srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst

app

{document.querySelector(#inp).focus();},});/script/body

/html2.

--linkrelstylesheethrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.3/dist/css/bootstrap.min.css/style.red

{color:

classmy-forminputtypetextclassform-controlplaceholder消费名称v-model.trimbillName/inputtypetextclassform-controlplaceholder消费价格v-model.trim.numberbillPrice/button

typebutton

table-hovertheadtrth编号/thth消费名称/thth消费价格/thth操作/th/tr/theadtbodytr

v-for(item,index)

:keyitem.idtd{{index1}}/tdtd{{item.name}}/tdtd{{item.price}}/tdtda

hrefjavascript:;

{{totalPrice}}/td/tr/tfoot/table/div!--

右侧图表

srchttps://cdn.jsdelivr.net/npm/echarts5.4.0/dist/echarts.min.js/scriptscript

srchttps://cdn.jsdelivr.net/npm/vue2/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**

功能需求*

axios.get(https://applet-base-api-t.itheima.net/bill,

params:

console.log(res.data.data)this.list

res.data.data

echarts.init(document.querySelector(#main));this.mychart.setOption({title:

{text:

axios.get(https://applet-base-api-t.itheima.net/bill,{

params:

console.log(res.data.data[1].price)this.list

res.data.data;this.mychart.setOption({series:

[{/*

axios.post(https://applet-base-api-t.itheima.net/bill,

{//

this.creator,});this.render();this.billName

;this.billPrice

axios.delete(https://applet-base-api-t.itheima.net/bill/${id});this.render();},},computed:

{totalPrice()

工程化开发模式基于构建工具例如webpack的环境中开发Vue。

2.

工程化开发模式优点提高编码效率比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等3.

脚手架Vue

是Vue官方提供的一个全局命令工具可以帮助我们快速创建一个开发Vue项目的标准化基础架子。

【集成了webpack配置】4.

使用步骤1.

--HmHeader/HmHeaderHmMain/HmMain/div

/templatescript