will5451的博客

在 Vue.js 中，动态组件可以根据不同的数据或状态加载不同的组件。具体来说，你可以使用 is 特性来指定要渲染的组件，该组件的名称通常是一个绑定的变量，根据需要可以在运行时进行更改。在上述代码中，IconResult403 是SVG图标的组件名，你可以在模板中像其他组件一样使用它。并不是一个特定的 HTML 元素，它更可能是一个占位符，代表一个在 Vue.js 中的动态组件。，该组件的名称通常是一个绑定的变量，根据需要可以在运行时进行更改。，代表一个在 Vue.js 中的动态组件。

在非roles: [‘all’]的情况下会进行路由过滤filterPermissionsRouters，这个时候退出到登录页会报错Route paths should start with a “/”: “detail” should be “/detail”。还有个问题是官方封装的axios，拼接的url，如果在响应拦截器阶段再发一次请求，会再拼接一次url。不太懂官方写的重发是怎么让拼接的ulr在请求拦截时变回正确的url，我选择用axios自带baseURL配置来替换官方的url拼接功能。

前言兄弟组件（非父子组件之间传值）需要建立一个中间实例，作为数据传输的承载媒介。然后兄弟A组件通过**this.$emit("组件名称或则别名",数据)**进行数据广播。然后兄弟B组件通过this.$on("组件别名",function(data){ console.log(data)进行数据处理 }) 来监听兄弟A组件的数据广播。就这样实现了兄弟组件之间的传值。举例说明兄弟组件Home.vue News.vue新建中间空实例文件 VueEvent.jsVueEvent.jsimp

Vue.use原理使用关于Vue.use()详解Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时，就不需要用 Vue.use(axios)，就能直接使用。举例理解关于Vue.use()详解Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时，就不需要用 Vue.use(axios)，就能直接使用。那这是为什么呐？答案因为 axios 没有 install。在Loading.vue中定义一个组件<template

组件引用<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />父组件需要提供一个监听事件 @pagination ，它的函数定义接收一个 JSON 对象，由 pagination 组件触发，对父组件列表数据的刷新。原理：父组件传递的 page 和 limit 用 sync 修饰，

详情:使用以下代码为data赋值，出现界面不刷新时，无法对文本框进行编辑，输入框只保留操作的最后一步this.ruleForm.roleName = this.$store.state.roleSetting.roleinfo.roleinstancename;this.ruleForm.content=this.$store.state.roleSetting.roleinfo.roleinstacedescription;原因：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的

什么是Service WorkerService Worker是运行在浏览器背后的独立线程，一般可以用来实现缓存功能，使用service worker的话，传输协议必须使用https.使用service worker实现缓存一般分三个步骤：1，首先要注册service2，监听install，拿到需要缓存的文件3，下次用户访问的时候可以通过拦截请求方式查询是否存在缓存，存在缓存的话就可以直接读取文件，否则请求。浏览器中的缓存机制缓存可以是性能优化中简单高效的一种方式对于一个数据请求，分为三个阶

构造函数创建对象：function Person(){ }var person=new Person();person.name='jock';console.log(person.name);Person就是一个构造函数，我们使用new 创建一个实例对象Personprototype每个函数都有一个prototype每一个js对象在创建的时候就会与之关联另外一个对象，这个对象就是我们所说的原型。每一个对象都会从原型 继承 属性。function Person(){ }//pr

在组件化的框架中，比如Angular、React或Vue，都为组件定义了生命周期这个概念，每个组件实例在被创建时都要经过一系列的初始化过程，例如：需要设置数据监听，编译模板，将实例挂载到DOM并在数据变化时更新DOM等。 同时，这个过程也会运行一些叫做生命周期钩子函数。钩子函数提供给用户在组件不同阶段添加自己的代码的机会。 vue2.x中生命周期钩子函数created，mounted，destoryed等等。 而在Vue3.x中, vue2.x Option APi形式的生命周期钩子函数和新的Compos

