一.vue生命周期
一个vue实例从创建到销毁的整个过程
1.生命周期四个阶段：
1.创建：响应式数据（一次），创建完成之后发送初始化渲染请求
2.挂载：渲染模板（一次），挂载之后开始操作dom
3.更新：数据修改，更新视图（多次）
4.销毁：销毁实例（一次）
2.生命周期函数（钩子函数）
vue生命周期过程中，会自动运行一些函数，被称为生命周期钩子，让开发者可以在特定阶段运行
自己的代码
<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.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
title:'计数器',
count:100
},
beforeCreate(){
console.log('beforeCreate响应式数据准备好之前',this.count)
},
created(){
console.log('created响应式数据准备好之后',this.count)
},
beforeMount(){
console.log('beforeMount模板渲染之前',document.querySelector('h3').innerHTML)
},
mounted(){
console.log('mounted模板渲染之后',document.querySelector('h3').innerHTML)
},
beforeUpdate(){
console.log('beforeUpdate数据修改,视图未更新',document.querySelector('span').innerHTML)
},
updated(){
console.log('updated数据修改,视图已更新',document.querySelector('span').innerHTML)
},
beforeDestroy(){
console.log('beforeDestroy卸载前')
},
destroyed(){
console.log('destroyed卸载后')
},
})
</script>
</body>
四个阶段，八个钩子，有三个常用created，mounted，beforeDestroy
案例：账单列表
这里我写了一个data.json文件来模拟一下数据请求渲染，相关的添加删除的后端操作先保留纯前端
写法，最后有相关的完整总结
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
background-color: #f5f5f5;
}
#app {
display: flex;
min-height: 100vh;
}
.bill-panel {
width: 50%;
padding: 30px;
background-color: #fff;
}
.chart-panel {
width: 50%;
padding: 30px;
background-color: #fff;
border-left: 1px solid #e8e8e8;
}
.input-row {
display: flex;
gap: 12px;
margin-bottom: 24px;
}
.input-row input {
flex: 1;
height: 40px;
padding: 0 12px;
border: 1px solid #ddd;
border-radius: 4px;
outline: none;
font-size: 14px;
}
.input-row input:focus {
border-color: #1f6f96;
}
.add-btn {
width: 120px;
height: 40px;
border: none;
border-radius: 4px;
background-color: #1f6f96;
color: #fff;
font-size: 15px;
cursor: pointer;
}
.add-btn:hover {
background-color: #2a86b4;
}
.bill-table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
color: #333;
}
.bill-table th,
.bill-table td {
height: 44px;
padding: 0 12px;
border-bottom: 1px solid #eee;
text-align: center;
}
.bill-table th {
background-color: #fafafa;
font-weight: bold;
color: #555;
}
.bill-table .price {
color: #e1251b;
}
.bill-table .del {
color: #1f6f96;
cursor: pointer;
}
.bill-table .del:hover {
text-decoration: underline;
}
.total-row {
margin-top: 20px;
font-size: 16px;
color: #333;
}
.total-row b {
color: #e1251b;
font-size: 20px;
margin-left: 6px;
}
button {
width: 30px;
height: 30px;
text-align: center;
line-height: 20px;
font-size: 24px;
}
</style>
<div id="app">
<div class="bill-panel">
<div class="input-row">
<input type="text" placeholder="消费名称" v-model.trim="name">
<input type="text" placeholder="消费价格" v-model.number="price">
<button class="add-btn" @click="add">添加账单</button>
</div>
<table class="bill-table">
<thead>
<tr>
<th>编号</th>
<th>消费名称</th>
<th>消费价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td :class="{'price': item.price > 500}">{{ item.price.toFixed(2) }}</td>
<td><a class="del" @click="del(item.id)">删除</a></td>
</tr>
<tr v-if="list.length === 0">
<td colspan="4" style="color:#999;padding:40px 0;">暂无数据</td>
</tr>
</tbody>
</table>
<div class="total-row">消费总计：<b>{{ totalPrice.toFixed(2) }}</b></div>
</div>
<div class="chart-panel">
<!-- 饼图 -->
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
list: [],
name: '',
price: ''
},
methods: {
del(id) {
this.list = this.list.filter(item => item.id !== id);
},
add(){
if (!this.name || !this.price) return
this.list.push({
id: this.list.length + 1,
name: this.name,
price: this.price
});
this.name = '';
this.price = '';
}
},
computed: {
totalPrice() {
return this.list.reduce((sum, item) => sum + item.price, 0);
}
},
async created() {
const res = await axios.get('./data.json');
this.list = res.data
console.log(this.list);
this.myChart.setOption({
series: [
{
name: '消费账单',
type: 'pie',
radius: '50%',
data: this.list.map(item => ({ value: item.price, name: item.name }))
}
]
})
},
mounted() {
this.myChart = echarts.init(document.querySelector('.chart-panel'));
this.myChart.setOption({
title: {
text: '账单列表',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series:[
{
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
},
})
</script>
</body>
二.工程化开发和脚手架
开发vue的两种方式：
1.核心包传统开发模式：基于html/css/js文件，直接引入核心包，开发vue
2.工程化开发模式：基于构建工具(例如：webpack)的环境中开发vue
源代码----自动化编译压缩组合----运行的代码
问题:
1.webpack配置不简单
2.雷同的基础配置
3.缺乏统一标准
Vue CLI是Vue官方提供的一个全局命令工具
可以帮助我们快速创建一个开发Vue项目的标准化基础架子（集成了webpack配置）
好处:
1.开箱即用，零配置
2.内置babel等工具
3.标准化
使用步骤:
1.全局安装(一次)：yarn global add @vue/cli 或 npm i @vue/cli -g
2.查看 Vue 版本：vue --version
3.创建项目架子：vue create project-name(项目名-不能用中文)
4.启动项目：yarn serve 或 npm run serve(找package.json)
1.创建项目，名为vue2-project
2.选择使用npm
3.等待安装
4.查看package.json中的启动项，默认serve，工作中常用dev
5.切换到项目文件夹下，npm run serve启动项目
6.项目启动成功之后如下
7.目录文件介绍
三.组件化开发和根组件
组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为
好处：便于维护，利于复用，提升开发效率
组件分类：普通组件、根组件
根组件：整个应用最上层的组件，包裹所有普通小组件
App.vue文件(单文件组件)的三个组成部分：结构、行为、样式
template：结构(有且只能一个根元素)
script：js逻辑
style：样式(可支持less,需要装包)
快捷生成<vue回车
让组件支持less：
1.style标签，lang="less”开启less功能
2.装包：npm add less less-loader -D（开发依赖）
<template>
<div class="app">
<h1>Hello Vue 2!</h1>
<button @click="handleClick">点击</button>
</div>
</template>
<script>
export default {
created() {
console.log('created')
},
methods: {
handleClick() {
console.log('点击了按钮');
}
}
}
</script>
<style lang="less">
.app {
color: red;
button{
background-color: green;
color: white;
}
}
</style>
四.组件注册
组件注册的两种方式：
1.局部注册：只能在注册的组件内使用
1.创建.vue文件(三个组成部分)
2.在使用的组件内导入并注册
使用:
当成html标签使用 `<组件名></组件名>`
注意:
组件名规范，大驼峰命名法，如：HmHeader
<template>
<div class="App">
<AppHeader></AppHeader>
<AppMain></AppMain>
<AppFooter></AppFooter>
</div>
</template>
<script>
import AppHeader from './components/AppHeader.vue'
import AppMain from './components/AppMain.vue'
import AppFooter from './components/AppFooter.vue'
export default {
components: {
AppHeader,
AppMain,
AppFooter
}
}
</script>
<style lang="less">
.App{
width: 600px;
height: 800px;
background-color: pink;
padding: 20px;
}
</style>
<template>
<div class="AppHeader">
<h2>我是头部组件</h2>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less">
.AppHeader{
width: 100%;
height: 70px;
background-color:aquamarine;
text-align: center;
line-height: 70px;
}
</style>
2.全局注册：所有组件内都能使用
1.创建.vue文件(三个组成部分)
2.main.js中进行全局注册（导入需要全局注册的组件，Vue.component('组件名'，组件对
象)）
使用:
当成html标签使用 `<组件名></组件名>`
注意:
组件名规范，大驼峰命名法，如：HmHeader
<template>
<div class="AppButton">
<div>通用按钮</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less">
.AppButton{
width: 80px;
height: 50px;
background-color:rgb(61, 47, 255);
text-align: center;
line-height: 50px;
border-radius: 5px;
color: #fff;
}
</style>
<template>
<div class="AppMain">
<h2>我是主体组件</h2>
<AppButton></AppButton>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less">
.AppMain{
width: 100%;
height: 500px;
background-color: gold;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
}
</style>
import Vue from 'vue'
import App from './App.vue'
import AppButton from './components/AppButton.vue'
Vue.config.productionTip = false
// 进行全局注册
Vue.component('AppButton',AppButton)
new Vue({
render: h => h(App),
}).$mount('#app')
转载自 CSDN-专业IT技术社区
原文链接：https://blog.csdn.net/2501_91966873/article/details/170025072
