生命周期
① Vue 生命周期和生命周期的四个阶段
② Vue 生命周期函数（钩子函数）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 </head>
9 <body>
11 <div id="app">
12 <h3>{{ title }}</h3>
13 <div>
14 <button @click="count--">-</button>
15 <span>{{ count }}</span>
16 <button @click="count++">+</button>
17 </div>
18 </div>
19 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
20 <script>
21 const app = new Vue({
22 el: '#app',
23 data: {
24 count: 100,
25 title: '计数器'
26 },
27 // 1. 创建阶段（准备数据）
28 beforeCreate () {
29 console.log('beforeCreate 响应式数据准备好之前', this.count)
30 },
31 created () {
32 console.log('created 响应式数据准备好之后', this.count)
33 // this.数据名 = 请求回来的数据
34 // 可以开始发送初始化渲染的请求了
35 },
36
37 // 2. 挂载阶段（渲染模板）
38 beforeMount () {
39 console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)
40 },
41 mounted () {
42 console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)
43 // 可以开始操作dom了
44 },
45
46 // 3. 更新阶段(修改数据 → 更新视图)
47 beforeUpdate () {
48 console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)
49 },
50 updated () {
51 console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)
52 },
53
54 // 4. 卸载阶段
55 beforeDestroy () {
56 console.log('beforeDestroy, 卸载前')
57 console.log('清除掉一些Vue以外的资源占用，定时器，延时器...')
58 },
59 destroyed () {
60 console.log('destroyed，卸载后')
61 }
62 })
63 </script>
64 </body>
65 </html>
created应用-新闻列表案例
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 * {
10 margin: 0;
11 padding: 0;
12 list-style: none;
13 }
14 .news {
15 display: flex;
16 height: 120px;
17 width: 600px;
18 margin: 0 auto;
19 padding: 20px 0;
20 cursor: pointer;
21 }
22 .news .left {
23 flex: 1;
24 display: flex;
25 flex-direction: column;
26 justify-content: space-between;
27 padding-right: 10px;
28 }
29 .news .left .title {
30 font-size: 20px;
31 }
32 .news .left .info {
33 color: #999999;
34 }
35 .news .left .info span {
36 margin-right: 20px;
37 }
38 .news .right {
39 width: 160px;
40 height: 120px;
41 }
42 .news .right img {
43 width: 100%;
44 height: 100%;
45 object-fit: cover;
46 }
47 </style>
48 </head>
49 <body>
50
51 <div id="app">
52 <ul>
53 <li v-for="(item, index) in list" :key="item.id" class="news">
54 <div class="left">
55 <div class="title">{{ item.title }}</div>
56 <div class="info">
57 <span>{{ item.source }}</span>
58 <span>{{ item.time }}</span>
59 </div>
60 </div>
61 <div class="right">
62 <img :src="item.img" alt="">
63 </div>
64 </li>
65 </ul>
66 </div>
67 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
68 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
69 <script>
70 // 接口地址：http://hmajax.itheima.net/api/news
71 // 请求方式：get
72 const app = new Vue({
73 el: '#app',
74 data: {
75 list: []
76 },
77 async created () {
78 // 1. 发送请求获取数据
79 const res = await axios.get('http://hmajax.itheima.net/api/news')
80 // 2. 更新到 list 中，用于页面渲染 v-for
81 this.list = res.data.data
82 }
83 })
84 </script>
85 </body>
86 </html>
mounted应用-输入框获取焦点
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>示例-获取焦点</title> 9 <!-- 初始化样式 --> 10 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css"> 11 <!-- 核心样式 --> 12 <style> 13 html, 14 body { 15 height: 100%; 16 } 17 .search-container { 18 position: absolute; 19 top: 30%; 20 left: 50%; 21 transform: translate(-50%, -50%); 22 text-align: center; 23 } 24 .search-container .search-box { 25 display: flex; 26 } 27 .search-container img { 28 margin-bottom: 30px; 29 } 30 .search-container .search-box input { 31 width: 512px; 32 height: 16px; 33 padding: 12px 16px; 34 font-size: 16px; 35 margin: 0; 36 vertical-align: top; 37 outline: 0; 38 box-shadow: none; 39 border-radius: 10px 0 0 10px; 40 border: 2px solid #c4c7ce; 41 background: #fff; 42 color: #222; 43 overflow: hidden; 44 box-sizing: content-box; 45 -webkit-tap-highlight-color: transparent; 46 } 47 .search-container .search-box button { 48 cursor: pointer; 49 width: 112px; 50 height: 44px; 51 line-height: 41px; 52 line-height: 42px; 53 background-color: #ad2a27; 54 border-radius: 0 10px 10px 0; 55 font-size: 17px; 56 box-shadow: none; 57 font-weight: 400; 58 border: 0; 59 outline: 0; 60 letter-spacing: normal; 61 color: white; 62 } 63 body { 64 background: no-repeat center /cover; 65 background-color: #edf0f5; 66 } 67 </style> 68 </head> 69 70 <body> 71 <div class="container" id="app"> 72 <div class="search-container"> 73 <img src="https://www.itheima.com/images/logo.png" alt=""> 74 <div class="search-box"> 75 <input type="text" v-model="words" id="inp"> 76 <button>搜索一下</button> 77 </div> 78 </div> 79 </div> 80 81 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> 82 <script> 83 const app = new Vue({ 84 el: '#app', 85 data: { 86 words: '' 87 }, 88 // 核心思路： 89 // 1. 等input框渲染出来 mounted 钩子 90 // 2. 让input框获取焦点 inp.focus() 91 mounted () { 92 document.querySelector('#inp').focus() 93 } 94 }) 95 </script> 96 </body> 97 </html>
综合案例-记账本
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Document</title> 7 <!-- CSS only --> 8 <link 9 rel="stylesheet" 10 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 11 /> 12 <style> 13 .red { 14 color: red!important; 15 } 16 .search { 17 width: 300px; 18 margin: 20px 0; 19 } 20 .my-form { 21 display: flex; 22 margin: 20px 0; 23 } 24 .my-form input { 25 flex: 1; 26 margin-right: 20px; 27 } 28 .table > :not(:first-child) { 29 border-top: none; 30 } 31 .contain { 32 display: flex; 33 padding: 10px; 34 } 35 .list-box { 36 flex: 1; 37 padding: 0 30px; 38 } 39 .list-box a { 40 text-decoration: none; 41 } 42 .echarts-box { 43 width: 600px; 44 height: 400px; 45 padding: 30px; 46 margin: 0 auto; 47 border: 1px solid #ccc; 48 } 49 tfoot { 50 font-weight: bold; 51 } 52 @media screen and (max-width: 1000px) { 53 .contain { 54 flex-wrap: wrap; 55 } 56 .list-box { 57 width: 100%; 58 } 59 .echarts-box { 60 margin-top: 30px; 61 } 62 } 63 </style> 64 </head> 65 <body> 66 <div id="app"> 67 <div class="contain"> 68 <!-- 左侧列表 --> 69 <div class="list-box"> 70 71 <!-- 添加资产 --> 72 <form class="my-form"> 73 <input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" /> 74 <input v-model.number="price" type="text" class="form-control" placeholder="消费价格" /> 75 <button @click="add" type="button" class="btn btn-primary">添加账单</button> 76 </form> 77 78 <table class="table table-hover"> 79 <thead> 80 <tr> 81 <th>编号</th> 82 <th>消费名称</th> 83 <th>消费价格</th> 84 <th>操作</th> 85 </tr> 86 </thead> 87 <tbody> 88 <tr v-for="(item, index) in list" :key="item.id"> 89 <td>{{ index + 1 }}</td> 90 <td>{{ item.name }}</td> 91 <td :class="{ red: item.price > 500 }">{{ item.price.toFixed(2) }}</td> 92 <td><a @click="del(item.id)" href="javascript:;">删除</a></td> 93 </tr> 94 </tbody> 95 <tfoot> 96 <tr> 97 <td colspan="4">消费总计： {{ totalPrice.toFixed(2) }}</td> 98 </tr> 99 </tfoot> 100 </table> 101 </div> 102 103 <!-- 右侧图表 --> 104 <div class="echarts-box" id="main"></div> 105 </div> 106 </div> 107 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script> 108 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> 109 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> 110 <script> 111 /** 112 * 接口文档地址： 113 * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058 114 * 115 * 功能需求： 116 * 1. 基本渲染 117 * (1) 立刻发送请求获取数据 created 118 * (2) 拿到数据，存到data的响应式数据中 119 * (3) 结合数据，进行渲染 v-for 120 * (4) 消费统计 => 计算属性 121 * 2. 添加功能 122 * (1) 收集表单数据 v-model 123 * (2) 给添加按钮注册点击事件，发送添加请求 124 * (3) 需要重新渲染 125 * 3. 删除功能 126 * (1) 注册点击事件，传参传 id 127 * (2) 根据 id 发送删除请求 128 * (3) 需要重新渲染 129 * 4. 饼图渲染 130 * (1) 初始化一个饼图 echarts.init(dom) mounted钩子实现 131 * (2) 根据数据实时更新饼图 echarts.setOption({ ... }) 132 */ 133 const app = new Vue({ 134 el: '#app', 135 data: { 136 list: [], 137 name: '', 138 price: '' 139 }, 140 computed: { 141 totalPrice () { 142 return this.list.reduce((sum, item) => sum + item.price, 0) 143 } 144 }, 145 created () { 146 // const res = await axios.get('https://applet-base-api-t.itheima.net/bill', { 147 // params: { 148 // creator: '小黑' 149 // } 150 // }) 151 // this.list = res.data.data 152 153 this.getList() 154 }, 155 mounted () { 156 this.myChart = echarts.init(document.querySelector('#main')) 157 this.myChart.setOption({ 158 // 大标题 159 title: { 160 text: '消费账单列表', 161 left: 'center' 162 }, 163 // 提示框 164 tooltip: { 165 trigger: 'item' 166 }, 167 // 图例 168 legend: { 169 orient: 'vertical', 170 left: 'left' 171 }, 172 // 数据项 173 series: [ 174 { 175 name: '消费账单', 176 type: 'pie', 177 radius: '50%', // 半径 178 data: [ 179 // { value: 1048, name: '球鞋' }, 180 // { value: 735, name: '防晒霜' } 181 ], 182 emphasis: { 183 itemStyle: { 184 shadowBlur: 10, 185 shadowOffsetX: 0, 186 shadowColor: 'rgba(0, 0, 0, 0.5)' 187 } 188 } 189 } 190 ] 191 }) 192 }, 193 194 methods: { 195 async getList () { 196 const res = await axios.get('https://applet-base-api-t.itheima.net/bill', { 197 params: { 198 creator: '小黑' 199 } 200 }) 201 this.list = res.data.data 202 203 // 更新图表 204 this.myChart.setOption({ 205 // 数据项 206 series: [ 207 { 208 // data: [ 209 // { value: 1048, name: '球鞋' }, 210 // { value: 735, name: '防晒霜' } 211 // ] 212 data: this.list.map(item => ({ value: item.price, name: item.name})) 213 } 214 ] 215 }) 216 }, 217 async add () { 218 if (!this.name) { 219 alert('请输入消费名称') 220 return 221 } 222 if (typeof this.price !== 'number') { 223 alert('请输入正确的消费价格') 224 return 225 } 226 227 // 发送添加请求 228 const res = await axios.post('https://applet-base-api-t.itheima.net/bill', { 229 creator: '小黑', 230 name: this.name, 231 price: this.price 232 }) 233 // 重新渲染一次 234 this.getList() 235 236 this.name = '' 237 this.price = '' 238 }, 239 async del (id) { 240 // 根据 id 发送删除请求 241 const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`) 242 // 重新渲染 243 this.getList() 244 } 245 } 246 }) 247 </script> 248 </body> 249 </html>
标签：box,flex,VUE,name,04,list,item,vue,data From： https://www.cnblogs.com/wang1001/p/18119736