Vue
关注
分享
扫一扫
文章平均质量分 59
Wyyyy1024
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
如何在vue项目中使用markdown编辑器
vue使用markdown原创 2022-10-23 16:54:19 · 1365 阅读 · 0 评论 -
Vue2与Vue3中Ref绑定元素
vue中ref绑定元素原创 2022-06-18 15:47:45 · 5248 阅读 · 0 评论 -
vue中keep-alive缓存的使用
keep-alive是什么？<keep-alive /> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。 使用<keep-alive />包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。应用场景在一个项目中，当我们主页跳转到列表页在从列表页跳转到详情页，我们希望我们点击过的每一个列表再次点击不需要重新发送请求，这时我们需要将页面的数据缓存下来，以保证下次不在重新发起请求，获取数据。所以我们借助vue中<keep-alive /原创 2020-12-28 19:07:42 · 485 阅读 · 0 评论 -
vue项目中loadsh库常用方法
lodash1.下载npm i lodash2.使用全局使用import _ form lodash按需使用import { 要使用的函数 } from loadsh常用方法_.cloneDeep(value)(深拷贝)var objects = [{ 'a': 1 }, { 'b': 2 }]; var deep = _.cloneDeep(objects);console.log(deep[0] === objects[0]);// => false原创 2020-12-26 19:50:08 · 1610 阅读 · 1 评论 -
基于vant的移动端黑马头条知识点总结
移动端rem适配Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 remlib-flexible 用于设置 rem 基准值一、使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）1、安装# yarn add amfe-flexiblenpm i amfe-flexible2、然后在 main.js 中加载执行该模块import '原创 2020-12-23 18:57:21 · 1216 阅读 · 0 评论 -
vue中.sync修饰符与自定义组件的v-model的使用
.sync修饰符有时我们需要父组件向子组件传值，并且子组件要修改父组件中的值是，我们一般会这样写//父组件<template> //子组件修改值 父组件注册自定义事件 传过来的参数通过$event来获取 <div :title='title' @update-title='title = $event'> {{title}} </div></template><script>export default原创 2020-12-22 19:26:20 · 666 阅读 · 0 评论 -
利用json-bigint处理后台数据大数字问题
json-bigintGitHub网址：https://github.com/sidorares/json-bigint当我们在写项目的时候调用后台接口的地址需要接收一个id值例如：（id：9223372036854776000）JavaScript 能够准确表示的整数范围在-2^53到2^53之间（不含两个端点），超过这个范围，无法精确表示这个值，这使得 JavaScript 不适合进行科学和金融方面的精确计算浏览器会默认解析得到数值与原数值不匹配导致404问题解决这个问题我们使用第三方插件原创 2020-12-21 14:29:21 · 1559 阅读 · 0 评论 -
vue项目中使用组件库设置样式不生效的解决方法
scoped实现原理实现组件的私有化，不对全局造成样式污染 ,我们使用scoped作用：声明的样式只对当前组件生效<style lang="less" scoped>.hambuger-btn { position: fixed; right: 0; width: 66px; height: 82px; display: flex; justify-content: center; align-items: center; background-co原创 2020-12-19 21:21:43 · 2115 阅读 · 1 评论 -
Vue中import与@import的区别及使用场景
importscript中的import是js的语法, 是在js中去引用css文件(ES6)模块化规范：默认导入语法 import 接收名称 from '模块标识符’使用导入组件import Vue from 'vue'导入js、css、vue、less等文件import login from '../views/login/login.vue'import './styles/index.less'导入第三方插件import Vant from 'vant'原创 2020-12-15 15:58:42 · 9307 阅读 · 1 评论 -
Vuex的基本使用
VuexVuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享好处：① 能够在 vuex 中集中管理共享的数据，易于开发和后期维护② 能够高效地实现组件之间的数据共享，提高开发效率③ 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步vuex的基本使用安装npm install vuex -save导入vuex包import vuex from ‘vuex’Vue.use(vuex)创建store对象co原创 2020-12-14 11:07:34 · 157 阅读 · 0 评论 -
Vue的生命周期（Vue实例产生过程）
1. 挂载（初始化相关属性）beforeCreate在实例初始化之后，数据观测和事件配置之前被调用created（重要）（获取服务器数据的最佳时期）在实例创建完成后被立即调用，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调beforeMount在挂载前开始之前被调用（视图挂载前）mouted（重要） （获取视图 或者 修改 DOM 的最佳时期）视图挂载后（el被新创建vm.$el原创 2020-12-10 21:25:58 · 390 阅读 · 0 评论 -
Vue——slot、slot-scope、scope、v-slot详解
slotvue2.6.0之前使用，现已经是被废弃的，2.6.0之后新增v-slot替代用于标记往哪个具名插槽中插入子组件内容。<body> <div id="app"> <slot-test>插槽的使用</slot-test> </div></body><script> Vue.component('slot-test',{ template原创 2020-12-07 18:49:06 · 3655 阅读 · 0 评论 -
webpack，babel，babel-loader的关系
我们新建一个项目，会先配置webpack，然后配置babelbabel是一个编译工具，实际上，babel也是可以单独使用的webpackwebpack 是一个现代 JavaScript 应用程序的静态模块打包器。（项目打包）babelbabel 是一个 JavaScript 编译器。（把浏览器不认识的语法，编译成浏览器认识的语法。）babel-loader用来连接webpack使用babel的加载器三者的关系babel 是编译工具，把js高级语言转换成浏览器能识别的js语.原创 2020-12-01 20:07:15 · 854 阅读 · 0 评论 -
Vue全家桶——前端路由
路由路由是一个比较广义和抽象的概念，路由的本质就是对应关系。在开发中，路由分为：后端路由前端路由后端路由概念：根据不同的用户 URL 请求，返回不同的内容本质：URL 请求地址与服务器资源之间的对应关系前端路由概念：根据不同的用户事件，显示不同的页面内容本质：用户事件与事件处理函数之间的对应关系Vue-RouterVue Router（官网）是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，可以非常方便的用于SPA应用程序的开发。支持HTML5原创 2020-11-28 20:18:35 · 151 阅读 · 0 评论 -
Vue实例配置对象中el、template、render
三者优先级render > template > elel只在用 new 创建实例时生效提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例在实例挂载之后，元素可以用 vm.$el 访问template一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽render字符串模板的代替方案，允许你发挥 JavaScript 最大.原创 2020-11-25 14:20:52 · 1255 阅读 · 0 评论 -
Vue——tab栏切换增强版
题目描述点击tab栏 内容区域显示对应的内容如 点击 SECTION 1 则 内容区域显示 对应 SECTION 1 的内容 同时当前 SECTION的字体颜色变成蓝色训练目标能够理解vue 中的数据渲染能够理解 v-for, v-if , v-bind , v-click 的使用能够理解 vue 中调用函数的时候传递参数<!DOCTYPE html><html lang="en"> <head> <me..原创 2020-11-24 16:31:44 · 514 阅读 · 0 评论 -
Vue——插槽、具名插槽、作用域插槽
组件插槽在组件的使用时传入值通过<slot></slot>来传值插槽的基本使用1. 插槽位置Vue.component('alert-box', {template: `<div class="demo-alert-box"><strong>Error!</strong><slot></slot></div>`})2. 插槽内容<alert-box>Something b原创 2020-11-24 14:15:14 · 233 阅读 · 1 评论 -
Vue——组件的注册、使用、以及父子组件之间的传值
全局组件注册组件Vue.component("组件名称",{ data:"组件数据", //template 里面的内容是这个组件的html结果 template:'组件模板内容' });// 注册一个名为 button-counter 的新组件Vue.component('button-counter', {data: function () {return {count: 0}},template: '<button v-on:click="cou原创 2020-11-23 21:25:44 · 449 阅读 · 0 评论 -
Vue——指令及其使用
指令以v-开头的自定义属性。v-cloak(了解)这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。<style> [v-cloak] { display: none; }</style><body> <div id='app'>原创 2020-11-22 09:17:12 · 152 阅读 · 0 评论