这次给大家带来Vue2x图片预览插件使用步骤详解，Vue2x图片预览插件使用的注意事项有哪些，下面就是实战案例，一起来看一下。先来看下DemoLiveDemo关于开发Vue插件的几种方式 （具体请移步官网）Vue官网MyPlugin.install = function (Vue, options) {// 1. 添加全局方法或属性Vue.myGlobalMethod = function () {// 逻辑...}// 2. 添加全局资源Vue.directive(my-directive, {bind (el, binding, vnode, oldVnode) {// 逻辑...}...})...
这次给大家带来vue引入js数字小键盘步骤详解，vue引入js数字小键盘的注意事项有哪些，下面就是实战案例，一起来看一下。效果如图：代码如下： keyboard.vue<template> <p class="keyboard" v-show="showKeyboard" v-clickoutside="closeModal"> <p v-for="keys in keyList"> <template v-for="key in keys"> <i v-if="key === top" @click.stop="clickKey" class="iconfont icon-zhiding tab-top"></i> <i v-else-if="key === 123...
这次给大家带来在vue组件中传递数据步骤详解，在vue组件中传递数据的注意事项有哪些，下面就是实战案例，一起来看一下。Vue 的组件作用域都是孤立的，不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。组件之间传递数据大致分为三种情况：父组件向子组件传递数据，通过 props 传递数据。子组件向父组件传递数据，通过 events 传递数据。两个同级组件之间传递数据，通过 event bus 传递...
这次给大家带来WebPack配置vue多页面步骤详解，WebPack配置vue多页面的注意事项有哪些，下面就是实战案例，一起来看一下。WebPack虐我千百遍，我带她如初恋。一个项目前台页面写差不多了，webpack几乎零配置，也算work起来了。现在需要编写后台管理界面，另起一个单独的项目，那是不存在的。于是网上了搜了大把大把的文章，很多都是修改了项目的结构，讨厌，vue-cli搞的那一套，干嘛要修改来修改去的。像我这种前端小萌新，webpack...
这次给大家带来vue在自定义组件中使用v-model步骤详解，vue在自定义组件中使用v-model的注意事项有哪些，下面就是实战案例，一起来看一下。v-model指令 所谓的“指令”其实就是扩展了HTML标签功能(属性)。先来一个组件，不用vue-model，正常父子通信<!-- parent --> <template> <p class="parent"><p>我是父亲, 对儿子说： {{sthGiveChild}}</p><Child @returnBack="turnBack" :give="sthGiveChild"></Child> </p> </template> <sc...
这次给大家带来vue-cli+webpack处理静态资源及webpack打包步骤详解，vue-cli+webpack处理静态资源及webpack打包的注意事项有哪些，下面就是实战案例，一起来看一下。通过Vue-cli进行webpack打包的坑Vue-cli为Vue项目搭建的脚手架的确很方便，但打包时容易出现空白页，或者对应的静态资源加载不了。 我是通过将项目/config下的index.js的assetsPublicPath变成./，变成相对路径，进行解决。cd vue demo npm run dev //运行程序 npm...
这次给大家带来vue中keep-alive使用步骤详解，vue中keep-alive使用的注意事项有哪些，下面就是实战案例，一起来看一下。1.keep-alive的作用以及好处在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省性能。2.keep-alive的基本用法在app.vue中<!-- 缓存所有的页面 --> <...
这次给大家带来处理Vue项目编译后部署在非网站根目录方法详解，处理Vue项目编译后部署在非网站根目录的注意事项有哪些，下面就是实战案例，一起来看一下。同一个生产部署项目，基内外网的访问路径并不相同，内网是基于域名根目录来访问，而外网却指向了一个子目录。eg. ：vue-router: history模式 内网环境：192.168.1.1:8080/index.html 外网环境：domain.com/ttsd/index.html由于开发出来的项目是要部署在客户方，且客户并不想单...
这次给大家带来vue拦截器实现统一token与兼容IE9步骤详解，vue拦截器实现统一token与兼容IE9的注意事项有哪些，下面就是实战案例，一起来看一下。项目中使用vue搭建前端页面，并通过axios请求后台api接口，完成数据交互。如果验证口令token写在在每次的接口中，也是个不小的体力活，而且也不灵活。这里分享使用vue自带拦截器，给每次请求的头部添加token，而且兼容了IE9。import axios from axios; // 这里的config包含每次请求的内...
这次给大家带来Vue动态生成form表单案例详解，Vue动态生成form表单的注意事项有哪些，下面就是实战案例，一起来看一下。具有数据收集、校验和提交功能的表单生成器，包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能，支持事件扩展。示例https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg安装npm install form-createORgit clone htt...
这次给大家带来vue自定义filters过滤器步骤详解，vue自定义filters过滤器的注意事项有哪些，下面就是实战案例，一起来看一下。官方给出Vue.filters(id , [definition]) //id {string} //definition {function}详情查看在项目中我们如果有多个filters，那么我怎么一次注册，全局可用，我们在项目里新建一个filters文件夹，如下，index.js是出口文件，readMore是一个对字符串做处理的过滤器文件目录下面贴上代码：//index.js // 引入...
这次给大家带来使用VuePress搭建个人博客步骤详解（附代码），使用VuePress搭建个人博客的注意事项有哪些，下面就是实战案例，一起来看一下。VuePressvuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器，实际上就是一个vue的spa应用，内置webpack，可以用来写文档。一个基于 Vue SSR 的静态站生成器，本来的目的是爽爽的写文档，但是我发现用来撸一个人博客也非常不错。这是VuePress的官方文档上手搭建你可以跟着文...
这次给大家带来使用Vue实现拖拽功能步骤详解，使用Vue实现拖拽功能的注意事项有哪些，下面就是实战案例，一起来看一下。效果图：HTML代码：<p id="box"> 位置<br>x:{{val.x}} <br>y:{{val.y}}<p v-drag="greet" id="drag" :style="style">//注意这里要通过指令绑定函数将当前元素的位置数据传出来</p> </p>JS代码：Vue.directive(drag,//自定义指令 {bind:function (el, binding) {le...
这次给大家带来vuex操作state对象方法详解，vuex操作state对象的注意事项有哪些，下面就是实战案例，一起来看一下。Vuex是什么？VueX 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。Vue有五个核心概念，state, getters, mutations, actions, modules。总结state => 基本数据 getters => 从基本数据派生的数据 mutations => 提交更改数据的方法，同步...
这次给大家带来vue.extend实现alert模态框弹窗步骤详解，vue.extend实现alert模态框弹窗的注意事项有哪些，下面就是实战案例，一起来看一下。alert.js文件代码import Vue from vue // 创建组件构造器 const alertHonor = Vue.extend(require(./alert.vue)); var currentMsg = {callback:function(){ }} export default function(options){var alertComponent = new alertHonor({el: document.createElement(p)});alertComponent.ti...