前端技术Vue学习笔记--003

前端技术Vue学习笔记

文章目录

  • 前端技术Vue学习笔记
    • 1、Vue生命周期和生命周期的四个阶段
      • 1.1、Vue生命周期
      • 1.2、生命周期的四个阶段
      • 1.3、Vue生命周期函数<font color=red>（钩子函数）
    • 2、小黑记账本（案例）
    • 3、工程化开发和脚手架
      • 3.1、开发Vue的两种方式
      • 3.2、脚手架Vue CLI
    • 4、组件化开发&根组件
      • 4.1、App.vue文件
      • 4.2、普通组件的注册使用
    • 5、综合案例（小兔鲜首页）--组件拆分
      • 5.1、 项目开发思路
      • 5.2、 项目效果

1、Vue生命周期和生命周期的四个阶段

1.1、Vue生命周期

Vue生命周期 ： 一个Vue实例从 创建 到 销毁 的整个过程

1.2、生命周期的四个阶段

生命周期四个阶段：创建、挂载、更新、销毁

  1. 创建阶段—>准备响应式数据（执行一次）
    在创建阶段的最后，发送初始化渲染请求。

  2. 挂载阶段—>渲染模版（执行一次）
    在挂载阶段结束后，就会操作dom

  3. 更新阶段—>用户使用时所处的阶段（数据修改，视图更新）（执行多次）

  4. 销毁阶段—>销毁实例

1.3、Vue生命周期函数（钩子函数）

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

在这里插入图片描述
基础学习

