TypeScript 为 JavaScript 带来静态类型检查，让 JavaScript 编写中大型应用的时候可以应用工具来避免部分错误。Vue 很早就支持 TypeScript，但配置起来比较麻烦，幸好有了 Vue CLI 3.0。安装好 vue-cli 之后，使用 vue create 项目名称 来创建项目，vue 脚本手架自动创建以项目名称命名的目录。vue-cli 3 生成的项目结构比较科学，尤其是通过 components 和views 将作为控件的组件和作为页面的组件分离开来，结构更清晰。可以理解...
思路：scroll在哪儿个组件内，就在获取那个dom元素。网上好多思路是 window.addEventListener("scroll", function(){console.log(scrolling);});这是监听不到的！如果你整个网页可以滑动，或许还可以试试！ 对于像我这样，只在页面的内的一个div内要监听的。 实现代码如下： 第一步：滑动的组件外层的div加 ref="viewBox" 为了通过$refs获取dom元素 <!--设备列表--> <div class="deviceWrapper" ref="viewBox"><mu-refresh-control...
最近学习vuejs看例子中用$on无法监听子组件$emit触发事件： 使用版本 vue.js 2.2.5 参考文献 1.vuejs API 2.解决实例 问题分析 1.之前写的自定义组件事件触发为this.$emit("myclick",this.todo.text);，这样this指的是todo-item的每一项，而最后vm.$on监听的是app组件，也就出说监听的是父节点，而触发的是子节点，故监听不到这个事件的。 解决思路 1.将触发事件放在父节点上触发，就可以监听到触发的事件了，即this.$parent.$emi...
我们大多时候渲染表格都是key值在页面上写死的情况下，一个个value渲染，那我们遇到数据是键值对的时候该如何渲染呢？ 我们查看vue的官方文档，如下： 值域 v-for v-for 也可以接收一个整数，此时它将重复模板数次。 <div><span v-for="n in 10">{{ n }} </span> </div>结果：那我们就可以通过如下方法来渲染列表： <table class="table table-bordered"><tbody><tr v-for="n in items.length/2"><td>{{items[2*n].user}}</td><td>...
前言swiper这是一个很强大的轮播展示工具，但往往也会有一些未知BUG，尤其是在手机端，由于性能局限，会导致效果和PC测试的时候有完全不一样的效果在H5项目中，需要用到翻页效果，通过 Swiper 来实现，安装 Swiper npm i swiper -S但是实际使用中，发现低版本 iOS < 11 会出现下面这个错误：SyntaxError: Unexpected keyword const. Const declarations are not supported in strict mode.原因Swiper.js 这个 npm 包里面还使用了 d...
如下所示： <!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/vue.js" ></script></head><body><div id="todo-list-example"><button v-on:click="ss">保存 </button><ul><li is="todo-item" v-for="(todo, index) in todos" v-text="sv" v-on:click="hh"></li></ul></div></body><script>Vue.component(todo-item, {template: `<li v-on:click="$emit(click)">{{ text ...
如图所示，当我们获取到数据后每个栏都只显示5条，多出的部分隐藏，点击显示全部将数据都展现出来，如图所示首先我们的数据类型是这样的， tableData: [{"comment": "","lscm": [{"count": "1268","id": 1,"namech": "OGC WMTS","nameen": "WMTS","state": 1,"timestamp": 1439193813000,"typeid": 1},{"count": "26","id": 2,"namech": "OGC WMS","nameen": "WMS","state": 1,"timestamp": 1439193815000,"typeid": 1},{"coun...
1、 在vue文件的html中引入element的上传控件，代码如下： <div><el-uploadaction="//jsonplaceholder.typicode.com/posts/":before-upload="handleBefore"><el-button size="small" type="primary">点击上传</el-button><div class="el-upload__tip" slot="tip">上传一个zip试一下</div></el-upload> </div>2、 在项目中引入JSZip工具以便于调用其接口实现文件的解压，具体需要先在vue-cli生成的项目中运行如下指令安装JSZip： np...
如下所示： login() {if(this.email.length > 0 && this.password.length >0) {this.$http.post(/api/login, {user: this.email,password: this.password}).then(res => {let userPwd = res.dataif(this.password == userPwd) {this.$router.push("/")} else {alert("错误，请重新输入！")}}).catch(err => {console.log(err)})} else {alert("输入错误！")}}this.$router.push(“/”)不是跳转到主页，而是变成这样：http://127.0....
直接上代码 嘻嘻，发现bootstrap+vue.js拿来做原型效率挺高，以后就这样做原型 <!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="external nofollow" ><script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script><script src="https://cdn.bootcss.com/bootstrap/3....
从很久之前就已经接触过了angularjs了，当时就已经了解到，angularjs是通过脏检查来实现数据监测以及页面更新渲染。之后，再接触了vue.js，当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面。今天，就我们就来一步步解析vue.js响应式的原理，并且来实现一个简单的demo。 首先，先让我们来了解一些基础知识。 基础知识 Object.defineProperty es5新增了Object.defineProperty这个api，它可以允许我们为对象的属性来设定ge...
fastclick：处理移动端click事件300毫秒延迟 1、兼容性 iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome Android上的Chrome（ICS） Opera Mobile 11.5及以上版本 Android 2以来的Android浏览器 PlayBook OS 1及以上版本 2、不应用FastClick的场景 桌面浏览器; 如果视口元标签中设置了width=device-width，Android上的Chrome 32+会禁用300ms延时; <meta name="viewport" content="width=device-width, initial-scale=1">视频元...
安装fastclick.js npm install fastclick -D之后，在main.js中引入，并绑定到body import FastClick from fastclick //vue框架开发H5正确运用fastclickif (addEventListener in document) {document.addEventListener(DOMContentLoaded, function() {FastClick.attach(document.body);}, false); 以上这篇vue.js添加一些触摸事件以及安装fastclick的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持...
本文实例讲述了vue.js实现带日期星期的数字时钟功能。分享给大家供大家参考，具体如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.gxlcms.com vue.js带日期星期数字时钟</title> <style type="text/css"> html, body {height: 100%; } body {background: #0f3854;background: -webkit-radial-gradient(center ellipse, #0a2e38 0%, #000000 70%);background: radial-gradient(ellipse at center, #0a2e38...
基于element-ui 组件 开发的vue.js项目， 实现回车键发起搜索，和原生的input 标签使用方法不一样： el-input 监听键盘按下状态 得用@keyup.enter.native,如果是非el-input 组件，可以直接用@keyup.enter<el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="pchandleIconClick" @keyup.enter.native="searchEnterFun"> </el-input><input placeholder="搜索" type="text" @keyup.enter="searchEnterFun">...