参考资料：1. vue 自定义指令；2. vue 自定义指令实现 v-loading； v-loading，是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令，项目中也很少需要自己去写自定以指令。碰巧这段时间自己练习了编写组件，完成看看能不能实现一个自定义的这样一个指令。话不多说，上代码：<div class="table" v-loadAnimation="loading">... </div><script> export default {data() {return {...}},directives: {loadAnimation: ...
自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。在vue中，除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令下面定义了一个v-test指令绑定数据name：<template><div class="hello"><div v-test=‘na...
三个技能，父组件 —> 子组件传值（props）、子组件 —> 父组件传值（$emit）、以及插槽（slot）；对于一个独立的组件来说，props是用来为组件内部注入核心的内容；$emit用来使这个独立的组件通过一些逻辑来融入其他组件中。举个具体点的例子，假如你要做一辆车，车轮是要封装的一个独立组件，props指的就是根据整个车的外形你可以给轮子设置一些你想要的且符合车风格的花纹，图案等；而$emit的作用则是让这些轮子能够和整辆车完美...
el-table中可以在一行的某列进行筛选，代码如下： <el-table-column prop="classOfTest" class="test" label="测试类名" :filters="classList" filter-placement="bottom-start" width="300" column-key="testOfClass"></el-table-column>其中 filters 就是筛选列表，格式为 classList = [{text: ‘Test_配电箱自动识别‘, value: ‘Test_配电箱自动识别‘},{text: ‘Test_门自动识别‘, value: ‘Test_门自动识别‘},……]filter-...
一：工程安装less、less-loader配置版本如下： "devDependencies": {"less": "^3.0.4","less-loader": "^5.0.0",/**其它配置*/ } 二：在main.js中引入vant的less文件import ‘vant/lib/index.less‘三：创建自定义主题变量文件less如下比如，resetui.less:@blue: #2897ff;四：修改配置文件中的utils.js代码原代码：return {css: generateLoaders(),postcss: generateLoaders(),less: generateLoaders(‘less‘),sass: generateL...
vue中指令分为全局指令和局部指令先来看全局自定义指令：第一个参数是指令的名字，第二个参数可以是函数也可以是对象，先来看函数：函数中接收三个参数：el在这里是input元素bindings里是一些绑定信息：其中expression是指绑定的变量名字，这里是contentname是指令名字value是绑定数据的值，上面content为空，所以目前value为空 v-slice上还可以写修饰符还可以传参：vnode虚拟节点：vnode中contex是vue实例，其中的content是vue中的...
在vue项目中，我们可以自定义组件，像element-ui一样使用Vue.use（）方法来使用，具体实现方法：1.首先新建一个Cmponent.vue文件// Cmponent.vue<template> <div> 我是组件 </div></template><script> export default { }</script><style scoped> div{ font-size:40px; color:#fbb; text-align:center; }</style>2.其次在同一目录下建立index.js文件,在这个文件中使用install方法来...
通常我们在vue里面使用别人开发的组件，第一步就是install,第二步在main.js里面引入，第三步Vue.use这个组件。今天我简单的也来use一个自己的组件。这里我用的webpack-simple这个简单版本的脚手架为例，安装就不啰嗦了，直接进入正题首先看下目前的项目结构：webpack首先会加载main.js，所以我们在main的js里面引入。我以element ui来做对比说明import Vue from ‘vue‘ import App from ‘./App.vue‘// 引入element-ui组件 impor...
1.自定义 生成二维码组件QRCode.vue<!-- 生成二维码 组件 --> <template><canvasclass="qrcode-canvas":class="{show: show}":style="{height: size + ‘px‘, width: size + ‘px‘}":height="size":width="size"ref="qr"></canvas> </template><script>import qr from ‘qr.js‘export default {name: ‘qrcode‘,props: {val: {type: String,required: true},size: {type: Number,default: 200},// ‘L‘, ‘M‘, ‘Q‘, ‘H‘l...
今天做项目遇到个问题 请求的图片需要加个请求头参数才行百度一番 找到一个有点用的参考地址 https://blog.csdn.net/qq_41499782/article/details/113584518跟我想的差不多 大概意思就是把图片地址用axios加上请求头请求一次下面是参考博主所记录在做项目的时候，展示图片可能会用到nginx 的代理来进行展示，然而有些运维小哥哥喜欢展示技术，在展示图片的时候还需要前提传一个请求头，也就是账号和密码。在postman展示的情况如...
Vue,品牌列表案例（仅添加,删除，搜索，全局过滤器，私有过滤器，日期填充，自定义按键修饰符，全局自定义指令文本框获取焦点，bind函数拿到传递的颜色值，自定义私有指令和指令函数的简写） p34 p35 1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title></title> 6<script src="../js/vue.js"></script> 7<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/> 8</head> 9<body> 10<di...
。。。啥也不说了，难受啊toggle-switch.vue<template><label role="checkbox" :class="[‘switch‘, { toggled }]"><input type="checkbox"class="switch-input"@change="toggle"/><div class="switch-core":style="{backgroundColor: toggled ? colorChecked : colorUnchecked}"><div class="switch-button":style="{transition: `transform ${speed}ms`,transform: toggled ? null: `translate3d(32px, 0px, 0px)`}"></div></d...
Vue.component(‘currency-input‘, {template: ‘ <div> <label v-if="label">{{ label }}</label> $ <input ref="input" v-bind:value="value" v-on:input="updateValue($event.target.value)" v-on:focus="selectAll" v-on:blur="formatValue" > </div> ‘,props: {value: {type: Number,default: 0},label: {type: String,default: ‘‘}},mounted: function (...
<div v-laohan="font">元素</div>需要在构造器外执行Vue.directive(‘my‘,function(el,binding,vnode){console.log(el) //<div>元素</div>console.log(binding) //objectconsole.log(binding.name) //laohanconsole.log(binding.expression) //fontconsole.log(binding.value) //red el.style="color:"+binding.value }) data:{font:‘red‘} 自定义指令有五个生命周期（也叫钩子函数）bind inserted update componentUpdated ...
分为三个部分:1.template模版：123456<script type="text/x-template" > <form v-on:submit.prevent="addtodo(newtodo)"> <input type="text" v-model="newtodo.title"> <button type="submit">提交</button> </form></script>2.vue.js的js操作:12345678910111213141516Vue.component(‘todo-form‘,{ template:‘#todo-form-template‘, props:[‘todos‘], data(){ return { new...