背景：前端项目做了解耦后，在主项目（浏览器访问的页面）某个菜单下通过iframe加载子项目的页面，在子项目页面下点击某个链接并携带查询参数，通过window.top.PostMessage()函数向外（主项目）传递路由信息，使路由信息能够在外层项目（浏览器地址栏）能够同步展示内层页面的地址信息。问题描述：当内层项目向外传递路由信息，携带多个查询参数（如?a=1&b=2）时，如何拼接该参数呢？ant design vue项目通过路由访问对应菜单可以这...
1、什么VuePress 一个 VuePress 网站是一个由 Vue、Vue Router 和 webpack 驱动的单页应用 2、快速上手VuePress// 安装yarn： https://classic.yarnpkg.com/zh-Hans/docs/install#windows-stable # 将 VuePress 作为一个本地依赖安装 yarn add -D vuepress # 或者：npm install -D vuepress// 1、创建文件夹，并进入 mkdir vuepress-starter && cd vuepress-starter // 2、初始化项目yarn create vuepress // 3、启动项目 yar...
网上有些贴子少了至关重要的一步导致我一直没装上， 切记！！install后还需build，且install和build都在vue-devtools文件夹内执行github下载地址 点击跳转 具体步骤：第一步：找到vue-devtools的github项目，并将其clone到本地 vue-devtoolsgit clone https://github.com/vuejs/vue-devtools.git 第二步：安装项目所需要的npm包（进入vue-devtools编译项目文件目录，很重要！！）建议使用npm淘宝镜像按照依赖包。地址：http://np...
深入理解vue的watchvue中的wactch可以监听到data的变化，执行定义的回调，在某些场景是很有用的，本文将深入源码揭开watch额面纱前言watch的使用watch的多种使用方式传值函数传值数组传值字符串传值对象传值对象的其他作用源码分析watch初始watch创建WatcherwatchWatcher立即执行的watch与computed比较前言version: v2.5.17-beta.0阅读本文需读懂vue数据驱动部分watch的使用当改变data值，同时会引发副作用时，可以用watch。比如：...
报错截图如下 1.解决过程： 一开始只在vscode终端看到了最先面的报错信息，如下图： 看不出个所以然 网络搜索一番后，有如下类似问题的解决方案npm cache clean --force手动删除node-module文件夹npm inpm run dev 结果还是不行，着急之际，滚动了一下鼠标 看到了完整的报错信息 发现是端口号不对 把3000选中改成了3001 还是同样的报错 正无奈 发现原来是端口号跟 --hot之间少了一个空格。。。。。。。 鬼...
npm i element-ui -S npm i axios -S npm i qs -Simport Vue from 'vue' import App from './App.vue' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import Axios from 'axios' import Qs from 'qs'Vue.config.productionTip = false Vue.prototype.$axios = Axios Vue.prototype.$qs = QsVue.use(ElementUI)new Vue({router,render: h => h(App) }).$mount(...
1、安装样式库iview（示例安装） 运行命令：npm install --save iview（卸载为uninstall），--save因生产环境需要， 在main.js文件中加入配置import Iview from ‘iview‘import ‘iview/dist/styles/iview.css‘Vue.use(Iview) 2、安装babel-polyfill（一般必须安装） 原因：Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、 Reflect、Symbol、Promise等...
vue生命周期是什么？vue生命周期详解不言2018-10-26 10:01:16原创15772我们知道vue是一个构建数据驱动的 web 界面的渐进式框架，那么vue生命周期是什么呢？本篇文章就给大家来介绍一下vue生命周期的内容，希望可以帮助到有需要的朋友。 vue生命周期是什么？Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两...
1、Vue 选项卡<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>.box{width: 170px;height: 100px;background: #4998DF;}.top .active{background: red;}</style></head><body><div id="app"><div class="top"><button type="button" v-for="(item,index) in menu" :class=" index == activeIndex ? ‘active‘ : ‘‘" @click="handleClick(index)">{{item}}</button></div><div class="bottom"><div cla...
Vue组件化开发（二）Vue之传递数据父组件把数据传递给子组件可以通过props属性，来将父组件的数据传递给子组件，传递数据的三个步骤：step 1:在父组件中调用子组件，在组名处，使用给标签属性赋值的方式往下传递数据<template><div id="father"><son :mynum="father_num" title="我是father组件的num"></son></div> </template># 上面表示父组件father在调用子组件son子组件的时候，一共传递了两个参数 如果传递的数据是一个变量，...
日考 1、http与https http vs tcp：应用层，传输层，http协议是传输层采用的tcp的应用层 http特点：无状态，无连接，（基于请求响应）先客户端发出请求，服务器端一定做出响应 https：在http协议之上增加ssl安全认证2、前端布局 流式布局 响应式布局 盒模型布局 浮动布局 定位布局课程安排 Vue：基础：指令、实例成员、组件(组件间传参)项目：基于组件开发、插件（vue-router、vuex、axios、vue-cookies、jq+bs、element-ui）DRF：...
十.组件1.组件中的data为函数2.props: 父组件向子组件传递数据子组件:Child.vue<template> <span>{{ myMsg }}</span> </template><script> export default {props: [‘myMsg‘],data () {return { }} } </script> 父组件:<template><div id="app"><child :my-msg="msg"></child></div> </template><script> import Child from ‘@/components/Child‘ export default {name: ‘app‘,components: {Child},data () {return {msg: ‘...
阅读目录一、为什么组件很重要二、Vue里面的组件基础知识1、组件的概念2、组件原理3、组件使用三、封装自己的Component1、使用Component封装bootstrapTable2、封装select3、查看其他Vue框架源码四、总结 正文前言：转眼距离上篇 JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查） 已有好几个月了，今天打算将它捡起来，发现好久不用，Vue相关技术点都生疏不少。经过这几个月的时间，Vue的发展也是异常迅猛，不过这...
Vue中绑定元素class问题使用Vue编写的页面中有3个内容块需要根据传入数据显示不同样式，比如传入“低风险”则显示绿色背景，“高风险”则显示红色背景。前端组已经做好了样式的封装，通过给元素设置不同的class特性即可调整样式。解决过程通过查阅Vue官方文档，学习了怎样绑定class。 起初，在computed中写了一个计算属性用来获取元素需要的class值：<div :></div> computed:{myClass() {if(this.level===‘high‘){return ‘red-...
SPA里，1) Router改变router,不跳转页面方法：hash, url: http://....../#/Histroy Api: replaceState/popState2) vuexin viewstore.state...in Store:State/commit/dispatch/mutation 1) vue plugins2) render(h) //vue组件是响应式的，所以data发生改变， render会被调用， 通过H函数实现重新渲染。3） vue.util, 。。生成响应式数据new vue({.data..}) ..借鸡生蛋，生成响应式数据4） es6 class语法原文：https://www.cnblogs....