qq_44849271的博客

Vue插槽相当于一个占位元素，在组件中留下占位元素，不同的父组件使用相同的子组件，就可以自定义不同的子组件内容。Vue有3种类型的插槽：匿名插槽、具名插槽、作用域插槽。

监控可以观察到人的动作、周围的环境，如果有情况也可以通过监控还原现场。前端也可以通过设置“监控”观察用户，在遇到一些无法复现、奇奇怪怪的问题，或者单个用户所在的环境与大部分用户的环境不一样时产生的问题，例如 该用户对浏览器设置了不允许cookie 等；这些问题通过前端监控记录下来，让开发者模拟出问题环境、操作步骤，能更好的解决问题。

Vue2与Vue3都有该组件可以用于控制组件切换时的效果，让用户有更好的体验感。先看效果：页面切换的时候由透明逐渐显示。

immediate属性可以让watch在页面初始化后就执行。

Webview是一个基于webkit引擎，可以解析DOM元素，展示html页面的控件，它和浏览器展示页面的原理是相同的，所以可以把它当做浏览器看待。（chrome浏览器也是基于webkit引擎开发的，Mozilla浏览器是基于Gecko引擎开发的）开发过小程序的话对这个标签应该比较熟悉，web-view标签与iframe标签类似，可以在我们的页面中渲染第三方页面。...

不了解路由守卫的next很容易让页面陷入死循环。以全局前置路由为例，陷入路由死循环一般报错是堆栈溢出也就是：RangeError: Maximum call stack size exceededrouter.js当从Index.vue离开时就会陷入死循环。要清楚前置路由陷入死循环的原因,就要明白前置路由守卫的next函数流程解析：刚开始的时候 目标路由是/Center，来源路由是/Index，执行前置路由守卫，判断到if为true,于是执行next(‘/an’)，目标路由改成了/an，但来源路由仍

先看要求：有个公共函数需要在进入页面前就要执行，用于设置缓存，首页或者其他页面都需要使用这个缓存数据，并且用户可以自由进出不同页面，所以设置缓存的函数在首页执行并不可取，但每个页面都执行设置缓存函数会使得代码变得有些冗余。App.vuemain.jsindex.vue因为async/await可以将Promise的异步操作像同步一样操作。...

Vue2、3框架使用i18n实现国际化

Vue全局注册组件Vue2//Vue2注册全局组件//main.jsimport Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import helloworld from '@/components/helloworld.vue'Vue.config.productionTip = falseVue.component('hellowo

Vue挂载变量或者函数Vue2挂载变量//main.js//挂载变量Vue.prototype.$variant="变量";//挂载函数Vue.prototype.$fun=function(){ return "function"}//在页面中通过this即可获取挂载的变量//index.vuemounted(){ //使用挂载的变量 console.log(this.$variant); //使用挂载的函数 this.$fun();}Vue3挂载变量Vue3相比Vu

Vue中获取各类型input标签的值HTML中input标签的tyle类型实际上有23种；常用的有text、password、radio、checkbox、button、file。现在就在Vue中获取常用的值获取text类型的值//html<input type="text" v-model="val">//jsconsole.log(this.val);获取password类型的值//html<input type="password" v-model="val"

Vue路由守卫Vue的路由，简单来说 主要提供的是组件间互相跳转的帮助；例如从首页跳转到设置页····路由守卫——作用就在于监听组件间互相跳转的时候，也可以理解为拦截；例如从首页跳转到设置页时，路由守卫会监听到页面来自首页，目标页面是设置页。路由守卫分为全局守卫、独享守卫、组件内的守卫 ！以下示例代码是在vue脚手架创建的项目中使用的 ！全局守卫全局，顾名思义是指的整个项目，全局守卫监听的是整个项目的路由import Vue from 'vue'import VueRouter f

Vue的filters传入多个参数的写法Filters是Vue的过滤器//传入一个参数时<template> <div> <h1>{{content | filter}}</h1> </div></template><script>export default { data(){ return{ content:""

