Wangdr的博客

【代码】子组件获取父组件的ref。

在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用。用 – 这样写法加上样式名称 例如：–background 引用：var(–background)是一个伪类，表示文档根元素，所有主流浏览器均支持 ，除了 IE8 及更早的版本。5、最后main.js中全局引入theme.js 就好啦~1、新建theme1.css文件。2、theme2.css文件。3.theme.scss文件。（简单举个列子哈~）如有问题欢迎指正~~

注意：该方法是 String 的静态方法，字符串中的每个字符都由单独的 Unicode 数字编码指定。使用语法： String.fromCharCode()。fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。：将 Unicode 编码转为一个字符。

disableHostCheck: true，是解决浏览器打开www.local.com出现Invalid Host header页面的情况。1、配置本地hosts文件：添加127.0.0.1 www.local.com（自定义域名）

通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。新建src/directives/LimitNumber.js文件。批量注册指令，新建 directives/index.js 文件。二、全局批量注册自定义指令。在main.js全局引入。.........

Vue项目中使用Vuex作为状态管理，相当于全局的变量存储，可以在所有的vue组件中共享数据、动态修改其状态。但是当我们去刷新浏览器的时候，store中的状态都会被清空、重新初始化为最初的状态，在某些情况下，我们可能需要将这些状态保存下来，所以这篇来介绍如何让vuex或pinia的状态持久化存储。要实现持久化存储，简单来说就是将其状态保存到localStorage或者sessionStorage中。修改状态的时候，往session中存储一下，state从 session中取，达到持久化存储的效果。.....

页面中经常会用到第三方库的情况，直接全局引入html文件会造成资源浪费实现在需要的页面动态加载

实战用例：管理后台–权限管理模块，多级菜单，菜单层级不固定。使用组件递归之后不能使用父子传值，不是普通的父子关系。新建一个bus.js文件。二、组件递归后的传值。

1、将导航+状态栏拆出来做个公共组件（此处只贴出状态栏的高度） <div class="status-bar" v-else :style="'height(statusHeight/75)+'rem'"></div>2、获取高度、赋值移动端通过ua信息传递（安卓手机的全面屏有些特殊，所以单独做了些处理，具体看代码）//判断屏幕是否为全面屏export function statusHeight(){ function judgeBigScreen() {

一、依赖优化之 CDN 加速减少app.js和vender.js的体积，加快加载速度二、gzip暴力压缩1.npm安装npm i compression-webpack-plugin@1.1.12 --save-dev2.配置，config里的index.js文件 build: { // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all sta

遇到的问题：项目里，加载的list，页面上有个切换的tab,实现切换不同的类型，加载不同的list的功能。vant-ui的list就有个bug，当切换tab的时候，它的onload没方法自动触发。然而在当前标签页，如果列表已经加载完毕再去切换，onload就可以实现自动触发解决办法：tab(i,en){ this.num=i; this.type=en; this.evaluate_list=[];//清空list列表 this.noData=false;//展示列表

1.先下载 编辑器cnpm install wangeditor --save2.用法：2.1、html用来放编辑器<div id="editor"> <p v-model="info">请输入内容</p>//占位符 </div>2.2、js部分var E = require('wangeditor') ;mount...

使用cdn引入方式 <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script>在组件中，先定义一个元素用来放图表<div id="main" style="width: 600px;height:400px;"></div>...

webpack版本低于4.0（下载记得带上版本号）npm install --save-dev compression-webpack-plugin@1.1.12

<div class="progress" :style="'width:' + credit_ratio * 100 + '%'"></div>

问题：启动后端口就会变，不固定http://localhost:32907http://localhost:27916解决办法：portfinder新发布的版本异常https://github.com/vuejs/vue-cli/issues/4452项目目录执行下面命令npm install portfinder@1.0.21...

methods//初始化第一页数据getServerData(){ var _this=this; post_ajax(url,{market_token:localStorage.getItem('inToken'),code:localStorage.getItem('inCode'),page:_this.page,page...

1.父组件向子组件传值：通过props数组：先定义一个子组件，在组件中注册props<template> <div> <div>{{msgFather}}(子组件)</div> </div></template><script>name: 'hello', data (...

vant的图片预览运用详解：&lt;div class="img_box" v-for='(item2,index) of item.images' :key='index'&gt; &lt;img :src="item2" alt="" @click="getImg(item.images,index)"&gt;&lt;/div&gt;//图片预览，通过传参的方式把

是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。用法1：include: 字符串或正则表达式。只有匹配的组件会被缓存。exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。// 组件export default { name: 'test-keep-alive', data () { return { include...

原文地址

在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck: truedevServer: { disableHostCheck: true,}vue-cli版本3.0的情况下修改vue.config.js的配置module.exports = { devServer: { disableH...

&lt;p&gt;联系电话：&lt;a :href="'tel:' + item.phone"&gt;{{item.phone}}&lt;/a&gt;&lt;/p&gt;

router.afterEach((to, from) =&gt; { const u = navigator.userAgent.toLowerCase() if(u.indexOf("like mac os x") &lt; 0 || u.match(/MicroMessenger/i) != 'micromessenger' || u.match(/WebP/i) == "webp"...

router.beforeEach(to,from,next)=&amp;amp;amp;gt;{ store.state.token=sessionStroage.getItem('token'); if(to.meta.requireAuth){ vueRouter.push({name: 'home'}); }else{ next() }}//在需要判断的路由下meta{ require...

const query = Qs.parse(location.search.substring(1))let passport = query.passport;

&lt;meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes,viewport-fit=cover" /&gt; 在meta标签里加上viewport-fit=cover"

1.引入本地文件在index.html 里引入本得js文件<script src="/static/js/jquery-1.12.3.min.js"></script>写入./刷新页面 会出现 Uncaught SyntaxError: Unexpected token <2.背景图片找不到在build文件夹下 找到base.config.js{...

<transition name="fade"> <div class="picker_wrap" v-show="roomSelectShow" @click="cancelSelect"> <div class="picker_alert" @click.stop> <div class="picker...

1、.lazy在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：<input v-model.lazy="msg" >2、.number如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：&lt...

原文地址

删除node_module包用npm i 或 cnpm i 从新下载然后cnpm run dev

vue是一个JavaMVVM库，是一套用于构建用户界面的渐进式框架，是初创项目的首选前端框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。它是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。它提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。一、安装vue1、安装node.js，安装完node.js之后，npm也会自...

1.下载cnpm install vue-image-crop-upload2.运用<div id="app"> <a class="btn" @click="toggleShow">设置头像</a> <my-upload field="img" @crop-success="cropSuccess" ...

用vue的脚手架做前端开发的时候，本地开发所有的样式都能生效，但是打包之后就会有部分样式失效（我遇到的问题是，当内容超过3行的时候，多出部分省略的样式无法添加。），且在浏览器中无法找到该css属性。解决办法如下：首先注释掉webpack.prod.config.js中，下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: config.bui...

这是由于IE对promise的支持不好，我们需要安装：babel-polyfill和es6-promise:npm install babel-polyfillnpm install es6-promise然后在main.js文件中引用:import 'babel-polyfill'import Vue from 'vue'import Es6Promise from 'es6-pr...

效果图<van-popup v-model="show" position="center" :overlay="true" transition="0s easing"> <div class='picker_box'> <p class='set'>设置店铺折扣率</p> <div clas...

vue——解决“You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. ”在build/webpack.base...