vue

vue中的filters的用法

金额保留两位小数,并加上单位元<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=...
代码星球·2020-04-06

vue前端框架面试问题汇总,附答案

1、active-class是哪个组件的属性?嵌套路由怎么定义?答:vue-router模块的router-link组件。2、怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 1、active-class是哪个组件的属性?嵌套路由怎么定义?答:vue-router模块的router-link...

vuex模块化。

项目结构: 1:在src下新建目录store,然后再建storemodule.js文件,把上篇store.js文件抽出来:importVuefrom'vue'importVuexfrom'vuex'importcountsubfrom'./countsub'//.js或者.vue可以省略,其他文件不可以。Vu...
代码星球·2020-04-06

vuex简单使用。

项目结构:   1:首先在项目中新建store.js文件,.js文件内容如下:importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)exportdefaultnewVuex.Store({state:{count:0},getters:{ad...
代码星球·2020-04-06

vue-router 的原理

1.hash修改的时候:history.pushState('名字',null,'/xxx')||location.hash='/xxx'回退的时候:window.addEventListener('statepop'||'hashchange') 2.history修改的时候:history.pushSta...
代码星球·2020-04-06

Vue 基础知识

1.vue生命周期函数(详细查看:Vue实例的生命周期(钩子函数)) 有10个钩子,对应5个动作:create(创建)mount(vdom挂载)update(数据更新导致dom需要重新渲染和打补丁)activated(keep-alive组件激活)destory(销毁)2.组件间通讯父子组件父->子:p...
代码星球·2020-04-06

Vue2 响应式原理

我们经常用vue的双向绑定,改变data的某个属性值,vue就马上帮我们自动更新视图,下面我们看看原理。Object的响应式原理: 可以看到,其实核心就是把object的所有属性都加上getter、setter,get时收集依赖,set时通知依赖,达到响应式更新的目的。但是显而易见的,这种方法无法监测到dat...
代码星球·2020-04-06

Vue computed属性

computedvsmethods我们可以使用Vue中的method计算出学科的总分,最终得到的总数结果是相同的。在上例的基础上,我们把computed区块中的totalMarks函数整体移到methods中。同时在模板中将{{totalMarks}} 替换成{{totalMarks()}}。你最终看到的结果...
代码星球·2020-04-06

富文本框vue-quill-editor的使用

vue-quill官网:https://www.npmjs.com/package/vue-quill-editorquill官网:https://quilljs.com/docs/quickstart/基本用法这里就不介绍了,这里介绍下特殊用法:怎么添加自定义blots和自定义toolbar控件<templat...
代码星球·2020-04-06

vue的一些小坑

1.$refs使用时机尝试在watch的时候使用$refs,发现里面都是空的,然后google了一下,$refs需要在整个组件挂载完成后才能使用解决方法:使用setTimeoutsetTImeout(()=>{this.$refs['xxxx']},0) ...
代码星球·2020-04-06

Vue less使用scope时渗入修改子组件样式

@aaa:~'>>>';.wrap{@{aaa}.component1{width:120px;}  /deep/.component2{width:130px;  }} ...

自己写的一个Vue

下面这里是我自己写的一个小型的vue,原理就是proxy://Proxy天生没有prototype,因此要加上,不然extends会报错Proxy.prototype=Proxy.prototype||Object.prototypeclassmyVueextendsProxy{constructor(options)...
代码星球·2020-04-06

vuex的使用

vuex其实可以看成一个公共的数据仓库,从作用来说大致上可以看成是我们的cookie或者localStorage,下面我们来看看怎么使用吧1.安装vuex不是vue内置的所以需要额外安装npmivuex--save2.设置仓库在src下面新建一个文件夹,这里我新建一个store/index.js,内容大致为:impor...
代码星球·2020-04-06

vue-cli内部webpack的打包优化

在此之前,我们先谈谈前端项目的性能优化。优化前端项目无非就是2方面的优化:一、网络性能优化(重点)减少请求数量(webpack的天职就是打包)减少请求资源大小(压缩gzip,后端会完成)CDN加速、负载均衡(运维负责)二、运行性能优化减少DOM操作减少图片数量显而易见的,我们前端除了一些游戏、WEBGL项目、有大量DO...

vue父组件调用子组件资源

通过上篇博文提到的方法我们可以触发子组件的某个事件来实现调用子组件的某些资源(例如数据和方法),但是更多的情况下我们会想不通过触发子组件的事件,而直接调用子组件的资源这个时候我们就需要用到ref了,使用也不难<template><div><myChildref="child1">&l...
代码星球·2020-04-06