万花丨凋-优快云博客

原创 nuxt中bulid怎么配问题

bulid是用脚手架搭建完毕后自动生成的，如果需要配置，可以看以下的代码： build: { transpile: [/^element-ui/], /* ** You can extend webpack config here */ // loaders: { // vue: { // transformAssetUrls: { // audio: 'src' // } // }

2020-08-24 08:44:54 344 6

构造函数：是最常见的重载的例子，分为空参构造和有参构造，多半出现于普通的类中，例如：一个student类中的属性，给一个属性设置两个方法set中放入参数为有参，get中不放入参数为空参。如以下代码：public Integer getMid() { return mid;}public void setMid(Integer mid) { this.mid = mid;}public String getMname() { return mname;}publi

2020-08-14 16:15:55 371

原创方法重载overload和方法重写override的区别

如下图：方法重载的需求：要求是在同一个类中两个或两个以上的方法，方法名相同，参数和方法体不能相同，我们最常见的例子就是构造函数方法重写的需求：子类中的方法实现父类的方法的时，三者均相同但是子类异常不能超出父类异常子类的访问级别不能低于父类访问级别（其中也就是面向对象中的继承，也可以叫子类覆盖父类的方法）...

2020-08-14 15:48:17 165

原创个人对于oop的理解

oop即为面向对象理解如下图：如上图：面向对象总共有4个特点：1.封装：一些数据和方法可以选择隐藏和暴露2.继承：子类可以实现父类的方法，有选择的扩展3.多态：一个类在调用方法的时候可以使用不同的方式进行调用4.抽象：抽象类可以抽取不同的特性到自己的类中...

2020-08-14 15:03:27 210

原创 java中是否会存在内存泄漏，如果存在，内存泄漏产生的原因有哪些

会存在，程序分配的堆内未释放或无法释放的现象原因：长生命周期持有短生命周期对象的引用java中内存泄漏发生的场景：全局的集合变量，不正确的单例模式的使用产生内存泄漏的原因可以看下面的图：从里面可以看到引起内存泄漏共有6种因素：1.静态集合类引起的内存泄漏2.当集合里面男的对象属性被修改后，再调用remove方法时不起作用3.监听器4.各种连接5.内部类和外木模块的引用6.单例模式内存泄漏也跟堆栈方法区中的堆有关，如果不懂的可以点击此连接：https://blog.youkuaiyun.com/

2020-08-14 14:43:06 253

原创 GC是什么？为什么要有GC？（GC就是垃圾收集的意思）

如下图所示：就如图中所描述的一样，java有了GC垃圾回收以后，是不需要我们程序员去人工释放内存空间的GC的意思是指JVM释放不必要的内存，比方说不再使用的对象所占用的内存，也可以有效的防止内存泄漏。...

2020-08-14 12:06:13 4130

原创堆(heap)、栈(stack)和方法区(method)图示

如下图所示：如上图所示，堆中的数据都有内存地址值，数据也都有默认初始化值，但是当对象不再被指向时，JVM就会启动垃圾回收垃圾回收机制，同时堆和方法区都是各个线程的共享区域，栈中的数据正好和堆中数据的规则相反堆栈方法区的存储类型也是不一样的：堆：new创建的对象或数组栈：基本类型值、引用数据类型方法区：类信息、常量。静态变量、编译器编译后的代码等（前提是：都是被虚拟机已经加载过的）...

2020-08-14 11:49:30 690

原创 JDK和JRE图示(JDK是什么？JRE是什么？)

请看下图：显而易见JAVA包括了JDK和JRE，JDK里面还有java的工具和基础类库，也将通过开发人员将字节码文件进行转换，而JRE又把class文件加载到内存去准备运行

2020-08-14 11:05:49 271

原创分享：nuxt注入 $root 和 context

注入 $root 和 context有时您希望在整个应用程序中使用某个函数或属性值，此时，你需要将它们注入到Vue实例（客户端），context（服务器端）甚至 store(Vuex)。按照惯例，新增的属性或方法名使用$作为前缀。...

2020-06-22 09:21:57 1067

原创分享：nuxtES6 插件

ES6 插件如果插件位于node_modules并导出模块，需要将其添加到transpile构建选项：module.exports = { build: { transpile: ['vue-notifications'] }}您可以参考构建配置文档来获取更多构建选项。——————————————————————————————————————————链接：https://zh.nuxtjs.org/api/configuration-build/#transpile..

2020-06-17 12:46:47 239

原创分享：nuxt使用 Vue 插件

假如我们想使用 vue-notifications 显示应用的通知信息，我们需要在程序运行前配置好这个插件。首先增加文件 plugins/vue-notifications.js：import Vue from 'vue'import VueNotifications from 'vue-notifications'Vue.use(VueNotifications)然后, 在 nuxt.config.js 内配置 plugins 如下：module.exports = { plugins:

2020-06-17 12:38:17 721 1

原创分享：nuxt使用第三方模块

使用第三方模块我们可以在应用中使用第三方模块，一个典型的例子是在客户端和服务端使用 axios 做 HTTP 请求。首先我们需要安装 npm 包：npm install --save axios然后，在页面内这样使用：<template> <h1>{{ title }}</h1></template><script>import axios from 'axios'export default { async asyn

2020-06-16 09:33:39 1002

原创分享：nuxt插件

插件Nuxt.js允许您在运行Vue.js应用程序之前执行js插件。这在您需要使用自己的库或第三方模块时特别有用。需要注意的是，在任何 Vue 组件的生命周期内，只有 beforeCreate 和 created 这两个方法会在客户端和服务端被调用。其他生命周期函数仅在客户端被调用...

2020-06-15 11:01:46 301

原创分享：nuxt静态文件

静态文件如果你的静态资源文件需要 Webpack 做构建编译处理，可以放到 assets 目录，否则可以放到 static 目录中去。Nuxt 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下，像 robots.txt 或 sitemap.xml 这种类型的文件就很适合放到 static 目录中。你可以在代码中使用根路径 / 结合资源相对路径来引用静态资源：<img src="/my-image.png"/>

2020-06-14 08:21:09 1635

原创分享：nuxtWebpack 构建

Webpack 构建默认情况下, vue-loader自动使用 css-loader 和Vue模板编译器来编译处理vue文件中的样式和模板。在此编译过程中，所有的资源URL例如、 background: url(…) 和 CSS中的 @import 均会被解析成模块通过 require 引用。举个例子, 假设我们有以下文件目录结构：-| assets/----| image.png-| pages/----| index.vue如果我们在CSS代码中使用 url(’~assets/image

2020-06-13 10:51:43 1009 5

原创分享：nuxt资源文件

资源文件默认情况下 Nuxt 使用 vue-loader、file-loader 以及 url-loader 这几个 Webpack 加载器来处理文件的加载和引用。对于不需要通过 Webpack 处理的静态资源文件，可以放置在 static 目录中。

2020-06-12 08:08:52 231

原创分享：nuxt错误处理

错误处理Nuxt.js 在上下文对象context中提供了一个 error(params) 方法，你可以通过调用该方法来显示错误信息页面。params.statusCode 可用于指定服务端返回的请求状态码。以返回 Promise 的方式举个例子：export default { asyncData ({ params, error }) { return axios.get(`https://my-api/posts/${params.id}`) .then((res) =&g

2020-06-11 08:14:29 3280

原创分享：nuxt监听 query 参数改变

监听 query 参数改变默认情况下，query的改变不会调用asyncData方法。如果要监听这个行为，例如，在构建分页组件时，您可以设置应通过页面组件的watchQuery属性监听参数。了解更多有关API watchQuery的信息。——————————————————————————————————————————————链接：https://zh.nuxtjs.org/api/pages-watchquery...

2020-06-10 08:29:52 2757

原创分享：nuxt访问动态路由数据

访问动态路由数据您可以使用注入asyncData属性的context对象来访问动态路由数据。例如，可以使用配置它的文件或文件夹的名称访问动态路径参数。所以，如果你定义一个名为_slug.vue的文件，您可以通过context.params.slug来访问它。export default { async asyncData ({ params }) { const slug = params.slug // When calling /abc the slug will be "abc"

2020-06-09 09:07:21 570

原创分享：nuxt使用 req/res(request/response) 对象

使用 req/res(request/response) 对象在服务器端调用asyncData时，您可以访问用户请求的req和res对象。export default { async asyncData ({ req, res }) { // 请检查您是否在服务器端 // 使用 req 和 res if (process.server) { return { host: req.headers.host } } return {} }}

2020-06-08 12:00:25 1777

原创分享：nuxt上下文对象

上下文对象可通过 API context 来了解该对象的所有属性和方法。——————————————————————————————————————————————链接：https://zh.nuxtjs.org/api/context...

2020-06-07 14:04:30 1235

原创分享：nuxt数据的展示

数据的展示asyncData 方法返回的数据在融合 data 方法返回的数据后，一并返回给模板进行展示，如：<template> <h1>{{ title }}</h1></template>

2020-06-06 12:19:21 264

原创分享：nuxt返回对象

返回对象如果组件的数据不需要异步获取或处理，可以直接返回指定的字面对象作为组件的数据。export default { data () { return { foo: 'bar' } }}

2020-06-05 09:25:36 254

原创分享：nuxt使用 async或await

使用 async或awaitexport default { async asyncData ({ params }) { const { data } = await axios.get(`https://my-api/posts/${params.id}`) return { title: data.title } }}

2020-06-04 09:36:47 737

原创分享：nuxt使用回调函数

使用回调函数export default { asyncData ({ params }, callback) { axios.get(`https://my-api/posts/${params.id}`) .then((res) => { callback(null, { title: res.data.title }) }) }}

2020-06-03 09:58:02 352

原创分享：nuxt返回 Promise

返回 Promiseexport default { asyncData ({ params }) { return axios.get(`https://my-api/posts/${params.id}`) .then((res) => { return { title: res.data.title } }) }}

2020-06-02 08:43:11 544 1

原创分享：nuxtasyncData 方法

asyncData 方法asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。注意：由于asyncData方法是在组件初始化前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。Nuxt.js 提供了几种不同的方法来使

2020-06-01 08:30:52 1480

原创分享：nuxt异步数据

异步数据Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。————————————————————————————————————————————链接：https://vueschool.io/?friend=nuxt...

2020-05-31 12:42:47 298

原创分享：nuxt个性化特定页面的 Meta 标签

个性化特定页面的 Meta 标签关于个性化特定页面的 Meta 标签，请参考页面头部配置API。注意: 为了避免子组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象，建议利用 hid 键为meta标签配一个唯一的标识编号。请阅读关于 vue-meta 的更多信息。——————————————————————————————————————————————链接：https://zh.nuxtjs.org/api/pages-head...

2020-05-30 10:37:08 704

原创分享：nuxt默认 Meta 标签

默认 Meta 标签Nuxt.js 允许你在 nuxt.config.js 里定义应用所需的所有默认 meta 标签，在 head 字段里配置就可以了：注意: Nuxt.js 使用 hid 而不是默认值 vmid 识别元素key一个使用自定义 viewport 和谷歌字体的配置示例：head: { meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-sc

2020-05-29 13:02:02 843

原创分享：nuxtHTML 头部

HTML 头部Nuxt.js 使用了 vue-meta 更新应用的头部标签(Head) and html 属性。Nuxt.js 使用以下参数配置 vue-meta:{ keyName: 'head', // 设置 meta 信息的组件对象的字段，vue-meta 会根据这 key 值获取 meta 信息 attribute: 'n-head', // vue-meta 在监听标签时所添加的属性名 ssrAttribute: 'n-head-ssr', // 让 vue-meta 获知 m

2020-05-28 09:30:13 416 1

原创分享：nuxt页面

页面页面组件实际上是 Vue 组件，只不过 Nuxt.js 为这些组件添加了一些特殊的配置项（对应 Nuxt.js 提供的功能特性）以便你能快速开发通用应用。观看Vue School出品的 Nuxt.js 页面组件的免费课程<template> <h1 class="red">Hello {{ name }}!</h1></template><script>export default { asyncData (contex

2020-05-27 09:53:20 351

原创分享：nuxt错误页面

错误页面你可以通过编辑 layouts/error.vue 文件来定制化错误页面.警告: 虽然此文件放在 layouts 文件夹中, 但应该将它看作是一个页面(page).这个布局文件不需要包含标签。你可以把这个布局文件当成是显示应用错误（404，500等）的组件。默认的错误页面源码在这里.举一个个性化错误页面的例子 layouts/error.vue:<template> <div class="container"> <h1 v-if="er

2020-05-26 09:01:35 343

原创分享：nuxt自定义布局

layouts 目录中的每个文件 (顶级) 都将创建一个可通过页面组件中的 layout 属性访问的自定义布局。假设我们要创建一个博客布局并将其保存到layouts/blog.vue:<template> <div> <div>我的博客导航栏在这里</div> <nuxt/> </div></template>然后我们必须告诉页面 (即pages/posts.vue) 使用您的自定义布局：

2020-05-25 09:26:46 977

原创分享：nuxt默认布局

默认布局可通过添加 layouts/default.vue 文件来扩展应用的默认布局。提示: 别忘了在布局文件中添加组件用于显示页面的主体内容。默认布局的源码如下：<template> <nuxt/></template>...

2020-05-23 08:38:29 287 1

原创分享：nuxt布局

布局Nuxt.js 允许你扩展默认的布局，或在 layout 目录下创建自定义的布局。

2020-05-23 08:37:07 405

原创分享：nuxt模板

模板你可以定制化 Nuxt.js 默认的应用模板。定制化默认的 html 模板，只需要在src文件夹下（默认是应用根目录）创建一个 app.html 的文件。默认模板为：<!DOCTYPE html><html {{ HTML_ATTRS }}> <head {{ HEAD_ATTRS }}> {{ HEAD }} </head> <body {{ BODY_ATTRS }}> {{ APP }} <

2020-05-22 08:38:34 694

原创分享：nuxt视图

视图本章节的内容阐述了如何在 Nuxt.js 应用中为指定的路由配置数据和视图，包括应用模板、页面、布局和HTML头部等内容。

2020-05-21 09:01:08 271

原创分享：nuxt中间件

中间件中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。每一个中间件应放置在 middleware/ 目录。文件名的名称将成为中间件名称(middleware/auth.js将成为 auth 中间件)。一个中间件接收 context 作为第一个参数：export default function (context) { context.userAgent = process.server ? context.req.headers['user-agent'] : navigator

2020-05-20 08:45:20 2612

1_awseda_1588120224.jpg.png

空空如也