本文实例讲述了vue自定义键盘信息、监听数据变化的方法。分享给大家供大家参考，具体如下： @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive(on).keyCodes.ctrl=17; Vue.directive(on).keyCodes.myenter=13;@keydown.a/b/c.... <input type="text" @keydown.c="show">自定义键盘信息: Vue.directive(on).keyCodes.ctrl=17; Vue.directive(on).keyCodes.myenter=13; <!DOCTYPE html> <html lang="en"...
本文实例讲述了vue动画效果实现方法。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>www.gxlcms.com vue动画</title><script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script><link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/2.0/animate.css" rel="external nofollow" /><style>#box{width:400px;margin: 0 auto;}#div1{width:100px;...
本文实例讲述了vue计算属性computed的使用方法。分享给大家供大家参考，具体如下： computed:{b:function(){ //默认调用getreturn 值} } computed:{b:{get:set:} }* computed里面可以放置一些业务逻辑代码，一定记得return <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>www.gxlcms.com vue计算属性computed</title><style></style><script src="https://cdn.bootcss.com/vue/1.0.4/vue.min.js"></script...
前言： 在开发过程中，有时候会遇到这么一种情况，通过动态的赋值，但是dom没有及时更新，能够获取到动态赋的值，但是无法获取到双向绑定的dom节点，这就需要我们手动进行强制刷新组件。 官网是这样说的：可能你还不大理解，请继续往下看，下面是我的一个例子，来详细解说了这个方法的使用，第一个打印结果第二个打印结果 一、问题描述：父组件通过v-for渲染子组件，删除子组件数据出现异常。<code class="language-plai...
最近项目进入到了第三方集成的环节，集成第三方监控非要用IE，咋办？老板让我将后台管理系统的框架兼容下IE，一直都是在chrome下开发的，也不知道IE下是什么鬼。 目前后台管理系统前端搭建方式 目前系统是用vue-cli@2.0生成的，UI框架使用的是iview,ajax请求使用的是axois,此外就没有什么特殊的npm包了。 需要解决的兼容问题 经过自己的一番测试，目前主要有以下的兼容问题: 在IE下由于没有promise，所以axios不能用了；在涉及到fl...
第一步 : 了解环境变量概念 我们可以根目录中的下列文件来指定环境变量: .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入，但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略环境变量文件只包含环境变量的“键=值”对： FOO=bar VUE_APP_SECRET=secret // 只有VUE_APP_开头的环境变量可以在项目代码中直接使用除了 自定义的VUE...
不知道大家每次新建组件的时候，是不是都要创建一个目录，然后新增一个.vue文件，然后写template、script、style这些东西，如果是公共组件，是不是还要新建一个index.js用来导出vue组件、虽然有vscode有代码片段能实现自动补全，但还是很麻烦，今天灵活运用scripts工作流，自动生成vue文件和目录。 实践步骤安装一下chalk，这个插件能让我们的控制台输出语句有各种颜色区分npm install chalk --save-dev yarn add chalk --save-de...
多个元素之间过渡动画效果多元素之间如何实现过渡动画效果呢？看下面代码 .fade-enter, .fade-leave-to{opacity: 0; } .fade-enter-active, .fade-leave-active{transition: opacity 3s; }<div id="root"><transition name="fade"><div v-if="show">hello world</div><div v-else>bye world</div></transition><button @click="handleClick">切换</button> </div>let vm = new Vue({el: #root,data: {show: true},methods: {handle...
本文实例讲述了vue.js仿hover效果的实现方法。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;list-style: none;}ul{margin:100px ;}li{width: 50px;height: 50px;border: 1px solid;float: left;text-align: center;line-height: 50px ;}.act{background: red;}</style> </head> <body> <ul id="app"><li @click="fun(x)" v...
这个小技巧在工作当中是非常实用而且经常用到的 希望小伙伴儿们能学到。 先看看效果图吧接下来我们看看怎么实现的吧 在methods中写入一个方法 clickcategory(index){ // 这里我们传入一个当前值this.categoryIndex = index }然后需要在data里面注册一下 data() {return {categoryIndex: 0, //点击当前背景变成白色索引}}, 在css中设置我们当前选中项为active的类名，并给与一个白色的背景颜色.active {background: #fff} 接下来在...
在用vue来写一官网的时候，想引入外部字体文件，毕竟总感觉他自己的字体有点难看，在这里记录下1.先下载字体文件所需的.ttf文件我这里想引入的是华文行楷字体百度后下载了一个3M多的ttf文件或者https://www.gxlcms.com/fonts/点击此链接，进行字体下载 2.将字体文件引入自己定义一个文件夹，放入下载好的.ttf文件先自己定义一个font.css文件，将下载好的字体文件的路径引入@font-face {font-family: "华文行楷";src: url(stxingka....
如何在VueJS使用阿里云存储上传图片？什么是OSS呢？ 其实按照官网的解释就是->>阿里云对象存储服务（Object Storage Service) 在实际开发中，公司可能会用到OSS随时来存储一些数据，比如像文本、图片、音频和视频等在内的各种非结构化数据文件，恰好，在做项目的时候，刚好用到了OSS存储，对于我这个萌新，从来没用过，那么我们先来看看文档，看看是怎么一回事~看看前端在VueJS的环境下是如何上传OSS的 （1）首先，打开官网-----ht...
markdown 文档中Vue代码 可执行啦，而且可以边看边执行。这样就可以用markdown文档的形式，写自己的Vue博客了， 可以方便介绍自己的原创组件，很酷的执行。 Githubhttps://github.com/zhangKunUserGit/vue-markdown-run DEMOhttps://zhangkunusergit.github.io/vue-markdown-run/dist/ 安装npm install vue-markdown-run --save用法(1)完整引入// 引入 import MarkdownRun from vue-markdown-run; // 全局注入 Vue.use(MarkdownRun...
比如说,例如,你有一篮子水果,每次你从篮子里添加或拿走水果 ,你想显示有关水果数量的信息,但是你也想当篮子中数量变化的时候收到通知。 fruit-count-component.vue<template><p>Fruits: {{ count }}</p></template><script>import basket from ../resources/fruit-basketexport default () {computed: {count () {return basket.state.fruits.length// Or return basket.getters.fruitsCount// (depends on your design decisions)...
对于web开发和移动端开发，两者在路由上的处理是不同的。对于移动端来说，页面的路由是相当于栈的结构的。vue-router与keep-alive提供的路由体验与移动端是有一定差别的，因此常常开发微信公众号的我想通过一些尝试来将两者的体验拉近一些。 目标问题首先一个问题是keep-alive的行为。我们可以通过keep-alive来保存页面状态，但这样的行为对于类似于APP的体验是有些奇怪的。例如我们的应用有首页、列表页、详情页3个页面，当我们从...