父子组件通信父 通过$ref属性给 子传递数据子 操作 父 this.$parent.XXX或者通过vue-busvue-bus既可以实现父子组件之间的通信，也可以实现兄弟组件之间的通信vue-bus安装(c)npm install vue-bus引入import Vue from ‘vue‘; import VueBus from ‘vue-bus‘;Vue.use(VueBus);应用：发送：this.$bus.$emit(‘closeMenu‘, {}); 接收： this.$bus.on("closeMenu", () => {this.isOpen = false; }); 参考链接：https://cn.vuejs.org...
今天主要复习一下我们最熟悉vue指令，想要代码撸得快，就要多看书，多看看官方的文档和学习指令，学习编程是一个非常享受的过程，尤其是你不断地去解决问题，获得一项技能，实现薪水的上涨。进行Vue的指令烹饪吧。v-text ：string 用法：更新元素的textContent,更新部分的textContent，需要使用{{Mustache}}插值v-html： string 用法：更新元素的innerHTML；注意：网站动态渲染任意HTML，容易导致XXS攻击v-show：any 用法：根据表...
//html:<div id="app"> <p>{{msg}}<p></div>//script 需要引入jar包vue-2.4.0.js <script> var vm = new Vue({ el:‘app‘ data:{msg:‘hello，vue‘ } })</sctipt>说明：p标签中的两个大括号 叫做 插值表达式，顾名思义就是 插入值用的vue对象中的el 就是为了表示 new的这个vue对象是用来控制页面上的那个区域。data中存放的是el中要使用到的数据。另外说一点 页面中需要用到的数据都需要在data中声...
步骤：创建一个空Vue实例，也就是一个 bus （ 事件总线 ）一个组件注册事件（ bus.$on(事件名称, () => {}) ）另一个组件触发事件（ bus.$emit(事件名称, 数据) ）注意：一定要是同一个 bus！！！ <div id="app"><jack></jack><rose></rose></div><script src="./vue.js"></script><script>// 创建一个busconst bus = new Vue()Vue.component('jack', {template: `<div>我是jack，我要对 rose 说：<button @click="fn">告诉rose：...
一、子父组件1、子组件获得父组件中的值：通过v-bind方式绑定在子组件中// 子组件中定义propsprops: [‘msg‘]// 父组件中： <deleteBar :msg=‘this.xx‘ :name=‘this.yy‘></deleteBar> //在以html元素方式插入子组件的位置，用:msg的方式绑定已经在子组件中定义的参数，=‘this.xx‘引用父组件中的值2、子组件中调用父组件中的方法1> 绑定在子组件定义的元素位置，在子组件中用emit方法触发，与传递值的方法相似// 子组件： //...
在用npm run build 打包的时候，正常img标签中的src图片路径和css中的图片路径是可以正常识别的，但是在打包js获取的图片路径时，打包后无法找到图片，原因是js动态生成的路径无法被url-loader解析到，如果你去build，会发现图片甚至不会打包输出到dist目录（webpack是按需打包的）。如果你是vue-cli初始化的项目，解决的办法：第一步，把图片放到src同级的static目录（build/build.js文件中有一段代码是把static目录拷贝到dist/st...
在开发项目的过程中，有时修改后台的数据变化可能不会及时更新到页面上，此时就需要我们刷新页面更新数据，但是直接调用刷新window.location.reload()可能对操作的体验不是很好，所以就需要下面的方法。列举个场景，比如修改主体content内容，我想要刷新主体部分的组件，但是不刷新title和aside组件，怎么实现呢？实现方法就是在想要刷新的组件中封装一个方法，当需要刷新页面时直接调用这个方法就可以无痕迹刷新这个组件（页面）！...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>hello world</title></head><body> <div id="app"> <div> <!-- 4、<router-link>默认会被渲染成一个 `<a>` 标签 ,to指令跳转到指定路径 --> <router-link to="/home">Go to Home</router-link> <router-link to="/about">Go to About</router-link> </div> <!-- 5、在页面上使用<router-vie...
朝颜陌 vue基础----组件通信（props,$emit,$attrs,$listeners）一、父传子，子传孙 1. props 1>在父组件中通过子组件自定义的标签属性来传递数据。 2>在子组件中通过props声明希望用到的数据 1 <body>2 <div id="app">3 <my-father :msg1="msg" a="10" :b="20" @click1="fn"></my-father>4 </div>5 <script src="./node_modules/vue/dist/vue.js"></script>6 <script>7 let vm =...
最近用Spring Boot和Vue Element实现了一个微型项目，该项目自构思到第一个版本的实现用了1个月的时间。当然大部分都是下班后，加班到11点做的；但是从功能实现到细节优化用了3个月的时间。“做”是一回事，“做好”是另外一回事。当然花了3倍的工作量，也不见得就做的很到位。闲话少叙，言归正传。本文介绍我用SpringBoot和Vue实现的文件上传功能。1. 实话说，做一个文件上传并不难。方法无外乎利用自己以前写的代码，或者用搜索引...
mpvue... 坑怎么说呢，去github看一下，发现还是有很多问题没有解决。。。不支持filter亲，到现在还没有支持filter哦。只能用替代方法了，用computed或者渲染前先处理数据。无奈...组件只能有一个slot这个还是有影响的，只能限制一下组件了。无奈...原文：https://www.cnblogs.com/blogs-xlf/p/11137364.html
首先先安装 node.js ，没安装的朋友请自行百度，或查看（https://www.runoob.com/nodejs/nodejs-install-setup.html） 安装教程。安装成功后，打开命令行，输入 node -v 检查版本，如果出现如下图，则表示安装成功。 接下来就是用 npm包管理器 创建项目了。npm 是随同 NodeJS 一起安装的包管理工具，命令行输入 npm -v 来检查npm版本，如下图 有些 npm 国外资源会被屏蔽，所以经常导致安装失败，所以建议大家安装国内镜像 cnpm。在...
1、v-if与v-show的区别v-if是一个惰性元素，只有满足条件，才会渲染，所以在项目中用v-if，在页面初始化的性能上占有优势，但如果页面加载完成后，需要频繁控制页面的显示隐藏时，v-if就会不断卸载、渲染组件造成较大的切换开销。v-show就是不管满不满足条件，都会进行渲染（与v-if相反，初始渲染成本大），渲染成功后通过display属性控制显隐，由于组件是通过css控制显隐，而不是卸载、重新渲染，所以v-show的切换成本小，但渲染成...
一，需求背景 在.NetCore新版项目中，针对电子文件在线浏览的实现方案做出了调整，由于需要支持跨平台，因此摒弃掉原来使用的第三方控件的方式。目前对于PDF文件的在线浏览采用的开源JS框架PDF.JS。它功能还是比较强大的，支持常用的PDF预览效果，文件下载和打印等等功能。 但如果PDF文件较大或者页数过多时，会发现PDF.JS需要等待很长时间才能将整个文件加载出来，这样用户的使用体验是不佳的，因为较长时间迷茫的等待，并且...
前言：前段时间学习了下vue，也算是能简单开发了，今天就记录下怎么通过vue-cli来安装vue。因vue是基于node环境的，如果你还不会安装的话，可以看下我的这个教程：安装node.js和npm教程以下内容是假设你已有了nodejs环境 1、安装vue-cli3的包 npm install -g @vue/cli # OR yarn global add @vue/cli检查版本如下图 2、创建一个vue的项目vue create hello-world你会被提示选取是按默认方式安装还是手动安装。你可以选第一个默认...