<body><div id="app"><h3>{{title}}</h3> <button @click="count--">-</button><span>{{count}}</span><button @click="count++">+</button></div><script>const app = new Vue({el : '#app',data : {title : '计数器',count : 100},// 1. 创建阶段前(准备数据)beforeCreate(){console.log("beforeCreate 响应式数据准备之前")},created(){//可以开始发送初始化请求console.log("created 响应式数据准备后访问数据：" +this.count)},// 2.挂载阶段(渲染模版）beforeMount(){//此阶段是没有任何渲染的console.log("beforeMount dom操作执行之前" + document.querySelector('h3').innerHTML)},mounted(){console.log("mounted dom操作执行之后" +document.querySelector('h3').innerHTML)//可以开始操作dom},// 3.更新阶段(修改数据 ---> 更新视图)beforeUpdate(){console.log("beforeUpdate 数据修改了，视图好没有更新", document.querySelector('span').innerHTML) //100},updated(){console.log("updated 数据修改了，视图已经更新", document.querySelector('span').innerHTML)  //101},// 4.销毁阶段---实例名.$destorybeforeDestory(){console.log("清楚一些Vue以外的资源占用，定时器，延时器。。。")console.log("beforeDestory")},destroyed(){console.log("destroyed")}})</script></body>

三个常用钩子：created()、mounted()、beforeDestroy()

2、小黑记账本（案例）

需求介绍：在这里插入图片描述

功能需求：

  1. 基本渲染
    (1) 立刻发送请求获取数据 created
    (2) 拿到数据，存到data的响应式数据中
    (3) 集合数据，进行渲染 v-for
    (4) 消费统计 => 计算属性
  2. 添加功能
    (1) 收集表单数据 v-model
    (2) 给添加按钮注册点击事件发送请求
    (3) 发完请求后，需不需要重新渲染？ 需要重新渲染
  3. 删除功能
    (1) 注册点击事件，传参
    (2) 根据id发送删除请求
    (3) 重新渲染
  4. 饼图渲染
    (1) 初始化一个饼图echarts.init(dom)(有dom操作) 因此要放到mounted函数中
    (2) 根据数据更新饼图 echarts.setOption({}) //只需要添加新更新的数据
<html><head><title>钩子函数小案例</title><script src="../vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><!-- CSS only --><link rel="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"><input type="text" v-model.trim="cName" class="form-control" placeholder="消费名称" /><input type="text" v-model.number="cPrice" class="form-control" placeholder="消费价格" /><button type="button" @click="add" class="btn btn-primary">添加账单</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"><td>{{index + 1}}</td><td>{{item.name}}</td><td :class="{red: item.price>500}">{{item.price.toFixed(3)}}</td><td><a href="javascript:;" @click="del(item.id)">删除</a></td></tr></tbody><tfoot><tr><td colspan="4">消费总计： {{totalNum.toFixed(2)}}</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/axios/dist/axios.min.js"></script><script>/*** 接口文档地址：* https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058*/const app = new Vue({el: '#app',data: {list : [],cName: '',cPrice: '',chartName: '小黑记账本'},async created(){//将以下数据封装到methods中//    const res = await axios.get('https://applet-base-api-t.itheima.net/bill',{//         params: {//             creator: 'radan'//         }//    }//    )//    console.log(res)//    this.list = res.data.datathis.getList()},mounted(){// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));this.myChart =myChart  //将原本的myChart对象挂载到Vue实例下，这样就可以用this.mychart全局调用// 指定图表的配置项和数据var option = {title: {text: '消费账单列表',subtext: 'radan',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)'}}}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);},methods:{async getList(){const res = await axios.get('https://applet-base-api-t.itheima.net/bill',{params: {creator: 'radan'}})this.list = res.data.dataconsole.log(this.list)//更新图表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 del(id){const res = await axios.delete('https://applet-base-api-t.itheima.net/bill/'+id)console.log(res)//重新渲染this.getList()},async add(){if(!this.cName){alert("请输入消费名称")return}if(typeof this.cPrice !== 'number'){alert("请输入正确的价格")return}const res = await axios.post('https://applet-base-api-t.itheima.net/bill',{creator : 'radan',name: this.cName,price : this.cPrice})//重新渲染this.getList()//清空输入框this.cName=''this.cPrice=''}},computed : {totalNum(){return this.list.reduce((sum,item) => sum + item.price,0)}}});</script></body></html>

测试效果图
在这里插入图片描述

3、工程化开发和脚手架

3.1、开发Vue的两种方式

  1. 核心包传统开发模式：基于html/css/js文件，直接引入核心包，开发VUe
  2. 工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue

3.2、脚手架Vue CLI

      Vue CLI是Vue官方提供的一个全局命令工具。可以帮我们快速创建一个Vue项目的标准化基础架子。【集成了webpack配置】

脚手架目录介绍：
在这里插入图片描述

优点：

  • 开箱即用，零配置
  • 内置bable工具
  • 标准化

使用步骤：

  1. 全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g
  2. 查看vue/cli版本： vue --version
  3. 创建项目架子：vue create project-name(项目名不能使用中文)
  4. 启动项目：yarn serve 或者 npm run serve(命令不固定，找package.json)

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.log("11111")
// 3.提示：当前出于什么环境（生产环境  /  开发环境）Vue.config.productionTip = false// 4.Vue实例化，提供render方法  --> 基于App.vue创建结构渲染index.html  
// .$mount('#app')等价于 el: '#app',指定Vue所管理的容器
new Vue({// render: h => h(App),render: (createElement) => {//基于App创建元素结构return createElement(App)}
}).$mount('#app')

public下的index.html模版介绍：

<!DOCTYPE html>
<html lang=""><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"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><!-- 兼容：给不支持js的浏览器一个提示 --><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><!-- Vue所管理的容器，将来创建结构就是动态渲染容器 --><div id="app"><!-- 工程化开发模式中：这里不再直接编写模版语法，通过App.vue提供结构渲染 --></div><!-- built files will be auto injected --></body>
</html>

4、组件化开发&根组件

在这里插入图片描述

  1. 组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式和行为。
    优点：便于维护，利于复用—>提升开发效率
    组件分类：普通组件、根组件
  2. 根组件：整个应用最上层的组件、包裹这所有小组件。

在这里插入图片描述

4.1、App.vue文件

  1. App.bue文件三部分组成
    • template：结构（有且只能有一个根元素，必须有一个）
    • script：js逻辑
    • style：样式（可支持less，需要装包）
  2. 让组件支持less
    • style标签，lang="less"开启less功能
    • 装包：yarn add less less-loader

在这里插入图片描述

<template><!-- 提供结构 有且只能有一个根元素，必须有一个--><div class="app"><div class="box" @click="fn"></div></div></template><script>
//导出的是当前组件的配置项
//里面可以提供 data（特殊） 、methods、computed、watch、生命周期函数
export default ({methods: {fn(){alert("我是蓝色的盒子")}}})
</script>// 提供样式
<style lang="less">
/*  让style支持less1.给style加上lang="less"2.安装依赖包 less less-loader   命令：yarn add less less-loader -D（开发依赖）
*/.app{width: 400px;height: 400px;background-color: pink;.box{width: 100px;height: 100px;background-color: blue;}}
</style>

4.2、普通组件的注册使用

组件注册的两种方式：

  1. 局部注册：只能在注册的组件内使用

    • 创建.vue文件（每个组件都有三个组成部分）‘【components文件夹下】
    • 在使用的组件内导入注册（import 组件对象 from ‘.vue文件路径’）并使用组件对象components:{组件名：组件对象}
    • 当成html标签使用 ‘<组件名></组件名>’

案例：设置以下组件在这里插入图片描述
在App.vue文件中利用局部方式引入相关组件

<!-- 如果快速生成结构样式和行为  输入<vue>回车  组件名+tab键进行补全设置( Trigger Expansion On Tab)打勾-->
<template><div class="app"> <!-- 3. 使用 --><!-- 头部组件 --><RadanHeader></RadanHeader>     <!-- 主体组件 --><RadanBody></RadanBody><!-- 尾部组件 --><radan-footer></radan-footer></div>
</template><script>
// 变量不使用会报错
// 1.导入
import RadanHeader from './components/RadanHeader.vue'
import RadanFooter from './components/RadanFooter.vue'
import RadanBody from './components/RadanBody.vue'export default {components : {//2.注册// '组件名'：组件对象RadanHeader : RadanHeader,RadanFooter,//简写·RadanBody : RadanBody}
}
</script><style>.app{width: 600px;height: 800px;background-color: #87ceeb;margin: 0 auto;padding: 20px;}</style>

  1. 全局组件：所有组件内都可使用 (一般注册的是通用组件)

    • 创建xxx.vue文件(三部分组成)
    • main.js中进行全局注册(语法如下)
// 导入需要全局注册的组件
import RadanButton form './components/RadanButton'
// 调用 Vue.component 进行全局注册
// Vue.component('组件名',组件对象)
Vue.component('RadanButton',RadanButton )

注意：

  • 组件命名规范---->大驼峰命名法，如：HmHeader
  • 一般使用局部注册，如果发现确实是通用组件，再抽离到全局

5、综合案例（小兔鲜首页）–组件拆分

5.1、 项目开发思路

  1. 分析页面，按模块拆分组件，搭架子（局部或全局注册）
  2. 根据设计图，编写组件html结构css样式
  3. 拆分封装通用小组件（局部或全局注册）
    将来—>通过js动态渲染

5.2、 项目效果

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/61490.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

风丘科技将亮相 EVM ASIA 2023

风丘科技将亮相 EVM ASIA 2023

风丘科技将首次亮相 EVM ASIA 2023 WINDHILL will debut EVM ASIA 2023 ——可持续移动的未来 —The Future of SUSTAINABLE Mobility EVM ASIA 2023是亚太地区电气化的国际性展会&#xff0c;专注于新能源汽车、充电技术及汽车零件制造等。展会致力于促进包括充电站、交通…
阅读更多...
【MySQL】表中的一条数据在磁盘上是如何存放的？

【MySQL】表中的一条数据在磁盘上是如何存放的？

文章目录 1 InnoDB行格式2 COMPACT行格式2.1 记录的额外信息2.2 记录的真实数据 3 Dynamic & Compressed4 VarChar(n)中n的最大取值&#xff1f; 1 InnoDB行格式 不同的存储引擎一般是为实现不同的特性来开发的&#xff0c;真实数据在不同存储引擎中的存放格式一般是不同的…
阅读更多...
mysql统计近7天数据量,，按时间戳分组

mysql统计近7天数据量,，按时间戳分组

可以使用以下 SQL 语句来统计近7天的数据量&#xff0c;并按时间戳分组。如果某一天没有数据&#xff0c;则将其填充为0。 SELECT DATE_FORMAT(FROM_UNIXTIME(timestamp), %Y-%m-%d) AS date,COUNT(*) AS count FROM table_name WHERE timestamp > UNIX_TIMESTAMP(DATE_SUB…
阅读更多...
专注于创意设计，为您的小程序和网站建设带来更多的可能性

专注于创意设计，为您的小程序和网站建设带来更多的可能性

随着移动互联网的快速发展&#xff0c;越来越多的企业开始关注小程序和网站建设&#xff0c;以此来拓展业务和提升品牌形象。 在这个领域中&#xff0c;创意设计扮演着关键的角色。它不仅可以帮助企业打造独特的形象和品牌&#xff0c;还能够提高用户体验和购买决策的效率。 因…
阅读更多...
flask-migrate使用

flask-migrate使用

1.介绍 # 表,字段发生变化&#xff0c;都会有记录&#xff0c;自动同步到数据库中--》django支持这种操作 # 原生的sqlalchemy&#xff0c;不支持修改表的 # flask-migrate可以实现类似于django的 python manage.py makemigrations #记录 python manage.py migrate …
阅读更多...
探索未知，即刻搭建AI原生应用！WAVE SUMMIT Workshop等你来参加

探索未知，即刻搭建AI原生应用！WAVE SUMMIT Workshop等你来参加

你是否希望掌握大模型开发的秘诀&#xff1f;你是否渴望得到实践操作的机会&#xff1f;如果你的心中充满热情和期待&#xff0c;那么&#xff0c;WAVE SUMMIT 2023特别设置的Workshop将会是你的知识启航站&#xff01; 本次Workshop专注于AI开发与大模型应用&#xff0c;邀请一…
阅读更多...
python爬虫实战(2)--爬取某博热搜数据

python爬虫实战(2)--爬取某博热搜数据

1. 准备工作 使用python语言可以快速实现&#xff0c;调用BeautifulSoup包里面的方法 安装BeautifulSoup pip install BeautifulSoup完成以后引入项目 2. 开发 定义url url https://s.微博.com/top/summary?caterealtimehot定义请求头&#xff0c;微博请求数据需要cookie…
阅读更多...
容器——2.Collection 子接口之 List

容器——2.Collection 子接口之 List

文章目录 2.1. Arraylist 和 Vector 的区别?2.2. Arraylist 与 LinkedList 区别?2.2.1. 补充内容:双向链表和双向循环链表2.2.2. 补充内容:RandomAccess 接口 2.3 ArrayList 的扩容机制 2.1. Arraylist 和 Vector 的区别? ArrayList 是 List 的主要实现类&#xff0c;底层使…
阅读更多...
山景DSP芯片可烧录AP8224C2音频处理器方案

山景DSP芯片可烧录AP8224C2音频处理器方案

AP8224C2高性能32位音频应用处理器AP82系列音频处理器是面向音频应用领域设计的新一代SoC平台产品&#xff0c;适用于传统音响系统、新兴的蓝牙或Wifi 无线音频产品、Sound Bar 和调音台等市场。该处理器在总体架构和系统组成上&#xff0c;充分考虑了音频领域的特点&#xff0…
阅读更多...
AWS——04篇（AWS之Amazon S3（云中可扩展存储）-02——EC2访问S3存储桶）

AWS——04篇（AWS之Amazon S3（云中可扩展存储）-02——EC2访问S3存储桶）

AWS——04篇&#xff08;AWS之Amazon S3&#xff08;云中可扩展存储&#xff09;-02——EC2访问S3存储桶&#xff09; 1. 前言2. 创建EC2实例 S3存储桶3. 创建IAM角色4. 修改EC2的IAM 角色5. 连接EC2查看效果5.1 连接EC25.2 简单测试5.2.1 查看桶内存储情况5.2.2 复制本地文件…
阅读更多...
8月10日，每日信息差

8月10日，每日信息差

1、菜鸟国际快递“承诺达、晚必赔”覆盖22国。具体来讲&#xff0c;菜鸟国际快递对无忧、经济和简易三种标准产品全面升级&#xff0c;其中英国、意大利、加拿大、美国四国时效平均提升30%以上。凡使用这三种快递产品发货至22国的商家&#xff0c;其货物在速卖通电商平台享有“…
阅读更多...
交叉导轨在OA机械中起什么作用？

交叉导轨在OA机械中起什么作用？

OA机是将计算机、通信等现代化技术运用到传统办公方式&#xff0c;进而形成的一种新型办公方式。OA机利用现代化设备和信息化技术&#xff0c;代替办公人员传统的部分手动或重复性业务活动&#xff0c;优质而高效地处理办公事务和业务信息&#xff0c;实现对信息资源的高效利用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023