vue.js - Manitori

Create a post Ask question

Hot
New

|

3 months ago

|

Article

el-input 限制只能输入数字，数字大小，长度，小数点后位数以及字母e的限制

通常情况下在使用elementUI前端框架的时候，经常会遇到表单要限制输入内容，尤其是数字。话不多说，代码如下： <el-input v-model="form.plan" type="number" step="0.5" min="0" max="5" @keyup.native="proving($event)" @input="editInput($event,'plan')" placeholder="最高5分" oninput="if(value>5)value=5;if(value<0)value=0" ></el-input>第一个属性：type=“number” input的原生属性，标明input框的类型第二个属性： step=“0.5” input的原生属性，type=“number” 时生效，标明输入字段的合法数字间隔（假如 step=“0.5”，则合法数字应该是 -0.5、0、0.5、1，以此类推）第三个属性： min ...

0

Like

91

0 comment

|

3 months ago

|

Article

Vue3中的条件渲染（v-if、v-else-if、v-else 以及 v-show）的使用（实例详解）

v-if v-else v-else-ifv-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回truth值的时候被渲染。<script setup> const have = ref(true) </script> <template> <div id="app"> <div v-if = "have">我可以被显示出来</div> </div> </template>当have的值为true时，div块被显示。而当have为falseconst have = ref(false)页面无显示，且具有v-if = “have”的div块不存在在html结构中。也可以用v-else添加一个“else模块”，和js的语法相同，当if条件不成立，则显示else模块内容。在vue2.1.0新增的v-else-if，更是可以与上面两个共同使用，但是v-else和v-else-if都必须紧跟在v-if的后面使用（v-else-if可以跟在v-else-if后面）例子：<scr ...

0

Like

85

0 comment

|

3 months ago

|

Article

Vue 如何在 style 标签里使用变量

在Vue项目开发中，有时候我们需要在style标签中使用我们所定义的JS变量来编写CSS。根据官方文档，我们可以使用v-bind来实现这个目的选项式API：<template> <div class="text">hello</div> </template> <script> export default { data() { return { color: 'red' } } } </script> <style> .text { color: v-bind(color); } </style>组合式API：<script setup> import { ref } from 'vue' const theme = ref({ color: 'red', }) </script> <template> <p>hello</p> </template> ...

0

Like

93

0 comment

|

3 months ago

|

Article

Vue浅拷贝和深拷贝

前言在理解浅拷贝和深拷贝浅前，必须先理解基本数据类型和引用数据类型的区别。一、数据类型1.1.基本数据类型字符串（Sring）、布尔值（Boolean）和数字（Number）1.2.引用数据类型数组（Array）和对象（Object）1.3.区别基本数据类型是存储在栈内存中。而引用类型存放的值是指向数据的引用，而不是数据本身，真实数据是存放在堆内存里，具体见如下：二、浅拷贝2.1. 定义浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。即默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝)，即只复制对象空间而不复制资源。2.2. 浅拷贝特点对于基本数据类型的成员对象，因为基础数据类型是值传递的，所以是直接将属性值赋值给新的对象。基础类型的拷贝，其中一个对象修改该值，不会影响另外一个。var a = 10 var b = a b = 20 console.log("a",a) //10 con ...

0

Like

82

0 comment

|

3 months ago

|

Article

vue 获取元素宽高

vue 获取元素宽高vue 中获取组件宽高分两种情况：1、获取普通组件宽高，直接使用 $refs 即可2、获取子组件宽高，需使用 $refs.$el子组件<template> <div class="div_box">这是一个子组件</div> </template> <script> export default { name: 'ChileHeight' } </script> <style lang="scss" scoped> .div_box { padding: 20px; border: 20px solid red; } </style>父组件<template> <div class="home"> <div class="div_card" ref="attrRef">获取元素高度</div> <child-height ref="childRef"></child- ...

0

Like

80

0 comment

|

3 months ago

|

Post

vue识别\n换行

在项目中，需要渲染字符串文本，文本中需要通过\n换行，如果直接渲染的话无法识别\n实现换行。下面提供两种方式实现换行1. 使用v-html渲染。通过正则将字符串中\n转换成v-html可以识别的标签<br />，再通过v-html渲染。<div v-html="text"></div>this.text = str.replace(/\n/g,'<br />')2. 通过css实现<div style="white-space: pre-wrap;">{{text}}</div>white-space属性值值描述normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。pre-wrap保留空白符序列，但是正常地进行换行。pre-line合并空白符序列，但是保留换行符。inherit规定应该从父元素继承white-space属性的值。原文链接：https:/ ...

73

0 comment

|

5 months ago

|

Article

