Vue生命周期;综合案例;工程化开发入门

这篇具有很好参考价值的文章主要介绍了Vue生命周期;综合案例;工程化开发入门。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

思考:
什么时候可以发送初始化渲染请求?(越早越好:最早可以早到什么时候?)
什么时候可以开始操作dom?(至少dom得渲染出来)
Vue生命周期:一个Vue实例从***创建***到***销毁***的整个过程

new Vue( ) ①创建(生命就开始了)→②挂载→③更新→④销毁(比如网页被关掉)
①创建阶段(响应式处理):将普通数据转换成响应式数据:data其实是普通数据,但是在Vue在底层创建阶段的时候。就会对下面的普通数据来做一些响应式的处理,只有经过这一步,我们在后来修改数据的时候,才会响应式的更新

②挂载阶段(渲染模板):结合对应的数据(比如:data中的count)和模板(比如:div)做渲染了,最后在界面中看到解构
③更新阶段(修改数据,更新视图:比如点了➕号,100变成101,及视图更改了)
④销毁阶段(销毁实例)
综上可知
发请求最早是在响应式数据准备好,才能发请求
要等模板渲染完成(挂载阶段完成),才可以操作dom

Vue生命周期函数(钩子函数)

vue生命周期过程中,会自动运行一些函数,被称为【生命周期钩子】 → 让开发者可以在【特定阶段】运行自己的代码
Vue生命周期;综合案例;工程化开发入门,前端,vue.js,node.js
每一个钩子可以用一段自己的代码,到下一个阶段就用别的代码
有八个钩子(四队):

1.数据准备之前和之后
2.dom挂在渲染之前和hi好之后
3.在修改了数据、视图更新之前和之后
4. 销毁实例阶段的之前和之后
Vue生命周期;综合案例;工程化开发入门,前端,vue.js,node.js
**目前需要记住:created 和 mounted **
1.created:发送初始化渲染的请求
2.mounted:操作dom

Vue生命周期;综合案例;工程化开发入门,前端,vue.js,node.js

created的应用

有一个新闻列表,需要已进入页面立刻发送请求(created),获取对应的数据渲染出来

通过下面的代码获取以上展示的数据👇

<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>
        //请求方式:get
        const app = new Vue({
            el:'#app',
            data:{
                list:[

                ]
            },
            async created(){
                //1.请求发送,获取数据
                const res = await axios.get('http://hmajax.itheima.net/api/news')
                // console.log(res)
                //2.将数据更新给data中的list
                this.list = res.data.data
            }
        })
    </script>

如下图显示,获取成功
Vue生命周期;综合案例;工程化开发入门,前端,vue.js,node.js
如下图可以看见数据中的内容及标签
Vue生命周期;综合案例;工程化开发入门,前端,vue.js,node.js
然后在代码中让他动态渲染👇

<div id="app">
        <ul>
            <li v-for="(item,index) in list" :key="item.id" class="news">
                <div class="left">
                    <div class="title">{{ item.title }}</div>
                    <div class="info">
                        <span>{{ item.sorce }}</span>
                        <span>{{ item.time }}</span>
                    </div>
                </div>
                <div class="right">
                    <img :src="item.img" alt="">
                </div>
            </li>
        </ul>
    </div>

mounted的应用

有一个搜索功能:一进入页面,立刻能够获取焦点(就是光标显示),要在模板渲染完成后开始操作,即操作dom。和data并列,提供一个mounted


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mounted.DOM操作.搜索框焦点</title>
</head>
<body>
    <div class="search-container">
        <img src="./火龙果.png" alt="">
        <div class="search-box">
            <input type="text" v-model="words" id="inp">
            <button>搜索一下</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:{
                words:''
            },
            //获取焦点核心思路:
            //1.等输入框渲染出来
            //2.让输入框获取焦点
            mounted(){
                document.querySelector('#inp').focus()
            }
        })
    </script>
</body>
</html>

其中focus是原生dom中的用法

Vue生命周期总结图

Vue生命周期;综合案例;工程化开发入门,前端,vue.js,node.js

综合案例:记账清单

Vue生命周期;综合案例;工程化开发入门,前端,vue.js,node.js

功能需求
1.基本渲染
2.添加功能
3.删除功能
4.饼图渲染

