![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue技术栈
文章平均质量分 50
逐步深入vue开发各个环节
sayid760
日常知识压缩整理、以备不时之需;
欢迎拍砖,不足之处还望博友指出
展开
-
【vue3】composition-api使用
markRaw 永远不会转为响应式代理const target = ref(markRaw(window)); // 永远不会转为响应式代理return { target };store的使用import { useStore } from 'vuex'const store = useStore()onBeforeMount(() => { store.commit('setShowBack', false)})router的使用import { useSto.原创 2020-09-05 12:08:11 · 3876 阅读 · 0 评论 -
vue ssr和vue-server-renderer原理
原理程序想要成为可交互的spa就必须要用client bundle// 安装npm i vue-server-renderer express -D步骤:1)用renderToString()把vue实例挂载的内容变成html,返回给客户端1、把vue实例变成html// nodejs服务器const express = require("express");const Vu...原创 2020-02-25 10:28:36 · 6263 阅读 · 0 评论 -
keep-alive原理
什么是keep-alive?keep-alive是vue中的一个内置组件,能够把不活动的组件保存到缓存当中,而不是直接销毁他,其实是一个抽象的组件,不会渲染到真实dom中,页不会出现在父组件链中,作用是提供给路由切换用的。提供include与exclude两个属性,允许组件有条件进行缓存。实现原理其实就是在created时将需要缓存的VNode节点保存在this.cache中,在rende...原创 2020-01-20 23:52:42 · 2336 阅读 · 0 评论 -
vue-router原理
hash1、onhashchange事件这是一个HTML 5新增的事件,当#值发生变化时,就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。它的使用方法有三种:window.onhashchange = func;<body onhashchange="func();">window.addEventListene...原创 2020-01-20 11:34:36 · 1196 阅读 · 0 评论 -
vuex实现原理
vuex是什么?为什么会出现?为什么出现:vue一般是单项数据流,作用:多个组件共享数据或者是跨组件传递数据,怎么实现?原创 2020-01-16 22:07:23 · 6500 阅读 · 0 评论 -
vue gzip压缩和服务器开启gzip
修改vue.config.js// 安装 npm i -D compression-webpack-plugin// 第三方插件配置const CompressionPlugin = require("compression-webpack-plugin")module.exports = {configureWebpack:config=>{ if(progre...原创 2019-06-15 17:33:06 · 3603 阅读 · 0 评论 -
nuxt 服务端部署
1、2、nignix配置#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;events { worker_...原创 2019-08-01 15:59:28 · 2257 阅读 · 0 评论 -
vue根据值给予不同的class
<div class="chatBox-kuang" :class="addclass(skin)"></div>data(){ return{ skin:'' }}onchooseSkin(attr){ this.skin=attr},方法一addclass(i){ switch (i) { case 0...原创 2018-02-18 19:03:14 · 7474 阅读 · 2 评论 -
vue拖拽
常规自定义指令移动端常规不是很顺畅,而且也是DOM操作,不是符合vue的意义,尽量不要改DOM元素,要用数据驱动,少用 this.$refs<style> #box { position: absolute; left: 0; top: 0; width: 100px; height: 100px; b...原创 2018-07-18 23:29:44 · 1861 阅读 · 2 评论 -
vue ssr 服务端渲染的理解
简单例子使用一个页面模板插值为每个请求创建一个新的根 Vue 实例router服务器端数据预取混合修改title提取css//安装npm install vue-server-renderer --save// 第 1 步:创建一个 Vue 实例const Vue = require('vue')const app = new Vue({ ...原创 2018-09-05 22:20:16 · 8601 阅读 · 1 评论 -
vue进入页面时滚动条始终在底部
mounted () { this.scrollToBottom();},//每次页面渲染完之后滚动条在最底部updated:function(){ this.scrollToBottom();},methods:{ scrollToBottom: function () { this.$nextTick(() => { var contain...原创 2018-02-19 01:36:22 · 20692 阅读 · 0 评论 -
H5页面ios键盘遮挡input问题
完美方案// 解决输入法被激活时 底部输入框被遮住问题<textarea type="text" value="" ref="textarea" v-model="newMsg" v-on:focus="focusIpt" v-on:blur="blurIpt" rows="1" />data(){ return{原创 2018-02-19 01:34:34 · 3677 阅读 · 1 评论 -
vue传值方式
一、路由传值//params使用场景router.push('/users/123') // 跳转时router.push({ // 另一种方式跳转 name: 'users', params: { id: 123 }})// 获取idroute.params.id // 123// 实际URL地址 => localhost:8080/users/123/...原创 2018-03-19 10:09:04 · 2299 阅读 · 0 评论 -
render渲染函数和jsx用法
jsx 用法//render-dom.jsexport default { functional: true, props: { number: Number, renderFunc: Function }, render: (h, ctx) =&amp;amp;amp;amp;amp;amp;gt; { return ctx.props.renderFunc(h, ctx.props.number)...原创 2018-12-22 09:08:28 · 3396 阅读 · 0 评论 -
vue后台系统权限控制的两种思路
思路1、①登录的时候获取用户信息②把获取的信息跟已有路由做比较,判断page里是否有对象,没有的话就把已有路由routerMap 放在空数组routerList里,如果有对象,则遍历判断page是否为true,如果true则为放到空数组routerList里,false的话就return出来③把routerList跟默认的routes拼接在一起(routerList.concat(rou...原创 2018-12-31 00:55:48 · 8072 阅读 · 0 评论