1.安装环境 ①安装node.js 并添加入环境变量PATH②安装淘宝NPM镜像$ npm install -g cnpm --registry=https://registry.npm.taobao.org③安装webpacknpm install webpack -g ④安装vue-cli脚手架npm install -g vue-cli⑤创建项目模板 vue init wepack vue-multipage-demo⑥cmd进入到要放项目的文件夹⑦安装 cnpm install2.目录结构调整 3.配置文件修改 ①添加依赖 glob （返回目录中的所有子文件） npm install glob②修改build文...
在开发webapp的时候总是会受到首屏加载时间过长的影响，主流的解决方法是在载入完成之前显示loading图效果，而一些大公司会配置一套服务端渲染的架构来解决这个问题。考虑到ssr所要解决的一系列问题，越来越多的APP采用了“骨架屏”的方式去提升用户体验。 小米商城：一、分析Vue页面的内容加载过程 vue项目中的入口index.html只有简单的内容： <!DOCTYPE html> <html lang="zh-CN"> <head><meta http-equiv="Content-Type" conten...
Vue这个框架就不简单介绍了，它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. 一、示例 var vm = new Vue({ data: { obj: { a: 1 } }, created: function () { console.log(this.obj); } }); 二、实现原理 vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的.1）数据劫持、vue是通过Object.defineProperty()来实现数据劫持，其中会有getter()和setter方法；当读取...
在vue官网把文档扫了一遍后，就开始写网站项目了，没有设计，就百度里找了一个h5的助赢软件的网站把他copy下来，想想有点坏了，接着把内容改改吧。首先开始做一个列表展示vue实例好后，给对象添加默认数据，列表加载成功。查看源代码，看看是否和心目中想的一样。当前还只是把初始化的默认数组展示出来，列表里面的操作，跳转还没有加，试着给初始化的数组添加id字段和数字刷新一下，没有效果，坑人的Chrome，缓存特别严重，不得不...
什么是VuePress VuePress由两部分组成：一个基于Vue的轻量级静态网站生成器，以及为编写技术文档而优化的默认主题。 它是为了满足Vue自己的子项目文档的需求而创建的。 VuePress为每一个由它生成的页面提供预加载的html，不仅加载速度极佳，同时对seo非常友好。一旦页面被加载之后，Vue就全面接管所有的静态内容，使其变成一个完全的SPA应用，其他的页面也会在用户使用导航进入的时候来按需加载。 VuePress是怎样运作的 一个VuePre...
Vue定义全局点击函数，参数为点击的回调函数。 Vue.prototype.globalClick = function (callback) { //页面全局点击$(document).click(callback); }组件挂载后监听全局的点击事件 mounted:function () {this.globalClick(this.handleClickOut); },隐藏元素。 取到dom节点，判断父级是否存在来判断是否需要来关闭 handleClickOut:function (event) {if($(event.target).parents(".sys-add-user-dialog").length == 0){//隐藏元素} }...
今天在上慕课老师fishenal的vue实战课程的时候，有一个轮播图组件实现，在跟着做的时候，自己也踩了一些坑。此外，在原课程案例的基础上，我加入了不同方向的滑动功能。 本文章采用Vue结合Css3来实现轮播图。 首先要了解的是Vue的动画原理。在vue中，如果我们要给元素设置动画效果，则需要使用一个<transition name="targetClassName"></transition>将相应的元素包裹住，如下： <transition name="imgShouldMove"> <img v-if="shou...
组件被包在一个高度固定的div mounted () {var boDiv = document.getElementById(this.id);if(boDiv == undefined){return;}var isFirefox=navigator.userAgent.indexOf("Firefox") if(isFirefox>0){ boDiv.addEventListener(DOMMouseScroll, function(event) { //火狐var evt = window.event || arguments[0]if (evt.detail <= -3) { boDiv.scrollTop=boDiv.scrollTop-10} else if (evt.detail >= 3) {boDiv.scrollTop=boDiv.scro...
应用场景：在进行多选的时候一般默认显示第一个。 实现方法：纯vue实现 例子： <span v-for="(one,index) in site"><input type="checkbox" :checked="index == 0" style="vertical-align: middle;"><label>{{one.name}}</label></span>//:checked="index == 0"为索引为0的，即为第一个复选框添加属性。 拓展：默认被选中的复选框，只需要index指定即可。 以上这篇基于vue v-for 循环复选框-默认勾选第一个的实现方法就是小编分享给...
最近一直在看vue，查了很多资料，看了很多文档和博客，大概半知半解了，然后利用所理解的知识写了一个简单的搜索匹配功能。 大概长这个样子：数据都是假的 代码部分 （注意我引用的是本地vue.min.js文件，请注意文件路径。） <!DOCTYPE html> <html><head><meta charset="utf-8"><title>Vue测试2</title><script type="text/javascript" src="vue.min.js"></script><style type="text/css">*{padding: 0;margin: 0;font-size: 14px...
效果如下，dialog中内容自行添加<template><div><div class="dialog-wrap"><div class="dialog-cover" v-if="isShow" @click="closeMyself"></div><transition name="drop"><div class="dialog-content" v-if="isShow"><p class="dialog-close" @click="closeMyself">x</p><slot>empty</slot></div></transition></div></div> </template> 接收父组件传参isShow，并返回一个自定义事件on-close <script>export default {props: {is...
UEditor官网说不提供单图片的跨域，所以只能自己解决。查了网上的很多方案，但是没看到和vue一起用的，不过倒是获得了一些思路。本着不想改太多源代码的基础上尝试着...一不小心就可以用了 解决方案：上传单图片的时后端不直接返回JSON，而是重定向到前端页面 前端：VUE 后端：WAMP + ThinkPHP5.0 前端 http://localhost:8888 1、去官网下载UEditor到vue中，打开ueditor.config.js配置服务器路径(本地域名可以去hosts文件中添加)，...
例子： <template><div class="finish-wrap"><div class="finish-header"><div class="finish-img"></div></div><div class="finish-tip">支付成功</div><div class="finish-footer"><router-link to="/">学车所需资料</router-link><span><router-link to="/">学车考照流程</router-link></span></div></div> </template>1.如果直接在css中设置body的background-color，会导致其他页面的背景色响应改变，所以不可取； 2.如上面例子...
由于工作需求，想实现一个多级联动选择器，但是网上现有的联动选择器都不是我想要的，我参照基于vue2.0的element-ui中的Cascader级联选择器的样式实现了复合自己要求的多级联动选择器，原理很简单，不多说，直接上代码。。。 <template><div id="app"><div class="select"><div class="input_text"><input type="text" name="" v-on:focus="options1Show" v-model="result"></div><div class="options1" v-show="options1isShow"><...
我就废话不多说，直接上代码吧！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div style="padding-left: 20px"> <ul style="margin-bottom: 20px"> <li v-for="(item, index) in proData"> <input type="checkbox" :value="index" v-model="selectArr">{{item.name}} </li> </ul> <label> <input type="checkbox" @click="selectAll" :checked="ch...