Mathjax loads slow. How to load local JS file with Nuxt?

In How to render math in Vue or Nuxt?, we explain the way to use Mathjax to render beautiful math formula in Nuxt.js. However, using CDN to load Mathjax is easy, but it degrades the performance of our pages. In other words, Mathjax may load slow if it is loaded by CDN.One of the solutions is to load Mathjax locally. You can use npm to install Mathjax to your project. npm install mathjax@4.0.0-beta.6However, it is difficult to integrate with Mathjax in Nuxt. Not only because there is little infor ...

0

Like

572

0 comment

|

5 months ago

|

Post

VSCode error: To enable project-wide JavaScript/TypeScript language features, exclude large folders...

cover

I'm using VSCode to write my Nuxt app. My VSCode was fine before, but it suddenly starts to continuously show me the error :Restarting the VSCode did not make any difference. And all my installed plugins failed, reinstalling the plugin also didn't work. Judging by the hint of VSCode, I realized that I had changed my public directory, which caused this error. Therefore, I tried to add public directory to my exclude list in tsconfig.json :{ // https://nuxt.com/docs/guide/concepts/typescript "e ...

367

0 comment

|

6 months ago

|

Article

How to render math in Vue or Nuxt?

cover

There are several ways to write and render beautiful math on web. However, some methods can't be directly applied to Vue.js/Nuxt.js. In this article, we will explain how to use katex and mathjax to render math in Vue.js/Nuxt.js.KatexTo automatically render all math in all the pages, you need to use CDN to load katex : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/poem-studio-favicon-black.svg" ...

0

Like

729

0 comment

|

6 months ago

|

Post

Vue初学记录

网站开发，需要前端与后端的开发。前端指用户端、浏览器端，是用户能看得到的部分。后端指服务器端，是用户看不到的部分。前端开发，需要用到CSS3和HTML5以及JavaScript。后端开发能用的编程语言则很多了，主流的有python、java等，只要我们电脑能够使用的编程语言，服务端都能使用。目前流行前后端分离，后端只需要提供好接口就行了，前端直接使用后端的接口。前端三大框架：Vue、react、AngularVue是目前中国使用比较多的框架，因为创造这个框架的是中国人——前谷歌员工Even You。React框架则是Meta公司（原Facebook公司）创造的框架，Angular是谷歌建立的框架。从最近GitHub的数据上看，Vue是目前全世界下载量最多的框架，第二大的为React，第三为Angular。前端框架建立的目的，其实是为了方便开发，提高开发效率，降低开发难度。本质上，最后到浏览器那里，都是转换为CSS3、HTML5、JavaScript的语言。前端的开发，代码实现前，还需要设计UI界面，提高用户体验。因此，网站前后端开发分别对应三个职位——前端工程师、后端工程师、UI设计师 ...

632

9 comments

|

6 months ago

|

Article

Vue.js与Nuxt.js的区别

Vue.js与Nuxt.js都是前端的两个框架，Vue.js的项目属于单页应用，而Nuxt.js是基于Vue.js的服务端渲染通用框架。单页应用简称SPA，指的是前端代码将会在浏览器端被浏览器渲染。这对SEO优化不利，搜索引擎爬虫，会爬到空的网页。在Vue项目中，Vue会将JS交给浏览器渲染因此，结果是查看源代码没有别的东西，搜索引擎爬虫也基本只能看到这些，于是便直接下一个了，不会等你渲染。而服务端渲染，简称SSR，正是该问题的解决方案。前端代码会先在Node.js服务端渲染，然后再交给浏览器进行“二次渲染”。Nuxt.js则是Vue.js的SSR通用解决方案。前端代码经过服务端渲染后，能让搜索引擎爬虫看到完整的网站，同时查看源代码也能看到完整的代码。服务端渲染能提高网站渲染速度，降低白屏时间。同时，因为要同时运行Node.js服务端，这增加了服务器的负载。在Nuxt.js中，可以设置部分页面SSR，部分页面则是SPA，这样能降低服务器的资源耗费。对于静态网站，可以使用预渲染替代服务端渲染。预渲染，简称SSG，指提前渲染静态的html，提高页面响应。SSG一般适用于文档、个人博客等场景 ...

0

Like

293

0 comment

|

7 months ago

|

Article

moment.js/day.js UTC time to local time

import moment from 'moment'; const time = xxx; moment.utc(time).local().format("YYYY-MM-DD HH:mm:ss") In Nuxt.js, you need to change moment.js to day.js.const dayjs = useDayjs(); const time = xxx; dayjs.utc(time).local().format("YYYY-MM-DD HH:mm:ss")

0

Like

308

0 comment