vue
TuMinQiang
这个作者很懒,什么都没留下…
展开
-
微信公众平台上传和预览图片
1、在index.html中引入js文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js2、通过config接口注入权限验证配置,进行微信认证:wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '', // 必填,企业号的唯一标识,此处填写企业号corpid time原创 2022-03-23 19:43:18 · 1405 阅读 · 0 评论 -
IE中添加cookie
谷歌浏览器中可以通过application进行cookie的添加,打开IE发现在IE浏览器中并没有application这个东西,如何在IE浏览器添加cookie?解决方案:在控制台运行这条命令:document.cookie = "cookie_name=cookie_value";比如我需要添加session,可以运行:document.cookie = "SESSION=xxxxxxxx";刷新浏览器后,添加成功,亲测有效...原创 2021-10-08 20:18:57 · 1692 阅读 · 0 评论 -
Vue.$set()如何对二维数组进行更新
我们在处理vue项目的时候,可能经常会遇到数据变化,但是视图并没有实时渲染的情况,主要有两种情况1、使用索引值操作数组时使用索引值去更新数组时会出现数据变化试图却没有更新的情况,比如使用了push()、pop()、shift()、unshift()、splice()、sort()、reverse()等方法操作数组,或者是直接通过ary[index]操作数组都会出现这种情况2、对象的增加或者删除属性时由于 Vue 会在初始化实例时对属性执行getter/setter转化过程,所以属性必须在..原创 2021-09-28 20:09:36 · 3617 阅读 · 0 评论 -
el-table多级表头再加一列无法添加表头的问题
在项目中使用el-table,是一个多级表头table,有一个需求需要新开一列添加一个类似于在表格中加Checkbox的一列,我在最外层el-table-column,并排加一列,发现table-body中都可以加上,表头无法添加上。解决方案:1、你可以使用原生js去获取到这个表头元素,没记错的话貌似是一个class为cell的div下,然后使用document.getElementsByClassName去操作添加。这样直接操作不推荐!2、在仔细查询文档后发现elementui官网上是有提供属原创 2021-09-22 20:46:32 · 572 阅读 · 0 评论 -
Vue报错——did you register the component correctly? For recursive components, make sure to provide the
今天项目中遇到一个大坑,项目报错did you register the component correctly? For recursive components, make sure to provide thethe "name" options,报错很容易理解,就是组件注册的方式不对,没有注册成功,仔细看了自己组件的注册,发现并没有什么问题在网上找了很久,一无所获,偶然看到一篇博客的评论,受到了启发。评论区是这样说的:多次调用的组件使用import引入,可以让name不和父组件冲突解决方式.原创 2021-09-22 20:28:15 · 88713 阅读 · 12 评论 -
vue插值表达式如何将\n转义为换行
在项目中遇到一个渲染问题,渲染的内容中有个\n字符,\n表示转义,使用插值表达式进行渲染时发现,渲染的内容不会换行只是用空格将内容分开解决方案:使用white-space属性<div class="text-wrapper"> {{ text }}</div><style scope> .text-wrapper { white-space: pre-wrap; }</style>p原创 2021-09-22 20:14:38 · 2582 阅读 · 2 评论 -
node解决跨域问题
今天在写一个vue/node的项目中遇到了跨域问题,所谓跨域,即是浏览器的安全策略机制导致的,无法访问不同源的资源,同源包括:协议,端口,端口号我采用的是cors来解决:1. 安装依赖,npm install cors --saveconst express=require('express')const cors = require("cors");const app = express();app.use(cors()); //在这一步解决跨域,node内置的cors帮助我们解决.原创 2021-01-25 10:04:35 · 420 阅读 · 0 评论 -
node-sass版本报错
今天在项目中使用到的sass,在安装完sass-loader时,运行项目报错Module build failed: TypeError: this.getResolve is not a function at Object.loader在网上搜索一番后发现是sass-loader版本太高的原因,我装的是8.0.0的版本,卸载后安装一个低版本的再运行,项目正常运行,具体操作:1. npm uninstall sass-loader2.npm install sass-loader@7.3.1.原创 2021-01-19 21:48:15 · 349 阅读 · 0 评论 -
vue中唯一key
Vue中的唯一keyVue 中 key 的作用是:key 是为 Vue 中 vnode 的唯一标记,通过这个 key,我们的 diff 操作可以更准确、更快速。利用唯一key来获取对应节点,比遍历更快。Vue中的virtual DOMvirtual DOM是将真实的DOM的数据抽取出来,以对象的形式模拟树形结构,最终经过一系列操作将其映射到真正的环境中。操作真实DOM元素开销很大,容易引起整个DOM树的重绘和回流,在Vue的底层实现上,Vue将模板编译成虚拟DOM渲染函数,再转换成虚拟DOM,虚拟D原创 2020-11-20 17:14:37 · 1872 阅读 · 0 评论 -
Vue中的keep-alive
keep-alivekeep-alive 是 Vue 内置的一个抽象组件,可以使被包含的组件保留状态,避免组件反复创建和渲染keep-alive一般结合路由和动态组件一起使用,用于缓存组件。<keep-alive> <component :is='current'></component></keep-alive>keep-alive提供 include 和 exclude 属性,两者都支持字符串或正则表达式, include 表示原创 2020-11-19 16:45:18 · 95 阅读 · 0 评论 -
Vue插槽
Vue插槽什么是插槽?插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。默认插槽默认插槽就是指没有名字的插槽,子组件未定义的名字的插槽,父级将会把 未指定插槽的填充的内容填充到 默认插槽中。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <me原创 2020-11-19 16:27:42 · 173 阅读 · 0 评论 -
v-model的实现原理
v-model的实现原理Vue中,在input框中使用v-model能够实现数据的双向绑定,其实v-model其实是个语法糖,实际上做了两件事。绑定vlaue值触发输入事件input<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi原创 2020-11-19 11:11:36 · 1342 阅读 · 0 评论 -
Vue组件间的通信
Vue组件间的通信组件间的通信总共有六种方式props(父组件向子组件传值)和$emit(子组件向父组件传值)父组件向子组件传值:props<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2020-11-18 16:44:06 · 123 阅读 · 0 评论 -
MVC和MVVM
MVVM和MVCMVC指的是Model-View-Controller,Model表示数据层,View表示视图层,Controller:控制器层,数据模型和视图之间通信的桥梁,通常控制器负责从事图读取数据,控制用户输入,并向模型发送数据。View 接受用户交互请求View 将请求转交给Controller处理Controller 操作Model进行数据更新保存数据更新保存之后,Model会通知View更新View 更新变化数据使用户得到反馈MVVM指的是M原创 2020-11-17 09:45:55 · 290 阅读 · 0 评论 -
computed和watch
Vue中的computed和watch用二者来实现两个输入框内容的拼接:效果:watch的使用watch监听,一般用于监听某些属性,发生改变后触发一些回调,watch支持异步,当需要在数据变化时执行异步或者开销较大时可以使用watch。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>通过watch监听文本框数据的改变<原创 2020-11-17 09:16:20 · 163 阅读 · 0 评论 -
v-if和v-show
v-if和v-show的区别和使用场景v-if是通过控制DOM节点存在与否来控制节点的显示和隐藏的,v-show是通过设置DOM元素的display样式来控制元素的显示和隐藏的,如果显示display为block,隐藏display为none。v-if会确保在切换过程中条件块内的监听器和子组件会被适当的销毁和重建,和v-show则简单的多,只是简单的基于css切换。v-if是惰性的,如果初始条件为false时,则啥也不做,只有当条件为true时,才开始渲染条件块,而v-show不管在什么条件下都会渲原创 2020-11-16 22:25:15 · 89 阅读 · 0 评论 -
Vue生命周期函数
Vue生命周期函数每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。注:生命周期函数是每个Vue实例的函数Vue生命周期函数分为三个阶段创建阶段beforeCreate:这个阶段只是初始化事件和生命周期函数,Vue实例上挂载的元素el和data对象都是undefined,还没有进行初始化。可以在这里加一原创 2020-11-11 11:23:26 · 202 阅读 · 0 评论