混合是什么混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。例如:var tpl1={template:#stpl1,data:function(){return {msg:false}},methods:{msgf:function(){this.msg=!this.msg}} } var tpl2={template:#stpl2,data:function(){return {msg:false}},methods:{show:function(){this.msg=true},hide:function(...
话不多说，先看效果。其实就是一个可以按住鼠标进行一个区域内条目选择的功能，相信用过Jquery UI 的都知道这是selectable的功能，然而我们如果用Vue开发的话没有类似的插件，当然你仍然可以把jquery的拿过来直接用，但是我又不想引入jquery 和 jquery UI在我的项目中，于是我就自己尝试着实现类似的功能。要实现这个功能分两步。第一步是实现鼠标选择区域的功能，第步部是把这个区域内被选择的item添加一个active的类。先看如何实...
0x00 前言 VueJS 社区里面关于富文本编辑器的集成也不少了，但是之前小调研了一下，基本上就是 quill,medium-editor，因为之前用 AngularJS 用过 medium-editor，并且需要自定义某些按钮，而且最好还是选中弹出式的，所以就决定用 medium-editor。 社区里面 star 较多的就是这个了：vue-medium-editor，但是打开它官网，看了看文档，越看越别扭，来看看它用法： <!-- index.html --> <medium-editor :text=myText :options=options...
前面的话 父组件使用props传递数据给子组件，子组件怎么跟父组件通信呢？这时，Vue的自定义事件就派上用场了。本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Events interface)，即 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件[注意]Vue 的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似，但是 $on 和 $emit 不是addEventListener 和 dispatchEvent 的别名 另外，父组件可...
本文主要介绍了Vue-Cli中自定义过滤器，分享给大家，也给自己做个笔记vue2里面移除了内置过滤器，所有过滤器都需要自己定义。 以下例子是使用webpack模版自定义一个日期格式过滤器的例子。 文件结构. ├── src │ ├── Filters │ │ ├── DataFormat.js │ │ └── index.js │ └── main.js └── ...所有过滤器都放在Filters文件夹下，剩下的就是webpack模版的文件结构，在这里就不完全写出来。 Filters/DataF...
在 AngularJs 中，它的指令使用 directive ( name,factor_function)来实现： angular.module( myapp ,[]) .directive (myDirective,function (){return{template : ,restrict: ,replace: ,........} })除了内置指令,Vue.js 也允许组件自定义指令。 + 自定义指令提供一种机制将数据的变化映射为 DOM 行为 + Vue.js 用 directive ( id,definition) 方法注册一个全局的自定义指令 + 自定义的指令接受两个参数： 指令 ID 与定义对象...
自定义vue全局组件use使用(解释vue.use()的原理)我们在前面学习到是用别人的组件：Vue.use(VueRouter)、Vue.use(Mint)等等。其实使用的这些都是全局组件，这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的原理而我们再用Axios做交互，则不能使用Vue.use(Axios)，因为Axios没有install自定义一个全局Loading组件，并使用：总结目录：|-components|-loading|-index.js 导出组件，并且install|-loading.vue 定义Loading...
通常我们在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组件 import Ele...
下面讲一下如何定义动态组件。 Vue.extend 思路就是拿到组件的构造函数，这样我们就可以new了。而Vue.extend可以做到：https://cn.vuejs.org/v2/api/#Vue-extend // 创建构造器 var Profile = Vue.extend({template: <p>{{firstName}} {{lastName}} aka {{alias}}</p>,data: function () {return {firstName: Walter,lastName: White,alias: Heisenberg}} }) // 创建 Profile 实例，并挂载到一个元素上。 new Profile().$mount(#...
方法一： // template {{a | data}} //script data:{a: Date.now() } filters: {data:function (input) {var d = new Date(input);var year = d.getFullYear();var month = d.getMonth() + 1;var day = d.getDate() <10 ? 0 + d.getDate() : + d.getDate();var hour = d.getHours();var minutes = d.getMinutes();var seconds = d.getSeconds();return year+ - + month + - + day + + hour + : + minutes + : + seconds;}方法二...
假设有一个标签h5, 我们给它添加了一个自定义属性值，（item.id是从动态添加的） 点击h5 标签，如何才能获取当前对应的自定义属性值呢？ 想当然的我最开始这样写：<h5 class="left t-title" @click=getDataId :data-id="item.id"></h5><script>methods: {getDataId() {console.log(this.data-id);}},</script> 显然，这样是拿不到 data-id的值的。。。。 应该这样做：<h5 class="left t-title" @click=getDataId(item.id) :data-id...
通过局部自定义指令实现了一个拖动的指令 html: <div style="position:absolute;width:100px;height:100px;border:1px solid red" v-drag="{set:set}"></div>script:methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives:{ // 拖动的自定义指令 drag(el,binding){ //el为拖动的元素 var oDiv =el;oDiv.onmousedown = function(e){e.preventDefault();e.stopPropagation();var disX = e.offsetX;var disY = e.offset...
使用v-on绑定自定义事件可以让子组件向父组件传递数据，用到了this.$emit(‘自定义的事件名称,传递给父组件的数据) <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="../js/vue.js"></script> </head> <body> <div id="app"> <parent-component></parent-component> </div> <template id="parent-component"> <div><p>总数是{{total}}</p><child-component @increment="incrementT...
在开发过程中，为了效果好看，往往需要自己开发一个下拉列表，而不是使用 HTML 自身的 select 下拉列表。然而当编写自定义下拉列表的时候，就会碰到一个问题：如果用户在下拉列表的范围外进行鼠标点击的操作，如何关闭已经打开的下拉列表？ 解决思路如下：在 DOM 的根节点上添加一个 click 事件，同时下拉列表内阻止事件的默认行为和冒泡。当响应这个点击事件的时候，说明是在下拉列表范围外的点击（因为下拉列表内阻止了事件的冒泡...
Vue是可以自定义指令的，最近学习过程中遇见了一个需要图片懒加载的功能，最后参考了别人的代码和思路自己重新写了一遍。以下将详细介绍如何实现自定义指令v-lazyload。 先看如何使用这个指令： <img v-lazyload="imageSrc" >imageSrc是要加载的图片的实际路径。 为了实现这个指令，我们首先单独建立一个文件，名字为lazyload.js.并填写基本的代码，如下： //Vue 图片懒加载，导出模块 export default (Vue , options = {}...