Vue的filter过滤器的使用Vue官方文档：过滤器在项目中还是比较常见的，让文本格式化、筛选出元素的对应的样式······过滤器的用法：在需要过滤的值后边加上 |,<template> <div> <h1 :class="style_h1 | filter_style">HOME</h1> </div></template><script>export default

Mixins是到底是什么先看一下官方文档的介绍：关键语句：混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中这句话的意思是：JS对象可以合并到Vue当前实例中。直接上代码能更清楚：Home.vue组件，引入Obj.js文件<template> <div> <h1>HOME</h1> </div></template><script>impor

Vue强制重新渲染组件首先看一下官网对$forceUpdate的介绍首先看一下官网对$forceUpdate的介绍例子：<template> <div> <h1>HOME</h1> <p>名字:{{arr[0]}}</p> <input type="button" value="点击改变名字" @click="changName"> </div&g

Vue监听Vuex的数据Vue监听Vuex数据跟监听data数据一样，使用watch属性监听。监听data数据：<template> <div> <h1>Compontent</h1> </div></template><script>export default { data(){ return{ content:"value", obj:{ name:"obj" }

Vue一个组件内使用多个router-view先看实例：不同的组件出现在对应的位置代码：Home.vue<template> <div> <h1>HOME</h1> <router-view name="one" class="one"></router-view> <router-view name="two" class="two"></rout

Vue使用keep-alive标签实现组件缓存首先看一下使用keep-alive的效果keep-alive的使用方式keep-alive的属性与缓存组件的钩子函数实际代码首先看一下使用keep-alive的效果简单介绍：Son1组件切换到Son2组件后，再回到Son1组件，Son1组件的输入框并没有恢复初始值。这就是将Son1组件缓存了下来。keep-alive的使用方式<keep-alive> <router-view></router-view>&l

Vue深度监听Vue框架中监听一般写法为:watch:{ a(newVal,oldVal){ console.log(newVal); }}当监听对象的属性时:watch:{ "obj.name"(newVal,oldVal){ console.log(newVal); }}如果需要监听整个对象时：watch:{ obj:{ deep:true,//true为进行深度监听,false为不进行深度监听 handler(newVal){ console.log

Vue打包后的项目白屏使用npm run build打包Vue项目后，项目白屏在dist文件夹打开index.html这个问题一般来说是打包后，项目文件路径对不上解决方案：在根目录(跟src文件夹同级别)下添加vue.config.js文件。在vue.config.js文件中添加module.exports={publicPath:’./’}代码最后重新打包...

VuexVuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。在不使用Vuex的情况下，组件间传值的方式是通过父传子的方式或者兄弟组件传值。父子组件传值:在这里插入代码片...

Vue的$next.Tick(callback);官网描述：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。翻译成通俗易懂的话就是：将要执行的函数在DOM更新后执行。Demo:目的：获取span标签中的文本信息没有$nextTick的情况下：<template> <div> <el-dial

Electron可以让开发者使用HTML、CSS与JavaScript开发出桌面应用使用Electron开发的桌面的应用有开发者比较熟悉的VScode···Electron官网：https://www.electronjs.org/同样的，Electron也可以使用vue框架创建。现在使用命令来创建Electron-vue一、创建Vue脚手架使用 npm i @vue/cli 命令创建脚手架二、创建Electron-vue项目使用 vue init simulatedgreg/elec

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar

Vue侦听器监听对象中的属性Vue的侦听器——watch用法:<template> <div> <span>监听form对象中的name属性</span> <span>{{form.name}}</span> <input type="button" value="点击改变" @click="setForm"/> </div></template><script&

el-select绑定对象

Vue中子组件调用父组件的函数Vue中父组件调用子组件的函数比较常见的。除了父组件调用子组件的函数，其实子组件也可以调用父组件的函数。DEMO:Father.js:<template> <div> <div> <h1>FATHER</h1> <son></son> </div> </div&gt

Vue父组件调用子组件的函数该篇是父组件通过事件调用子组件的函数。例如父组件通过 点击事件 让子组件发请求。

通过脚手架创建Vue项目本文描述的是通过脚手架创建Vue项目必须要有Node.js