熟悉 Vue 的都知道 方法methods、计算属性computed、观察者watcher 在 Vue 中有着非常重要的作用，有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的，但是它们之间又存在一些不同之处，每一个都有一些适合自己的场景，我们要想知道合适的场景，肯定先对它们有一个清楚的了解，先看一个小例子。 <div id="app"><input v-model="firstName" type="text"><input v-model="secondName" type="text"><p>{{fullName}}</p...
搜索很久，没有发现有关于vue+VeeValidate部分校验的。自己写一个。 主要是两个场景： 1. 校验范围内，所有的字段。 2. 校验全局所有字段。 主要方法： 1.validate(fields, scope) 2. validateAll(fields) 场景： 遍历得到多个列表，每一个列表都可以独立保存当前列表。在保存当前列表的时候，需要校验当前列表输入框的合法性。 代码： <div class=" col-xs-12 col-md-6 col-lg-4" v-for="(p1,index) in carList" :key="index...
1,先给vue项目中下载vue-quill-editor依赖npm install vue-quill-editor --save 2,下载plupload依赖npm install plupload --save 3,在组件中分别引入对应的js import { quillEditor }from vue-quill-editor import @/assets/js/crypto1/crypto/crypto.js import @/assets/js/crypto1/hmac/hmac.js import @/assets/js/crypto1/sha1/sha1.js import Base64from @/assets/js/base64.js import pluploadfrom plupload4,编写plupload上...
因业务需求，需要一个树形表格，并且支持拖拽排序，任意未知插入，github搜了下，真不到合适的，大部分树形表格都没有拖拽功能，所以决定自己实现一个。这里分享一下实现过程，项目源代码请看github，插件已打包封装好，发布到npm上 本博文会分为两部分，第一部分为使用方式，第二部分为实现方式安装方式 npm i drag-tree-table --save-dev 使用方式 import dragTreeTable from 'drag-tree-table' 模版写法 <dragTreeTable :d...
在vue组件通信中其中最常见通信方式就是父子组件之中的通信，而父子组件的设定方式在不同情况下又各有不同。最常见的就是父组件为控制组件子组件为视图组件。父组件传递数据给子组件使用，遇到业务逻辑操作时子组件触发父组件的自定义事件。无论哪种组织方式父子组件的通信方式都是大同小异。 一、父组件到子组件通讯父组件到子组件的通讯主要为：子组件接受使用父组件的数据，这里的数据包括属性和方法（String,Number,Boolean,Ob...
什么是计算属性 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如： <div id="example">{{ message.split().reverse().join() }} </div>这里的表达式包含3个操作，并不是很清晰，所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理。计算属性（computed）用于处理复杂逻辑 computed：{ }computed做为vue的选项是固定的 例子： <div id="itany"><p>{...
前记： 排版记录，点耽误时间，我就简单的来，下面是一个vue 过滤器的写法，demo 演示，限制一个字符串的长度。 vue filter 的官网介绍 https://cn.vuejs.org/v2/guide/filters.html下面就具体拿自己的一个例子介绍： 某个filter.js // 限制汉字的个数 export const limitWordLength = Vue.filter(limitWordLength, (str, length, sufix) => {/* eslint-disable */let r = /[^\x00-\xff]/g // 双字节正则let mif (str.replace(r, *...
我们常用的有get方法以及post方法，下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入的方法，哪个页面需要请求数据就在哪个页面里引入一下。 import axios from 'axios' 引入之后我们就可以进行数据请求了，在methods中创建一个方法methods：{getInfo（）{let url = "url"axios.get(url).then((res)=>{console.log(res)}) } }然后我们在mounted这个生...
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 上篇文章给大家介绍了vue中如何使用ztree，大家可以点击查看。 之前博客介绍过怎么在vue里展示以及获取点击元素的内容，此文章之介绍搜索功能 html <el-form-item label="机构" class="ztree-par"> <i class="icon_org"></i> <input type="text" placeholder="请输入机构" id="ser" v-model="ruleForm.mechanism" @k...
团队开发的项目，如果没有对代码风格作要求，有多少团队成员，就当然会出现多少种不同的代码风格。因此，我们需要一种能够统一团队代码风格的工具，作为强制性的规范，统一整个项目的代码风格。 幸好，我们有 eslint 和 prettier 。 eslint VS prettier 应该大多数项目都已经采用eslint来对代码进行质量检查，可能少部分还会采用其进行一定程度上的统一风格。那为什么还需要prettier呢？我们先来对它们作一个简单的了解。 各种lint...
下面通过一段代码给大家介绍vue watch的普通监听和深度监听，具体代码如下所示： var vm=new Vue({ data:{ num:1, obj:{ name:三儿, age:21, sex:女 } }, watch:{ num(val, oldVal){ //普通的watch监听 console.log(“num: “+val, oldVal); }, obj:{ //深度监听，可监听到对象、数组的变化 handler(val, oldVal){ console.log(“obj.name: “+val.name, oldVal.name); }, deep:true } } }) vm.num=2 vm.obj.name=二儿 下面单...
第一个浅度监听： <!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/vue.js"></script></head><body><div id="app"><p>{{a}}</p><p>{{b}}</p></div><script>var vm=new Vue({el:"#app",data:{a:10,b:15}});vm.$watch("a",function(){alert(a变化了);this.b=100;});document.onclick=function(){vm.a=2}</script></body> </html>第二个深度监听 <!DOCTYPE html> <html><...
什么是 better-scroll better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里 。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。 <template><div><div class="goods"><div class="menu-wrapper" ref="menuWrapper"></div><div class="food-wrapper" ref="foodWrapper"></div></div></div> </template>与1.0版本不同的是,我们使用的是ref <script ...
1.GET 请求 //向具有指定ID的用户发出请求 axios.get(/user?ID=12345) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 axios.get(/user, { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });2.POST请求 axios.post(/user, { firstName: Fred, l...
在工作中，我们经常会写出这种代码： import MHeader from ../../components/m-header/m-header @import "../../common/stylus/variable" @import "../../common/stylus/mixin"即，需要引入公共文件，但是公共文件的文件路径里当前文件很远，那么就会形成上面示例中的那种路径很长的情况。 而因为文件目录是约定俗成的，不可轻易更改，无法修改相对路径。那么该怎么办呢？ 大家都知道，Vue中的js可以通过配置webpack别名（alias）来...