longtengg1的博客

当在A页面中执行了操作后，在B页面中的某数据需要进行更改。

前端自适应解决方案

在组件创建时，不仅执行created钩子，同时也会执行beforeRouteEnter。那么，什么时候使用created，什么时候使用beforeRouteEnter？

1 场景：<img src="" alt="" />在vue项目中，使用img标签的src引入图片时，使用本地电脑图片的绝对路径（不能为相对路径），使用同源的网络图片，使用require(’./warning.png’)引入相对路径的图片var icon='./warning.png'那么如果让src中require一个变量，这个变量为图片路径的字符串，结果是报错不行的。<img :src="require(icon)" alt="" />2、解决怎么解

1、基本使用在子组件中使用标签定义插槽位置在父组件的子标签之间填写插槽内容son组件<template> <div> <p>床前明月光</p> <slot></slot> </div></template>father组件<template> <div> <son>

这个自定义指令有局限性，它的输入结果是一个字符串类型，而不是一个number类型。所以在使用之前必须先做强制类型转换。import Vue from 'vue'Vue.directive('number', { bind(el, binding, vnode) { let input_ele; let el_tagName = el.tagName.toUpperCase(); if (el_tagName === 'INPUT') { input_ele =

指令：即把一些功能单独拎出来。指令以v-开头，以区别标签的内置属性和自定义属性指令是用来操作DOM的指令有全局指令和局部指令，全局指令在main.js中定义，局部指令在组件内定义局部的自定义指令写在directives对象内，directives与methods平级。1、定义一个自定义指令使用Vue.directive方法来定义一个自定义指令，第一个参数是指令名称，第二个参数一个配置对象Vue.directive('highlight',{ bind(el,binding,vnode)

1、绑定字符串变量为class绑定一个字符串，color是一个字符串变量，例如color的值是’red’，那么表示div拥有red类。通过改变color变量的值，可以让div拥有不同的样式。 <div class="box" :class="color">2、对象形式为class绑定一个对象，对象中可含有多个键值对，键为类名，值为true或false。当isred的值为true时，当前元素就有red就这class。所以可以通过控制isred为true或false，从而影响div的

默认地，使用vue-router切换组件时，离开的组件会被销毁，新进入地组件会创建。那么，有时候，我们希望离开的组件不要被销毁。这时就需要使用到keep-alive标签来缓存组件。1、用keep-alive包裹router-view在router-view标签外包裹keep-alive使用v-if来判断一下，否则所有的组件都会销毁或者不销毁。判断的条件来自于路由定义时的meta字段 <keep-alive> <router-view v-if="$route.meta

1、事件修饰符stop 阻止事件继续传播prevent 阻止标签默认行为capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理self 只当在 event.target 是当前元素自身时触发处理函数once 事件将只会触发一次passive 告诉浏览器你不想阻止事件的默认行为键盘事件的修饰符.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right2、系统修饰键.ctr

v-if 在编译过程中会被转化成三元表达式,条件不满足时不渲染此节点。v-show 会被编译成指令，条件不满足时控制样式将对应节点隐藏 （display:none）

1、computed支持缓存，只有依赖数据发生改变，才会重新进行计算不支持异步，当computed内有异步操作时无效，无法监听数据的变化computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在compu

1、初次渲染过程模板字符串被解析成render函数，一般这一步在开发环境就已经完成了。触发响应式，监听data执行render函数，生成vnode，然后patch(ele,vnode)执行render函数的时候，回去获取data中的数据，就会执行data中数据的setter，就做了依赖收集。2、更新过程修改了data，此时就会触发数据的setter，通知依赖更新重新执行render函数，生成新的vnodepatch(vnode,newVnode)3、流程图4、异步

模板不是html，有指令、插值、js表达式，能实现判断、循环。html是标签语言，只有js才能实现判断、循环（图灵完备）因此，模板一定是转换为某种js代码，即模板编译。1、准备使用npm init -y 创建一个空项目npm install vue-template-compiler下载vue模板编译插件创建一个index.js文件，在里面引入上述插件写一个模板字符串，如const template=`<p class='box con' id='dd' style='color:

使用虚拟DOM地缘由：原生的DOM设计的非常复杂，DOM操作非常耗费性能，那就把计算更多地转为JS计算，因为JS执行速度很快。虚拟DOM就是用JS模拟DOM结构，计算出最小地变更后，再操作DOM。1、用JS模拟DOM结构<div id='a' class='b'><p>内容</p></div>将上述DOM结构用js来表示：{tag:'div',props:{className:'b',id:'a'}children:[{tag:'

重新定义数组原型创建新对象，原型指向oldArrPrototypeconst oldArrPrototype=Array.prototype;const ArrProto=Object.create(oldArrPrototype);['push','pop','shift','unshift'].forEach(methodName=>{ ArrProto[methodName]=function(){ updateView();//更新视图 .

vue 的MVVM示意图：View对应视图，即组件中的template部分；Model对应模型，即组件中的数据部分（data）；View和Model两种通过ViewModel来做关联，如监听事件，监听指令，修改Model中的数据，然后通过ViewModel去更新View中的视图，这即是“数据驱动视图”...

从功能上拆分层次尽量让组件原子化，一个组件中的东西不要太多，每个组件只完成不太多的功能容器组件，只管理数据，怎么显示不管UI组件，只管理视图，数据怎么来不管通用组件，应与业务相脱离，实现解耦通用组件要可定制化...

合理使用v-show和v-if合理使用computedv-for时加key，以及避免和v-if一起使用自定义事件、DOM事件及时销毁合理使用异步组件合理使用keep-alivedata层级不要太深

在一个组件myInput中<template> <div> <input type="text" :value="text" @input="$emit('change', $event.target.value)" /> </div></template><script>export default { model: { prop: "text",

<Son v-bind='$props'/>

v-model.number输入框只能输入数字，不能输入文本，但是这样小数点也不能输入v-model.lazy只会在回车后或者失去焦点后才修改绑定值v-model.trim去除输入值两边的空格

Vue是异步渲染data改变之后，DOM不会立刻渲染。只有当data都修改完成之后，才会渲染，所以无论修改了多少次data，只会渲染一次比如在一个操作中，数组被push多次，页面不会被渲染多次。$nextTick会在DOM渲染之后被触发，获取最新的DOM节点...

在vue的组件的mounted钩子中，为window添加事件的话，记得在销毁组件时要移除事件，否则该组件不在了，但事件会一直存在。

数据中有一个数据，其类型是一个对象，当改变其中的某个属性值时，watch是监听不到的，如果添加deep属性，那么就可以监听到了。给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大。immediate属性，是在最初绑定的时候就会执行一次。watch: { objData: { handler(newName, oldName) { console.log('obj.a changed'); }, immediate: true, deep: tru

axios的使用

1、路由的安装首先安装npm install i vue-router --save在main.js中引入。我们一般把router相关的内容写到一个单独的router文件夹中便于管理，然后再在main.js中引入这个文件。在new Vue时传入import router from './router'。。。new Vue({router ,。。。})router文件夹的index.js文件引入，并用Vue.use注册插件import Vue from 'vue'imp

1.$attrs场景:如果父传子有很多值,那么在子组件需要定义多个 props解决:$attrs获取子传父中未在 props 定义的值.相对应的如果子组件定义了 props,打印的值就是剔除定义的属性// 父组件<home title="这是标题" width="80" height="80" imgUrl="imgUrl"/>// 子组件mounted() { console.log(this.$attrs) //{title: "这是标题", width: "80", h

这对选项需要一起使用;以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。provide在祖先组件中使用，可以提供方法、数据inject在子孙组件中使用，接收祖先提供的方法、数据在祖先组件：provide: { //provide 是一个对象,提供一个属性或方法 foo: '这是 foo', fooMethod:()=>{ console.log('父组件 fooMethod 被调用') }},子或者孙子组件

const mixin={ created(){ this.dealTime() }, methods:{ dealTime(){ console.log('这是mixin的dealTime里面的方法'); } }}export default{ mixins:[mixin]}mixins 值是一个数组；mixins属性在组件内与data、methods这些平级；mixins 混入的属性只能是vue组件有的

双向绑定：更改数据，会更新页面显示；更改页面，会更新数据。双向绑定，分为 初始化绑定 和 双向更新 两个部分。初始化绑定，就是初始化时给表单元素绑定值，绑定事件，为双向更新做准备。双向更新，就是任意一边变化，同时能让另一个边更新。1、初始化绑定1、v-model 怎么给表单绑定数据2、v-model 绑定什么事件3、v-model 怎么绑定事件4、v-model 如何进行双向更新...

Vue 是怎么知道数据改变？（Object.defineProperty）Vue 在数据改变时，怎么知道通知哪些视图更新？（依赖收集）Vue 在数据改变时，视图怎么知道什么时候更新？（依赖更新）

⼀旦对象拥有了 getter 和 setter， 我们可以简单地把这个对象称为响应式对象。 那么 Vue.js 把哪些对象变成了响应式对象了呢。1、在 Vue 的初始化阶段， _init ⽅法执⾏的时候， 会执⾏ initState(vm) ⽅法1、初始化props调⽤ defineReactive ⽅法把每个 prop 对应的值变成响应式，defineReactive(props, key, value)通过 proxy把 vm._props.xxx 的访问代理到 vm.xxx 上 prox

封装一个选取文件的组件。我们需要的功能只是点击后选择文件，获取文件在本地电脑的绝对路径，然后我们用这个路径自己去上传。1、结构1、放一个el-input组件，用于显示选取的文件的路径字符串element的el-input组件只提供了关于输入文本的功能，没有提供选择文件的功能。设置readonly属性，使它只能用于显示，而不能输入；v-model绑定路径字符串2、第一个el-button组件，是嵌套在el-input的插槽，用于点击后触发选取文件为它绑定点击事件，添加native事件修饰符

所谓组件化， 就是把⻚⾯拆分成多个组件 (component)， 每个组件依赖的 CSS、 JavaScript、 模板、 图⽚等资源放在⼀起开发和维护。 组件是资源独⽴的， 组件在系统内部可复⽤， 组件和组件之间可以嵌套。...

  vuex可以进行全局的状态管理，但刷新后刷新后数据会消失。我们可以结合本地存储做到数据状态持久化，使用vuex-persistedstate插件，将vuex中需要持久化保存的数据保存到本地存储当中。安装npm install --save vuex-persistedstate引入在vuex的index.js中引入import createPersistedState from "vuex-persistedstate";使用将createPersistedState方法在

  在打开或切换到一个新的页面的时候，有时会发起一些请求去请求数据，然后渲染页面，这一个过程是需要耗费时间的，所以有的页面会设置一个loading效果，一种是在页面中央放一个不停地转圈圈。  除了这种方式，我们还可以在页面顶部显示一个进度条，表示loading效果。1、安装npm install --save nprogress2、引入在main.js中引入，得到一个全局的对象import NProgress from "nprogress"import 'nprogress/nprogre

elementUI中并没有提供树形表格插件，所以需要依赖于第三方的插件。我们使用vue-table-with-tree-grid。1、安装npm i vue-table-with-tree-grid -S2、可以用Vue.use注册在main.js中import ZkTable from 'vue-table-with-tree-grid'Vue.use(ZkTable)3、也可以用Vue.component注册为全局组件也是在main.js中import ZkTable from '

1、首先安装npm install vue-quill-editor --save2、可以注册为全局可用的组件import VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor, /* { default globa

ElementUI的上传组件设置header