web前端如何仿网站2022适合小学生的简短新闻
1. 生命周期
1.1 生命周期四个阶段
<!-- Vue生命周期：一个Vue实例从 创建 到 销毁 的整个过程。生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁1.创建阶段：创建响应式数据2.挂载阶段：渲染模板3.更新阶段：修改数据，更新视图4.销毁阶段：销毁Vue实例
-->1.2 生命周期钩子
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><h3>{{ title }}</h3><div><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- Vue生命周期钩子Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】，让开发者可以在【特定阶段】运行自己的代码--><script>const app = new Vue({el: "#app",data: {count: 100,title: "计数器",},beforeCreate() {console.log("beforeCreate", this.count);// beforeCreate undefined},created() {console.log("created", this.count);// created 100},beforeMount() {console.log("beforeMount", document.querySelector("h3"));// beforeMount <h3>{{ title }}</h3>},mounted() {console.log("mounted", document.querySelector("h3"));// mounted <h3>计数器</h3>},beforeUpdate() {console.log("beforeUpdata",this.count,document.querySelector("span").innerHTML);// beforeUpdata 101 100},updated() {console.log("updated",this.count,document.querySelector("span").innerHTML);// updated 101 101},// app.$destroy()beforeDestroy() {console.log("beforeDestory");},destroyed() {console.log("destroyed");},});</script></body>
</html>
1.3 生命周期案例
1.3.1 created应用 - 新闻列表
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {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><body><div id="app"><ul><li class="news" v-for="item in list" :key="item.id"><div class="left"><div class="title">{{item.title}}</div><div class="info"><span>{{item.source}}</span><span>{{item.time}}</span></div></div><div class="right"><img :src="item.img" alt="" /></div></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 接口地址：http://hmajax.itheima.net/api/news// 请求方式：getconst app = new Vue({el: "#app",data: {list: [],},// created 数据准备好了，可以开始发送初始化渲染请求。async created() {const res = await axios.get("http://hmajax.itheima.net/api/news");// console.log(res.data.data)this.list = res.data.data;},});</script></body>
</html>
1.3.2 mounted应用 - 输入框获取焦点
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>示例-获取焦点</title><!-- 初始化样式 --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css"/><!-- 核心样式 --><style>html,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></head><body><div class="container" id="app"><div class="search-container"><img src="https://www.itheima.com/images/logo.png" alt="" /><div class="search-box"><input type="text" v-model="words" id="inp" /><button>搜索一下</button></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: {words: "",},// mounted 模板渲染完成，可以开始操作DOM了。mounted() {document.querySelector("#inp").focus();},});</script></body>
</html>
2. 综合案例 - 小黑记账清单
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- CSS only --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@5.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></head><body><div id="app"><div class="contain"><!-- 左侧列表 --><div class="list-box"><!-- 添加资产 --><form class="my-form"><inputtype="text"class="form-control"placeholder="消费名称"v-model.trim="billName"/><inputtype="text"class="form-control"placeholder="消费价格"v-model.trim.number="billPrice"/><button type="button" class="btn btn-primary" @click="add">添加账单</button></form><table class="table table-hover"><thead><tr><th>编号</th><th>消费名称</th><th>消费价格</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in list" :key="item.id"><td>{{index+1}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td><a href="javascript:;" @click="del(item.id)">删除</a></td></tr><!-- <tr><td>2</td><td>大衣</td><td class="red">199.00</td><td><a href="javascript:;">删除</a></td></tr> --></tbody><tfoot><tr><td colspan="4">消费总计： {{totalPrice}}</td></tr></tfoot></table></div><!-- 右侧图表 --><div class="echarts-box" id="main"></div></div></div><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*** 接口文档地址：* https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058** 功能需求：* 1. 基本渲染* 2. 添加功能* 3. 删除功能* 4. 饼图渲染*/const app = new Vue({el: "#app",data: {list: [],creator: "caihaili",billName: "",billPrice: "",},created() {/* const res = await axios.get('https://applet-base-api-t.itheima.net/bill', { params: { creator: this.creator } })// console.log(res.data.data)this.list = res.data.data */this.render();},mounted() {this.mychart = echarts.init(document.querySelector("#main"));this.mychart.setOption({title: {text: "消费账单列表",// subtext: 'Fake Data',left: "center",},tooltip: {trigger: "item",},legend: {orient: "vertical",left: "left",},series: [{name: "消费账单",type: "pie",radius: "50%",data: [{ value: 1048, name: "Search Engine" },{ value: 735, name: "Direct" },{ value: 580, name: "Email" },{ value: 484, name: "Union Ads" },{ value: 300, name: "Video Ads" },],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},},],});},methods: {async render() {const res = await axios.get("https://applet-base-api-t.itheima.net/bill",{ params: { creator: this.creator } });// console.log(res.data.data[1].price)this.list = res.data.data;this.mychart.setOption({series: [{/* data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }] */data: this.list.map((item) => ({value: item.price,name: item.name,})),},],});},async add() {/* this.list.unshift({id: +new Date(),name: this.billName,price: this.billPrice,}) */if (this.billName === "" || this.billPrice === "") {alert("内容不能为空");return;}// axios简写时, post方法不用写data{}, 直接写键对值数据await axios.post("https://applet-base-api-t.itheima.net/bill", {// id: +new Date(),name: this.billName,price: this.billPrice,creator: this.creator,});this.render();this.billName = "";this.billPrice = "";},async del(id) {await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`);this.render();},},computed: {totalPrice() {return this.list.reduce((sum, item) => {return (sum += item.price);}, 0);},},});</script></body>
</html>
3. 工程化开发入门
3.1 工程化开发和脚手架
/* 1. 开发Vue的两种方式- 核心包传统开发模式：基于html / css / js 文件，直接引入核心包，开发 Vue。- 工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue。2. 工程化开发模式优点：提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等3. 脚手架Vue CLIVue CLI 是Vue官方提供的一个全局命令工具可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】4. 使用步骤：1. 全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g2. 查看vue/cli版本：vue --version3. 创建项目架子：vue create project-name(项目名不能使用中文)4. 启动项目：yarn serve 或者 npm run serve(命令不固定，找package.json)
*/3.2 项目运行流程
3.3 组件化
3.4 组件注册
<template><!-- <vue 回车可生成框架 --><!-- template 只允许有一个根元素 --><div class="app"><!-- 3. 使用组件 组件名+Tab 补充尖括号 --><HmHeader></HmHeader><HmMain></HmMain></div>
</template><script>
// 1. 导入
import HmHeader from "./components/HmHeader.vue";
import HmMain from "./components/HmMain.vue";export default {// 2. 注册组件(局部)components: {HmHeader,HmMain,},
};
</script><style>
.app {width: 400px;height: 600px;background-color: blueviolet;padding: 10px;box-sizing: border-box;margin: 0 auto;
}
</style>4. 综合案例 - 小兔鲜首页 - 拆分组件
Alt+Shift 多光标，Shift+左右箭头 多光标选中