最近写公司项目有涉及到轮播banner，一般的ui框架无法满足产品需求；所以自己写了一个层叠式轮播组件；现在分享给大家； 主要技术栈是vue.js ;javascript;jquery；确定实现思路因工作繁忙，暂时不做梳理了；直接贴代码参考； 此组件是基于jquer封装，在vue项目中使用首先需要先安装jquery插件：指令：npm install jquery,安装完成之后再webpack.base.conf.js配置插件：plugins: [new webpack.ProvidePlugin({$: jquery,jQuery: jqu...
自定义指令：以v开头，如：v-mybind。 代码示例： <input v-mybind /> directives:{mybind:{bind:function (el) {el.value = "this is mybind-bind"}}} 这时页面初始化时，input中会显示this is mybind-bind。 通过directives注册自定义指令mybind，每一个自定义指令中又提供若干钩子，如示例中的bind，bind的作用是定义一个在绑定时执行一次的初始化动作，观察bind函数，它将指令绑定的DOM作为一个参数，在函数体中，直接操作DOM节...
面试官：Vue 中父子组件通信有哪些方式？ 自己先想一分钟。 无可否认，现在无论大厂还是小厂都已经用上了Vue.js 框架，简单易上手不说，教程详尽，社区活跃，第三方套件还多。真的是前端开发人员必备技能。而且在面试当中也往往会问到关于 Vue 方面的各种问题，其中大部分面试官会问到如上这种问题。 最近一直在做 Vue项目代码层面上的优化，说实话，优化别人的代码真是件痛苦的事情，功能实现尚且不说，就说代码规范我就能再写出一...
上次我们已经分析了vue.js是通过Object.defineProperty以及发布订阅模式来进行数据劫持和监听,并且实现了一个简单的demo。今天，我们就基于上一节的代码，来实现一个MVVM类，将其与html结合在一起，并且实现v-model以及{{}}语法。 tips:本节新增代码（去除注释）在一百行左右。使用的Observer和Watcher都是延用上一节的代码，没有修改。 接下来，让我们一步步来，实现一个MVVM类。 构造函数首先，一个MVVM的构造函数如下(和vue.js的...
使用v-bind：class或者v-bind:style或者直接通过操作dom来对其样式进行更改； 1.v-bind:class || v-bind:style 其中v-bind是指令，: 后面的class 和style是参数，而class之后的指在vue的官方文档里被称为指令预期值（这个不必深究，反正个人觉得初学知道他叫啥名有啥用就好了）同v-bind的大多数指令（部分特殊指令如V-for除外）一样，除了可以绑定字符串类型的变量外，还支持一个单一的js表达式，也就是说v-bind：class的指令预期值...
一、前言 熟悉了 Vue 的指令系统后，在实际开发中，不可避免的会使用到对于事件的操作，如何处理 DOM 事件流，成为我们必须要掌握的技能。不同于传统的前端开发，在 Vue 中给我们提供了事件修饰符这一利器，使我们可以便捷的处理 DOM 事件，本章，一起来学习如何使用事件修饰符来实现对于 DOM 事件流的操作。 仓储地址： https://github.com/Lanesra712/VueTrial/tree/master/Chapter01-Rookie/directives 二、干货合集 1、 DOM 事...
Date.prototype.format = function(format){var o = {"M+" : this.getMonth()+1, //month"d+" : this.getDate(), //day"h+" : this.getHours(), //hour"m+" : this.getMinutes(), //minute"s+" : this.getSeconds(), //second"q+" : Math.floor((this.getMonth()+3)/3), //quarter"S" : this.getMilliseconds() //millisecond} if(/(y+)/i.test(format)) {format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - ...
Vue.js是一个JavaScript框架，可用于构建Web应用程序的前端框架。特别是在创建复杂功能时，对于每个项目，有必要在我们的应用程序中查看所有内容，并检查它是否符合预期。然而，对于大型项目，每次新的更新后，检查每个功能将变得很麻烦。因此，我们可以创建可以一直运行的自动化测试，并保证我们的代码可以正常运行。在本文中，我们将为VueJS创建一些简单的单元测试。 要进行测试，我们将先制作一个基本的待办事项列表组件。我们将...
问题： 需要一个可折叠的权限管理系统，用表格展示。主要用的iView组件库，有Table（表格），Tree（树形控件），Collapse（折叠面板）看起来比较符合意思深入查看Table相关范例，发现有个 通过给 columns 数据设置一项，指定 type: 'expand'，即可开启扩展功能 可以考虑但也只是展开详细内容，如需树形结构，则需要render自定义去渲染，挺麻烦的。再去看看element UI，也没有什么比较好的选择。 过程： 第一步，先构建根节点的数据...
如下所示： <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title> </head> <body> <div id=app><!--这里的作用是将父组件渲染到页面上--><father></father> </div> </body> <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script> <script type="text/x-template" id="father"><div><!--这里实现一个双向绑定--><!--parentMsg变量必须在data中声明，不然会报错，我就错在这个坑--><input v-...
Vue项目一般使用自带的脚手架工具vue-cli和webpack打包方式进行项目构建运行。开发中，我们在控制台输入命令行npm run dev部署项目后，默认开启的页面调试地址是8080端口。但是有时候我们在进行多个项目开发需要同时部署多个vue项目，甚至有的还需要启动后台项目，这时就需要修改Vue项目的启动端口（不然会报端口被占用的错误，一个端口号只能一个进程占用）。 本文像大家讲解如何找到Vue项目中端口的配置文件，并修改。 首先，我们...
找到config/index.js 配置文件proxyTable: {/api: {target: http://your_website,changeOrigin: true,pathRewrite: { //需要rewrite重写的, 如果在服务器端做了处理则可以不要这段^/api: }}} 以上这篇vue.js中proxyTable 转发请求的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
vue.js在生成相关js和css文件的时候，名称是通过HASH的方式进行生成的，但是每次生成的文件基本都是一样的，那么浏览器就会缓存这些文件，为了在更新的时候能够保证js和css文件能够更新，那么我们需要针对webpack的配置文件进行修改； 打开webpack.prod.conf.js文件进行如下操作 1.增加版本变量（版本号暂时用时间代替） var Version = new Date().getTime();2.修改要生成的js和css文件的配置项，把刚刚声明的版本拼接进要生成的文...
最近在研究vue.js，总体来说还算可以，但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题，今天在这里讲讲，希望对大家有所帮助！ 在官网api中的这段讲解很少，也很模糊；官网中说明如下： 非父子组件通信： 有时候两个组件也需要通信 (非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线： var bus = new Vue()； // 触发组件 A 中的事件 bus.$emit(id-selected, 1) // 在组件 B...
1、Vue.js事件绑定的一般格式 v-on:click=function v-on:click/mouseout/mouseover/ @click 2、Vue.js事件绑定的实现 2.1 JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script><script type="text/javascript">window.onload = function() {vm = new Vue({el: #app,data: {arrMsg: [apple, orage, pear]},methods: {show: function() {alert(this.arrMsg);}}});}</script> 2.2 html代码<div id="ap...