Vue实现商品列表的展示是一个比较简单的入门demo，下面是具体的实现： 简单CSS样式： <style>#box ul{display: flex;flex-wrap: wrap;}#box li{padding: 3px;list-style: none;margin-right: 15px;border: 1px solid #eee;}#box img{width: 200px;height: 150px;} </style> html： <div class="" id="box"><ul><li v-for="v in json.list"><img v-bind:src="v.src" alt=""><h4>{{v.des}}</h4><p>{{v.price}}</p></li></ul></div> V...
前言首先这篇文章是写给Vue新手的，老司机基本不用看了。 当我们刚接触vue的时候，特别是对于第一次用前端框架的同学来说，心情可以说是比较激动的，框架带来的种种新体验，是以前jQuery无法给你的兴奋和满足感。但是在体验了几个demo的新鲜感之后，我们就要考虑如何把框架结合到我们实际的开发中如何应用的问题了。 下面我主要总结三个和生产发布相关的问题：资源文件发布文件夹配置，图片文件的引用，以及后台接口调试方法。 一，...
父组件向子组件通信 业务场景：现在我要在父组件点击一个回退按钮，这个回退会传进子组件中（子组件中有两步进程），子组件来处理。 解决方案 起初我是父组件通过props传值，但是发现只有组件第一次加载时才能传值，通过事件改变的父组件值并不会再通过过props传递，也就是说props只有加载组件时才会工作，并不会根据值改变动态操作 后面，我是通过操作dom的方法，this.$refs.children这样直接操作子组件 <ProgressTwo ref="progre...
方案1： 直接引入js （自己 写的动态改变fontsize的js） function htRem() {var ww = document.documentElement.clientWidth;if (ww > 750) {ww = 750;}document.documentElement.style.fontSize = ww / 7.5 + "px";}htRem();window.onresize = function() {htRem();}; 在main.js中import引入即可 方案二：手淘的 lib-flexible + rem 配置 flexible 安装 lib-flexible 在命令行中运行如下安装： npm i lib-flexible --save 引入 l...
前言 在vue官方资料中，我们可以可以很学会如何通过vue构建“动态组件”以及“异步组件”，然而，在官方资料中，并没有涉及到真正的“动态异步”组件，经过大量的时间研究和技术分析，我们给出目前比较合理的技术实现方式，并分析一下vue动态异步组件的原理动态组件 & 异步组件的存在，使得我们更方便地控制首屏代码的体积，加快加载速度。抛开具体细节不谈，一个普通 Vue 组件从创建到展现在页面里，主要经历了以下流程：// 组件 ...
转盘抽奖主要有两种，指针转动和转盘转动，个人觉得转盘转动比较好看点，指针转动看着头晕，转盘转动时指针是在转盘的中间位置，这里要用到css的transform属性和transition属性，这两个因为不常用最好是上网查查，用法和功能。 在html部分 <div id="wheel_surf"><div class="wheel_surf_title">幸运大转盘</div><div class="lucky-wheel"><div class="wheel-main"><div class="wheel-pointer-box"><div class="wheel-pointer" @c...
1.rem.js内容 ! function(n) { var e = n.document, t = e.documentElement, i = 720, d = i / 100, o = "orientationchange" in n ? "orientationchange" : "resize", a = function() { var n = t.clientWidth || 320; n > 720 && (n = 720); t.style.fontSize = n / d + "px" }; e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoade...
现在大部分电商的网站、app都需要用户或者管理者去选择设置地区等位置信息。下面我就介绍一下前端开发者用vue，axios，element-ui开发一个省市区三级联动的组件。 1.准备工作，首先我们需要全中国的省市区资源的json数据（科普一下：前六位数字是身份证前六位） 2.搭建vue-cli,安装axios,element-ui,创建vue，webpack项目 1). 在控制台或者终端执行以下代码，其中只需要路由（y），其他e2e，eslint这些不需要(y) vue init webpack ...
前言 使用vue也好有一段时间了，虽然对其双向绑定原理也有了解个大概，但也没好好探究下其原理实现，所以这次特意花了几晚时间查阅资料和阅读相关源码，自己也实现一个简单版vue的双向绑定版本，先上个成果图来吸引各位： 代码： 效果图：是不是看起来跟vue的使用方式差不多？接下来就来从原理到实现，从简到难一步一步来实现这个SelfVue。由于本文只是为了学习和分享，所以只是简单实现下原理，并没有考虑太多情况和设计，如果大家...
不多说直接上代码 BottomNav.vue： <template><div class="footer"><div v-for=(item,index) of items :class=[item.cls,{on:index === idx}] @click="$router.push(item.push)"><img :src="index===idx?item.iconSelect:item.icon"><p :class="[colorChange,{on:index===idx}]" >{{item.name}}</p></div></div> </template><script type="text/javascript">export default{props:[idx],data(){return {items:[{cls:"home",name:"首...
在正文开始之前，先了解vue基于源码构建的两个版本，一个是 runtime only ，另一个是 runtime加compiler 的版本，两个版本的主要区别在于后者的源码包括了一个编译器。 什么是编译器，百度百科上面的解释是 简单讲，编译器就是将“一种语言（通常为高级语言）”翻译为“另一种语言（通常为低级语言）”的程序。一个现代编译器的主要工作流程：源代码 (source code) → 预处理器 (preprocessor) → 编译器 (compiler) → 目标代码 (...
展开效果–看红框区域收缩效果–看红框区域 接下来看代码逻辑 ###template部分：已去除与本文不相关的功能代码 <li class="main-video"v-for="(item, index) of courseSubList" :key="item.id"><div class="audio-name"><div class="img-l"><span class="img-l-num">{{index+1}}</span><span class="img-l-name">{{item.subName}}</span></div><div class="img-r" @click="showHide(index)" ref="arrow"><i class="iconfont"><...
组件 <template><div><input id="upload_file" type="file" style="display: none;" accept=image/* name="file" @change="fileChange($event)"/><div class="image-item space" @click="showActionSheet()"><div class="image-up"></div></div><div class="upload_warp"><div class="upload_warp_img"><div class="upload_warp_img_div" v-for="(item,index) in imgList"><div class="upload_warp_img_div_top"><img src="http://...
VueJS可以说是近些年来最火的前端框架之一，越来越多的网站开始使用vue作为前端框架，vuejs轻量、简单，对于前端友好，学习路线平坦，这使得前端开发变得更加简易，而基于vuejs的前端组件库也越来越多。其中ElementUI，就是饿了么团队开发的一款基于vue的前端组件库。构建网站的必备环境： NodeJS（npm）Webstorm （前端IDE）Nginx（后期用来转发请求到后台服务器） 由于我们需要使用npm的包管理器，所以首先得先安装nodejs, 直接...
一、mintUI简介 mint是一个基于vue的前端UI框架，而它的样式比较类似于手机的样式，可以说是一个基于vue打包app的UI框架，使用mint框架可以给使用vue打包的app的用户更好的交互体验。mint已支持vue2.0。二、安装和引入mintUI 在安装之前首先要对vue.js有所了解，有一个建立好的vue的项目以及安装好的node.js。 执行命令npm i mint-ui -S，出现以下界面代表安装成功。引入muitUI： 在main.js中加入 import MintUI from mint-uii...