<body>
    <div id="app">
      <div class="contain">
        <!-- 左侧列表 -->
        <div class="list-box">

          <!-- 添加资产 -->
          <form class="my-form">
            <input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" />
            <input v-model.number="price" type="text" class="form-control" placeholder="消费价格" />
            <button @click="add" type="button" 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" :key="item.id">
                <td>{{ index + 1 }}</td>
                <td>{{ item.name }}</td>
                <td :class="{ red: item.price > 500 }">{{ item.price.toFixed(2) }}</td>
                <td><a @click="del(item.id)" href="javascript:;">删除</a></td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td colspan="4">消费总计: {{ totalPrice.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/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. 基本渲染
        //    (1) 立刻发送请求获取数据 created
        //    (2) 拿到数据,存到data的响应式数据中
        //    (3) 结合数据,进行渲染 v-for
        //    (4) 消费统计 => 计算属性
        // 2. 添加功能
        //    (1) 收集表单数据 v-model
        //    (2) 给添加按钮注册点击事件,发送添加请求
        //    (3) 需要重新渲染
        // 3. 删除功能
        //    (1) 注册点击事件,传参传 id
        //    (2) 根据 id 发送删除请求
        //    (3) 需要重新渲染
        // 4. 饼图渲染
        //    (1) 初始化一个饼图 echarts.init(dom)  mounted钩子实现
        //    (2) 根据数据实时更新饼图 echarts.setOption({ ... })
       
      const app = new Vue({
        el: '#app',
        data: {
          list: [],
          name: '',
          price: ''
        },
        computed: {
          totalPrice () {
            return this.list.reduce((sum, item) => sum + item.price, 0)
          }
        },
        created () {
          // const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
          //   params: {
          //     creator: '小黑'
          //   }
          // })
          // this.list = res.data.data

          this.getList()
        },
        mounted () {
          this.myChart = echarts.init(document.querySelector('#main'))
          this.myChart.setOption({
            // 大标题
            title: {
              text: '消费账单列表',
              left: 'center'
            },
            // 提示框
            tooltip: {
              trigger: 'item'
            },
            // 图例
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            // 数据项
            series: [
              {
                name: '消费账单',
                type: 'pie',
                radius: '50%', // 半径
                data: [
                  // { value: 1048, name: '球鞋' },
                  // { value: 735, name: '防晒霜' }
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          })
        },

        methods: {
          async getList () {
            const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
              params: {
                creator: '小黑',
              }
            })
            this.list = res.data.data

            // 更新图表
            this.myChart.setOption({//这里面所有传过的数据都不需要再传了
              // 数据项
              series: [
                {
                  // data: [
                  //   { value: 1048, name: '球鞋' },
                  //   { value: 735, name: '防晒霜' }
                  // ]
                  data: this.list.map(item => ({ value: item.price, name: item.name}))//要加括号,告诉他是个对象,不然他会识别成代码段
                }
              ]
            })
          },
          async add () {
            if (!this.name) {
              alert('请输入消费名称')
              return
            }
            if (typeof this.price !== 'number') {
              alert('请输入正确的消费价格')
              return
            }

            // 发送添加请求
            const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {
              creator: '小黑',
              name: this.name,
              price: this.price
            })
            // 重新渲染一次
            this.getList()

            this.name = ''
            this.price = ''
          },
          async del (id) {
            // 根据 id 发送删除请求
            const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
            // 重新渲染
            this.getList()
          }
        }
      })
    </script>
  </body>
</html>

其中用到了ECharts初始化饼图,但是必须要给它一个dom才可以
Vue生命周期;综合案例;工程化开发入门,前端,vue.js,node.js

工程化开发和手脚架(那个管理员的程序目前没下好,下不了,只能先截图了,到后面下好了再改)

工程化开发 & 手脚架 Vue CLI
Vue生命周期;综合案例;工程化开发入门,前端,vue.js,node.js
重点看:
index.html
App.vue
main.js
在做项目时,养成一个习惯,直接把整个文件作为根目录,往vscode中拖

1.index.html 中,有一个< noscript>标签,是做兼容的:给不支持js的浏览器一个提示

2.其中的 < div id=“app”>< /div> :在工程化开发模式种:这里不再直接编写模板语法了。而是通过App.vue 提供结构渲染

3.main.js的核心作用:导入App.vue,基于App.vue创建结构渲染index.html
Vue生命周期;综合案例;工程化开发入门,前端,vue.js,node.js
Vue生命周期;综合案例;工程化开发入门,前端,vue.js,node.js

Vue生命周期;综合案例;工程化开发入门,前端,vue.js,node.js文章来源地址https://www.toymoban.com/news/detail-817746.html

到了这里,关于Vue生命周期;综合案例;工程化开发入门的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端Vue入门-day03-用Vue实现工程化、组件化开发

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 生命周期 Vue 生命周期 和 生命周期的四个阶段  Vue 生命周期函数(钩子函数) 案例-create的应用 案例-mounted的应用 工程化开发 脚手架 Vue CLI 开发 Vue 的两种方式 基本介

    2024年02月15日
    浏览(59)
  • Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署

    Ajax介绍 Axios 案例 前后端分离 前端工程化 环境准备,nodejs安装,D:javaprojectjavawebday03-Vue-Elementday03-Vue-Element资料NodeJS安装文档 Vue项目简介 它本来默认端口号是8080 ,但这就和tomcat冲突了所以修改为7000 Vue项目开发流程 Vue组件库Element pagination分页组件,table表格组件,Dial

    2024年02月05日
    浏览(70)
  • Vue2向Vue3过度核心技术工程化开发和脚手架

    1.1 开发Vue的两种方式 核心包传统开发模式:基于html / css / js 文件,直接引入核心包,开发 Vue。 工程化开发模式:基于构建工具(例如:webpack)的环境中开发Vue。 工程化开发模式优点: 提高编码效率,比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识

    2024年02月11日
    浏览(55)
  • 【vue2第八章】工程化开发和使用脚手架和文件结构

    vue工程化开发 使用脚手架VUE CLI: 1,核心包传统开发模式:基于js/html/css直接引入核心包开发vue。 2,工程化开发。基于构建工具如(webpack)的环境中开发vue。 vue cli是什么: vue cli是一个vue官方提供的一个全局的命令工具. 可以帮助我们快速的创建一个开发vue项目的标准化基础

    2024年02月10日
    浏览(44)
  • 前端工程化-VUE

    高效的开发离不开基础工程的搭建。本章主要介绍如何使用Vue进行实际SPA项目的开发,这里使用的是目前热门的JavaScript应用程序模块打包工具Webpack,进行模块化开发、代码编译和打包。 Vue脚手架指的是Vue-cli,它是一个专门为单页面应用快速搭建繁杂程序的脚手架,它可以轻

    2024年02月08日
    浏览(79)
  • VUE工程化--vue组件注册

    组件注册的两种方式: 1. 局部注册:只能在注册的组件内使用 2. 全局注册:所有组件内都能使用   局部注册步骤:         1、导入         2、注册组件--注册成html标签(components中)         3、页面中使用标签 实现效果:   全局注册步骤( main.js ):         1、导入

    2024年01月18日
    浏览(39)
  • vue项目工程化入门

    mac电脑 使用Vue-cli来完成 通过命令先进入到图形化界面,然后再进行vue工程的创建 图形化界面如下: 到此,vue项目创建结束 我们通过VS Code打开之前创建的vue文件夹,打开之后,呈现如下图所示页面: vue项目的标准目录结构以及目录对应的解释如下图所示: 其中我们平时开发

    2024年02月08日
    浏览(53)
  • Vue3工程化项目搭建

    源码:vue3-quick-start 预览:vue3-quick-start 工程化概述 前端工程化大致可以分为模块化、组件化、规范化和自动化。 规范化 项目目录结构 语法提示 编码风格规范 联调规范 文件命名规范 代码样式规范 git flow 模块化 模块化是指将一个文件拆分成多个相互依赖的文件,最后进行

    2024年02月16日
    浏览(50)
  • 前端工程化:express服务端开发

    npm i -S express node app.js 全局中间件:第一个参数是回调函数时,则针对所有请求生效 路由中间件:第一个参数是匹配路由,第二个参数为回调函数 异常中间件:回调函数包含四个参数 异常中间件:回调函数包含四个参数 全局异常捕获 全局Promise异常捕获 需要购买或者找免费

    2023年04月23日
    浏览(78)
  • Vue应用多语言支持工程化最佳实践

    VoerkaI18n是一款非常优秀的 全新的开源国际化多语言解决方案 ,主要特性包括: 全面工程化解决方案,提供初始化、提取文本、自动翻译、编译等工具链支持。 符合直觉,不需要手动定义文本Key映射。 强大的插值变量格式化器机制,可以扩展出强大的多语言特性。 支持 b

    2024年02月03日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包