页面的渲染过程 当我们在浏览器里输入一个 URL 后，最终会呈现一个完整的网页。会经历以下几个步骤： 1、HTML 的加载 页面上输入 URL 后，会先拿到 HTML 文件。HTML是一个页面的基础，所以会在最开始的时候下载它，下载完毕后就开始对它进行解析 2、其他静态资源的下载 HTML 在解析的
转载
2020-05-14 09:41:00
321阅读
2评论
备注：vue.3.0的生命周期与渲染等机制有变化，这里仅是适用vue2.0一、vue2.0生命周期beforeCreate（创建前）、created（创建后） beforeMount（载入前）、mounted（载入后） beforeUpdate（更新前）、updated（更新后） beforeDestroy（销毁前）、destroyed（销毁后）二、问题： 1.vue第一次页面加载会触发四个钩子函
转载
2024-02-28 08:33:12
200阅读
一、条件
渲染1、v-if 和v-else 条件
渲染就是，通过改变条件来决定一些东西是否出现在
页面中。如v-if和v-else，此要成对出现，且放在同级别标签中。如下例子，当v-if为true时，
页面显示hello world 。当v-if为false时，则显示 你好 世界。<p v-if="isShow">hello world<
转载
2024-03-19 08:46:14
253阅读
Vue 是一套用于构建用户界面的渐进式框架，是MVVM模型,它包括声明式渲染、组件系统、客户端路由、状态管理、构建体系，我们可以根据自己的需求来应用其中的功能。在Vue的基础语法中，渲染的方式有条件渲染、列表渲染。1.条件渲染 用Vue进行条件渲染可以使用v-if和v-show指令，它们都是用于渲染某一部分内容，因为它们的渲染是需要满足条件才能
转载
2024-01-11 09:01:28
95阅读
html：组件渲染的基本过程 main.js：
import Vue from "vue";
import Home from "./home.vue";
new Vue({
el: "#app",
template: "",
components: { Home }
});
home.vue
{{text}}
export default {
name: "home",
dat
转载
2023-12-03 20:47:00
166阅读
我们知道SPA有很多优点，不过一个缺点就是对(不是Google的)愚蠢的搜索引擎的SEO不友好，为了照顾这些引擎，目前主要有两个方案：服务端渲染(Server Side Rendering)、预渲染(Prerending)。 如果你只需要改善少数页面（例如 首页/, /about, /contact
转载
2019-08-19 23:11:00
128阅读
绑定样式
在应用界面中, 某个(些)元素的样式是变化的
class/style 绑定就是专门用来实现动态样式效果的技术
class 绑定
语法：:class="xxx"
xxx 可以是字符串、数组、对象
字符串：'classA'
对象：{classA: false, classB: true}
数组：['classA', 'classB']
xxx 是 data 属性
原创
2023-10-19 09:28:02
107阅读
# Vue.js渲染页面
Vue.js是一个用于构建用户界面的渐进式JavaScript框架。它提供了一个专注于视图层的解决方案，让开发者可以更轻松地构建交互式的Web应用程序。在本文中，我们将详细介绍Vue.js的渲染页面过程，并提供相应的代码示例。
## 渲染页面的基本流程
Vue.js的渲染页面过程可以分为以下几个步骤：
1. 创建Vue实例：首先，我们需要创建一个Vue实例，以便于
原创
2023-08-10 04:12:00
294阅读
# Java 后端渲染 Vue 页面
在传统的前后端分离开发模式中，前端负责展示数据和交互逻辑，后端负责处理业务逻辑和数据存储。然而，在某些情况下，我们可能需要在后端使用 Java 来渲染 Vue 页面。本文将介绍如何在 Java 后端渲染 Vue 页面，并提供相关的代码示例。
## 为什么需要在后端渲染 Vue 页面
在传统的前后端分离开发模式中，前端负责处理页面渲染和交互逻辑，后端仅负责
原创
2023-10-26 08:29:00
549阅读
花费了一个月时间，终于在新养车之家项目中成功部署了vue2服务端渲染（SSR），并且使用上了Vuex 负责状态管理，首屏加载时间从之前4G网络下的1000ms，提升到了现在500-700ms之间，SSR的优势有很多，现在让我来跟你细细道来。技术栈服务端：Nodejs（v6.3）前端框架 Vue2.1.10前端构建工具：webpack2.2 && gulp代码检查：eslint源码：
vue 渲染流程注意：以下代码都是关键代码，由本人手写并经过测试 ～ 并非直接down的源码。使用方式既然我们已经使用很多次vue了，那vue的使用方式大家一定不陌生。假设我们在html中引入了打包好的vue.js文件，代码如下：在这个new Vue的构造函数中，我们传入了一个对象，对象的属性包括了data、el、mounted三个属性。今天只考虑这三个属性如何正确的渲染出来。<!DOCTY
转载
2023-09-30 21:03:48
792阅读
先上图：首先进行Vue的初始化，初始化Vue的实例成员以及静态成员。当初始化结束之后，开始调用构造函数，在构造函数中调用this._init()，这个方法相当于我们整个Vue的入口。在_init()中调用this.$mount()，共有两个this.$mount()。 第一个this.$mount()是
转载
2023-08-20 09:56:20
163阅读
背景最近看上了ElementUI（Vue实现）用来实现一个管理系统Demo，其中一个最常见的需求就是左侧导航不动，右侧主页块在点击导航菜单时动态更新，如下图所示：之前的实现方案是右边嵌入一个iframe，动态更改iframe的url即可，现在既然用了Vue咱也试试单页，是不是显得更优雅。接着就接触到了vue-router、组件、异步组件这些关键字，本以为把页面定义为xxx.vue放到webapp下
转载
2024-01-29 03:02:51
78阅读
本文是《vue.js》系列文章第 1篇 (共 3 篇)在动态组件上使用 keep-alive我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件：当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。例如我们来展开说一说这个多标签界面：PostsArchiveCat IpsumHipster IpsumCupcake I
转载
2024-06-06 20:17:09
131阅读
1、nextTick()的原理及作用nextTick确保我们所操作的DOM是更新之后的。（1）应用场景：在视图更新之后，基于新的视图进行操作。 在数据变化后执行的某个操作，而这个操作需要使用随数据变化而变化的DOM结构的时候，这个操作就需要放在nextTick()的回调函数中。如果在created()钩子进行DOM操作，created()中dom还没有渲染，一定要放在nextTick()
转载
2024-10-08 12:45:49
37阅读
能获取到数据 数据却渲染不到页面上问题描述： 数据改变了，数据打印出来都正确，但是页面里面就是不显示、没变化。很多时候对数据进行处理了，但是页面上就是没变化，没效果，用 console.log 打印数据都没问题，特别是数组、对象容易出现这个问题；解决方法1、 this.$set( xxx )Vue.set( target, propertyName/index, value )
//this.$s
转载
2023-12-14 08:39:19
588阅读
# Vue + Axios 请求后渲染页面的完整指南
在现代前端开发中，使用 Vue.js 框架结合 Axios 库进行网络请求和页面渲染是一种常见的模式。今天，我们将一起学习如何完成这件事情。以下是我们将要走的流程：
## 流程步骤
| 步骤 | 描述 |
|------|-----------------
原创
2024-08-16 06:03:11
142阅读
浏览器渲染页面的原理及流程 浏览器将域名通过网络通信从服务器拿到html文件后，如何渲染页面呢？ 1.根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。 2.构建渲染树（Rend ...
转载
2021-09-02 13:48:00
460阅读
2评论
在我们利用脚手架搭建项目的时候，main.jsnew Vue({
store,
router,
render: h => h(App)
}).$mount('#app') 这是我一个项目中的，和实际可能有一点不一样，不过意思雷同。 new 一个Vue对象，然后挂载$mount方法，通过自定义Render方法、template、el等生成Render函数，我这里使用的render,
转载
2024-02-26 17:25:24
167阅读
周末想顺便把已经做好静态页面的webApp项目做一下SEO优化，由于不想写蹩脚的SSR代码，所以准备采用预渲染，本来想着网上有这么多预渲染的文章，随便找个来跟着做不就完了嘛，结果年轻的我付出了整个周末..... 这篇文章就记录一下最后是怎么配置的 T.T 1. 简介与使用场景 …
原创
2021-09-08 16:59:14
232阅读