今天碰到了这个问题，两个毫无关联的组件之间需要通信，怎么办！使用 props 一层一层的传肯定是有问题的，当然可以实现，在一个就是Vuex，定义一个公共变量也是可以的，但是相对来说比较好的实现方式就是 eventBus 了吧。使用一、使用 eventBus 首先我们创建一个 bus.js 文件，里面的内容如下：import Vue from 'vue'; export default new Vue(); 二、在需要使用 eventBus 的组件中引入上面创建的 bus.js 文件。impo

Vue3.0目前已经出了beta版本,并在github上进行了开源，叫做vue-next，本文将之前采用Vue2.6开发的todoList小项目改造成为Vue3.0编写，并介绍一下2.x和3.x之间写法的不同之处。Vue3.x适配大部分Vue2.x的组件配置，也就是说以前我们在Vue2.x针对组件的一些配置项，例如：export default { name: 'test', components: {}, props: {}, data () { return {} },

如果需要设置全局变量，在main.js中，Vue实例化代码里增加。不想污染全局作用域，这种情况下，可以通过在原型上定义它们使其在每个Vue的实例中可用。//import my_app from 'MyApp';Vue.prototype.$appName= 'my_app'; //进行全局注册这样$appName 可以在所有Vue的实例中使用。 甚至在实例被创建前就可以被使用。测试实例创建前被使用：new Vue({ beforeCreate:function(){ console.l

$是在vue中所有实例中都可用的一个简单约定，这样做会避免和已被定义的数据，方法，计算属性产生冲突。另一个好问题！如果你写成：Vue.prototype.appName = 'My App';那么你希望下面的代码输出什么呢？new Vue({ data: { // 啊哦，`appName` *也*是一个我们定义的实例属性名！ appName: 'The name of some other app' }, beforeCreate: function () { c

一、 使用Webpack+Babel打包Vue项目步骤:1、 安装babel相关的包npm install babel-core babel-loader babel-preset-env –save-dev2、 在项目根目录下创建一个babel的配置文件.babelrc3、 在.babelrc中配置写好对应的json代码片段4、 在webpack.config.js中使用babel-loader5、 在webpack.config.js的插件配置中写上如下代码即可6、在当前项目

是什么：vue框架中状态管理:有五种，分别是 State、 Getter、Mutation 、Action、 Module使用：新建一个目录store，场景：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车vuex的State特性A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的dataB、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新C、它通过

实现路由懒加载vue-router 的导航钩子,主要用来作用是拦截导航,让他完成跳转或取消全局：前置守卫，后置钩子（beforeEach，afterEach）beforeResolve单个路由独享的:beforeEnter组件级的: beforeRouteEnter（不能获取组件实例 this）、beforeRouteUpdate、beforeRouteLeave这是因为在执行路由钩子函数beforRouteEnter时候，组件还没有被创建出来；先执行beforRouteEnter，再执行组件

props：export default {props: {message: String //定义传值的类型<br>},//或者props:["message"]data: {}父组件调用子组件的方法：父组件 this.$refs.yeluosen.childMethod()子组件向父组件传值并调用方法 $emit组件之间：bus==$emit+$on...

缺点不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件，比如使用php）第一次加载首页耗时相对长一些不可以使用浏览器的导航按钮自行实现前进，后退优点无刷新体验，提升用户体验；前端开发不再以页面为单位，更多采用组件化的思想，代码结构和组织方式更加规范，便于修改和调整；API共享，同一套后端程序代码不用修改可以用于web，手机平板等客户端体验。vue-cli提供的几种脚手架模板vue-cli 的脚手架项目模板有browserify 和

webpack的作用①、依赖管理：方便引用第三方模块、让模块更容易复用，避免全局注入导致的冲突、避免重复加载或者加载不需要的模块。会一层一层的读取依赖的模块，添加不同的入口；同时，不会重复打包依赖的模块。②、合并代码：把各个分散的模块集中打包成大文件，减少HTTP的请求链接数，配合UglifyJS（压缩代码）可以减少、优化代码的体积。③、各路插件：统一处理引入的插件，babel编译ES6文件，TypeScript,eslint 可以检查编译期的错误。一句话总结：webpack 的作用就是处理依赖，模

生命周期钩子函数beforecreated：在实例初始化之后，el 和 data 并未初始化（这个时期，this变量还不能使用，在data下的数据，和methods下的方法，watcher中的事件都不能获得到；）created:完成了 data 数据的初始化，el没有（这个时候可以操作vue实例中的数据和各种方法，但是还不能对"dom"节点进行操作；）beforeMount：完成了 el 和 data 初始化 //这里的el是虚拟的dom；**mounted **：完成挂载，在这发起后端请求，拿回数

①创建组件页面eg Toast.vue；②用Vue.extend()扩展一个组件构造器,再通过实例化组件构造器,就可创造出可复用的组件③将toast组件挂载到新创建的div上；④把toast组件的dom添加到body里；⑤修改优化达到动态控制页面显示文字跟显示时间；import Vue from 'vue'; import Toast from '@/components/Toast'; //引入组件let ToastConstructor = Vue.extend(Toast) /

方法一子组件中通过this.$parent.event来调用父组件的方法方法二子组件中用$emit向父组件触发一个事件，父组件监听这个事件就行了。方法三子组件调用父组件方法<template> <div> <button @click="childMethod()">点击</button> </div></template><script> export default { pro

什么是vue的生命周期？vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建，初始化数据，编译模板，挂载DOM -》渲染，更新-》渲染，卸载等一些列过程。这是Vue的生命周期。vue生命周期的作用是什么？它的生命周期中有多个事件钩子，让我们再控制整个vue实例过程时更容易形成好的逻辑。Vue生命周期总共有几个阶段？可以分为8个阶段；创建前/后 ，载入前/后 ， 更新前/后 ，销毁前/后第一次页面加载会触发那几个钩子？第一次页面加载时候会触发 beforeCreate , created

前言随着现代前端开发的复杂度和规模越来越庞大，已经不能抛开工程化来独立开发了，如react的jsx代码必须编译后才能在浏览器中使用；又如sass和less的代码浏览器也是不支持的。而如果摒弃了这些开发框架，那么开发的效率将大幅下降。在众多前端工程化工具中，webpack脱颖而出成为了当今最流行的前端构建工具。然而大多数的使用者都只是单纯的会使用，而并不知道其深层的原理。希望通过以下的面试题总结可以帮助大家温故知新、查缺补漏，知其然而又知其所以然。问题一览1，webpack与grunt、gulp的不

什么是对象everything is object （万物皆对象）(1) 对象是单个事物的抽象(2) 对象是一个容器，封装了属性（property）和方法（method）。属性是对象的状态，方法是对象的行为（完成某种任务）。比如，我们可以把动物抽象为animal对象，使用“属性”记录具体是那一种动物，使用“方法”表示动物的某种行为（奔跑、捕猎、休息等等）。在实际开发中，对象是一个抽象的概念，可以将其简单理解为：数据集或功能集。什么是面向对象面向对象不是新的东西，它只是过程式代码的一种高度封装，

vue(axios)封装，content-type由application/json转换为application/x-www-form-urlencoded前言现在主流的http请求头的content-type有三种（不讨论xml）：application/x-www-form-urlencoded 最常见的提交数据方式，与原生form表单数据一致，在chrome调试工具中的表现形式为formdatamultipart/form-data 上传文件时的content-type类型applica

文件: vuecli中 main.js文件标题业务: 需要在请求头加入登录时返回的token值http request 拦截器// http request 拦截器axios.interceptors.request.use(config => { //中定义全局默认配置 Token // if(store.getters.getLoginToken){ // axios.defaults.headers.common['Authorization'] = sessionSt

出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题主要原因是Vue 重复点击相同路由造成的：解决方案： 第一种：在 router 文件夹下里面的文件index.js里面找到如下位置： // src/router/index.js Vue.use(Router) const router =new Router({ ...

1,v-once通过指令我们可以对文本值进行一次性赋值操作，只进行第一次的数据渲染，如果再次改变值，文本值也不会改变应用场景 ： 一般是用在组件树中传递时，导致组件数据一层一层传递时，变改了不需要改变的场景，用v-once可以避免在组件数中只需用一次性赋值操作<template> <div> <p v-once>hello {{world}}</p> <button @click="world='ziksan

基本示例:创建一套 SVG 图标系统的方式有很多，但是有一种方法能够充分发挥 Vue 的能力，那就是把可编辑的内联图标创建为组件。这样做有好多好处：图标易于实时修改图标可以带动画你可以使用标准的 prop 和默认值来将图标保持在一个典型的尺寸并随时按需改变它们图标是内联的，所以不需要额外的 HTTP 请求可以动态地使得图标可访问首先，我们将为所有的图标创建一个文件夹，并将这些图标以一种标准化的方式命名以便获取它们components/icons/IconBox.vuecomponents

基本示例:<from id="app" @submit="checkForm" action="https://##" method="post"> <p v-if="errors.length"> <b>Please correct the following error(s):</b> <ul> <li v-for="error in errors"> {{error}} </li>

一、uni-app (app混合开发) uni-app是一个使用Vue.js开发跨平台个人文库应用的前端框架，开发者编写一套代码，可编译到的iOS，安卓，H5，小程序等多个 平台。 官网：uni-app二、vue-cli3+cordova (app混合开发) 网址：https://www.jianshu.com/p/543a1da430c2三、element-ui (后台管理系统) 网址：http://element....

vue制作weibo 交互vue-> 1.0 vue-resource ajax php 服务器环境(node) this.$http.get()/post()/jsonp() this.$http({ url:地址 data:给后台提交数据, method:'get'/post/jsonp jsonp:'cb' //cbName });---------------...

1，目前安装的vscode插件如下：挺好用

原文http://www.cnblogs.com/web1/p/9812669.html最近做了两个关于h5页面对接公众号的项目，不得不提打开微信浏览器内置地图导航的功能确实有点恶心。下次想起来了的话，进行总结分享一下如何处理。在vue移动端h5页面当中，其中适配是经常会遇到的问题，这块主要有两个方法可以适用。方法一：引入淘宝开源的可伸缩布局方案引入淘宝开源的可伸缩布局方案：http...

Ctrl + 鼠标左击跳到定义.返回：Windows:Alt+←;或者 鼠标侧键 Linux:Ctrl+Alt+-;貌似数字键盘的减号没效果 Mac:Ctrl+-左右括号之间跳转：ctrl+shift+\...

在做移动端商城或者其他页面的时候，经常会遇到左右联动的效果，今天小编vue2.0和better-scroll这个插件一起实现左右联动效果。实现上面的效果，思路一定很重要，还有需求1. 左边一级分类和右边二级分类形成联动2. 当滑动右侧分类列表时, 更新左侧分类选中3. 点击左侧一级分类项时, 右侧列表滑动到对应位置在vue脚手架的时候，引入第三方插件better-scrol...

1.在webpack.dev.conf.js文件开头的一堆const后添加:// 增加expressconst express = require(‘express’)const app = express()//加载本地数据文件var appData = require(’…/goods.json’) //获取json对象var goods = appData.goods //获...

环境操作系统：centos7 nodejs: v6.10.0 elasticsearch：5.2.2步骤首先已经安装好了elasticsearch。由于现在elasticsearch不建议使用plugins即插件的方式来安装。而是把其作为一个独立的应用程序。所以以前的插件安装方式在版本5里不建议使用啦。步骤一、根据官网： https://