在本身的项目中需要动态请求后端图片 一般需要在created中写因为beforeCreate的时候图片过不来的，如果想在这时候请求数据那么图片的地址我们就要存在一个地方。可以是本地也可以是vuex中 静态图片想要动态的添加或者改变我们需要改变图片的目录结构 把图片放在static中然后 imgUrl : [/static/clinical.png,/static/nursing.png,/static/function.png,/static/test.png,/static/drug.png,/static/admin.png] 绝对路径请求 以上这篇...
在vue中已经不像jq那样直接操作dom了，如果要指向当前选中项时，就不能再用jq的思路来做了，方法如下：当指向一个状态的时候，只让指向的状态隐藏，其他项不变，如果项目中用了element-ui，那么操作起来会比较简单一些，这样设置： v-if="(row.id == currentId&&row.auditState==0)?checkState:!checkState" @mouseover="statehidden(row.id)"js中： statehidden(id){this.currentId=id; },这种方法的思路是：鼠标指向某一项时，获...
前言 既然我们选择了vue，那么在做东西时就不要想着去操作dom，所有的都交给vue来解决。 下面来说一个很简单但是很常用的效果，可能人人都会用到这样的需求 请看下图导航栏的样式切换功能，如果我们使用jquery之类的东西来写，可能要写好多代码，那么我们用vue呢， 代码如下 html 附上vue中style与class绑定API <div id="wrap" class="box"><div v-for="(list,index) in navLists" class="nav" :class="{ red:changeRed == index}"...
HTML <input type="file" @change="tirggerFile($event)">JS(vue-methods) tirggerFile : function (event) {var file = event.target.files; // (利用console.log输出看结构就知道如何处理档案资料)// do something... }如果直接在绑定的函数中传入this，则不能正确获取，且不能获取到相关的inputfile对象 PS：下面简单介绍下vue中如何用input file绑定img标签中的src <img v-bind:src="lmodel"> <input v-model="lmodel" type="f...
前言 有时候我们在做开发的时候，就想自己写一个插件然后就可以使用自己的插件，那种成就感很强。今天就解决了一个长期困扰着我的问题，现在记录一下，供日后参考。 涉及知识点是Vue.js官网教程中的插件使用方法如下： 首先我遇到的问题就是我自定义的组件如果需要在项目中其他组件中多次被调用，而我之前的解决方法就是简单的，哪里需要在哪引用。这无疑增加了许多代码重复。 而在使用Vue.js的一些UI框架的时候则注意到，只需要在...
什么是懒加载 懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。 为什么需要懒加载 在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时 如何与webpack配合实现组件懒加载 1、在webpack配置文件中的output路径配置chunk...
这是一篇继event loop和MicroTask 后的vue.nextTick API实现的源码解析。 预热，写一个sleep函数 function sleep (ms) {return new Promise(resolve => setTimeout(resolve, ms) } async function oneTick (ms) {console.log(start)await sleep(ms)console.log(end) } oneTick(3000)解释下sleep函数async 函数进行await PromiseFn()时函数执行是暂停的，我们也知道现在这个PromiseFn是在microTask内执行。当microTask没执行完毕时，...
这里我想到了2个方法： 方法一： 直接给相应的元素加id,然后再document.getElementById("id");获取，然后设置相应属性或样式 方法二： 使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素 注意：在获取相应元素之前，必须在mount钩子进行挂载，否则获取到的值为空， 如果是给子组件加id并修改自定义属性，则直接会加载改子组件对应的外层div上，并不会改变该子组件原本的自定义属性的值 如果给子组件加ref,然后...
本文主要给大家介绍的是关于vue页面跳转拦截器的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍： 登录拦截逻辑 第一步：路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由， 否则就进入登录页面。在路由管理页面添加meta字段 import Vue from vue import Router from vue-routerVue.use(Router)const routes ...
本文介绍了Vue的MVVM实现方法，分享给大家，具体如下：1. Object.defineProperty() 定义属性 用意：给一个对象定义属性，那个属性原来是不存在的。这是一个初衷，属性是不存在的，需要额外添加。①、使用说明 Object.defineProperty(obj,props) 第一个参数是将被添加或者修改的属性的对象 第二个参数是一个对象，表示将要添加的一个或多个键值对一直要添加属性的具体配置 { ? 属性名:{value:...,writable:true}, ? 属性名:{value:....
业务场景:(这里指的是直接父子级关系的通信) 美女(子组件)将消息发送给大群(父组件)大群(父组件)收到美女发送的消息后再回个信息给美女(子组件)父组件 template <template><div><p>群消息girl：</p><div>{{ somebody }} 说: 我 {{ age }} 了。</div><hr><v-girl-group :girls="aGirls" :noticeGirl="noticeGirl"@introduce="introduceSelf"></v-girl-group></div> </template>注意的点： 这里在父组件使用v-on来监听子组件上的自定...
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢？可以通过props属性来实现父组件：<parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] };}子组件通过props来接收数据:方式1：props: [childMsg]方式2 :props: { childMsg: Array //这样可以指定传入的类型，如果类型不对，会警告} props: { childMsg: { type: Array, default: [0,0,0] //这样可以指定默认的值...
自定义事件也可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。 所以要让组件的 v-model 生效，它必须：接受一个 value 属性在有新的 value 时触发 input 事件代码如下：HTML：<div id="app"><p>{{ message }}</p><currency-input label="Price" v-model="price"></currency-input><currency-input label="Shipping" v-model="shipping"></currency-input><currency-input label="Handling" v-model="handling...
V-MODEL 是VUE 的一个指令，在input 控件上使用时，可以实现双向绑定。 通过看文档，发现他不过是一个语法糖。 实际是通过下面的代码来实现的： <%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="vue/vue.js"></script> </head> <body><div id="app-6"><input ...