开心果小魏

原创 室内设计

原创 海报设计

原创 智能驾驶系统

原创 logo设计

原创 美术作品

原创 美术作品

原创 美术作品

原创 定义格式化时间的全局过滤器

<div id="app2">    <h3 v-color="'pink'" v-fontweight="900" v-fontsize="50">{{ dt | dateFormat }}</h3>  </div>  <script>    // 全局的过滤器， 进行时间的格

原创 post提交表单数据，访问服务器中的数据，提交内容有两个数组

template代码<!--增删改控件--><div class="add_item" v-show="flag"> <form action="#" method="" id="form1" name="form1"> <p>病因：<inpu

原创 webstorm下设置sass

关于sass，就不想多说什么了。只要你有css基础，十分钟入门好吗。可以参考下资料：http://www.w3cplus.com/sassguide/今天想说的是webStorm下如何实现sass自动编译。最近在学习SASS，研究了下编译的方法，现在大家一般用的有两种，一种是直接用命令行编译，另一种就是利用一些方便的编译工具，例如腾讯的koala。后来我发现，原来webstorm早就支持了...

原创 清除严格模式

巴别-插件 - 转换 - 去除严格模式删除“use strict”指令安装$ npm install babel-plugin-transform-remove-strict-mode用法通过.babelrc（推荐）.babelrc{ “ plugins ”： [ “ transform-remove-strict-mode ” ]}通过CLI$ ...

转载 如何在 apache 中开启 gzip 压缩服务

 服务器设置gzip 压缩是 web 开发里很普遍的做法。假设你要请求一个 100k 的文件，网络传输速度为 50k/s，需要 2s 才能得到数据，但是如果在服务器设置了 gzip 压缩，将服务端的文件压缩到了 50k（实际上的压缩率往往小于 50%），这时候只需 1s 就能得到数据，然后在客户端解压即可。可以对比下同一个文件在开启 gzip 前后的大小。gzip 压缩前：gzip...

转载 jQuery动画animate方法使用介绍

jQuery动画animate方法使用介绍用于创建自定义动画的函数。 返回值:jQuery animate(params, [duration], [easing], [callback]) 如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。paramsOptions一组包含作为动画属性和终值的样式属性和及其值的集合params 对...

转载 ps批处理功能

怎样用ps创建新的动作进行批处理 一、新建动作   首先，我们打开ps就，在菜单栏里面找到窗口，在窗口中打开动作这个选择。   把动作的操作栏弄出来之后，要先新建一个动作，点击右下角的新建动作进行新建。   新动作图层建立好之后点击录制按钮，如下图，开始自己要重复的操作动作，正常操作即可。   在自己做完所有需要重复的动...

转载 精灵图的绘制及使用

问题一：CSS 图像精灵怎么用 首页我们需要对我们的项目充分的熟悉了解。整体的项目中大概都包含哪些图标，怎么分类，这样才能拼出有便于后期维护的图像。然后打开ps软件，新建画布，我这里建的画布大小为300X150，在具体项目中大家可以根据实际情况来决定建立的画布大小。 打开我们的项目文件。如果公司前端和设计分的比较清楚的话，前端只需要让设计提供出需要的icon图标即可。我们也...

转载 iconfont字体图标的使用方法

我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名;step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用...

原创 如何在android手机中调试项目

##尝试在手机上 去进行项目的预览和测试1、要保证自己的手机可以正常运行;2、要保证 手机 和 开发项目的电脑 处于同一个 WIFI 环境中，也就是说手机可以访问到电脑的 IP3、打开自己的 项目中 package.json 文件，在 dev 脚本中，添加一个 --host 指令，把当前 电脑的 WIFI IP地址，设置为 --host 的指令值；+ 如何查看自己电脑所处 WIFI 的 I...

原创 路由跳转、传 ID 值、tag属性设置、挂载评论子组件

 1、路由跳转、传 ID 值、tag属性设置  2、挂在评论子组件 

原创 渲染分类列表数据

当a标签后面加上 ：号时，说明后面的内容要是表达式格式，所以高亮类可以用三元表达式完成默认只有第一个高亮显示，点击高亮某项是框架自己提供的  ...

原创 发表评论功能的实现

1、把文本框做双向数据绑定2、为发表按钮绑定一个事件3、校验评论内容是否为空，如果为空，则Toast提示用户，评论内容不能为空4、通过 vue-resource 发送一个请求，把评论内容提交给 服务器5、当发表评论OK后，重新刷新列表，以查看最新的评论+如果调用 getComments 方法重新刷新评论列表的话，可能只能得到 最后一页的评论，前几页的评论获取不到+换一种思路：当...

原创 MUI 制作顶部滑动条的坑们

制作顶部滑动条的坑们1、需要借助于 MUI 中的 tab-top-webview-main.html2、需要把 slider 区域的 mui-fullscreen 类去掉3、滑动条无法正常触发滑动，通过检查官方文档，发现这是JS组件，需要被初始化一下+ 导入 mui.js+ 调用官方提供的 方式 去初始化    mui('.mui-scroll-wrapper').scroll({ ...

转载 vue_cli上使用mui或引入mui.js各种报错及问题

在main.js里添加 import mui from './assets/js/mui.js'如果不添加下面会显示mui is not defined 报错 Vue.prototype.mui = mui添加成功后就可以使用mui 了？  结果发现在vue里会使用严格模式，而mui不支持严格模式上使用，就会报错  Uncaught TypeError: 'caller',...

原创 分页数据加载（二）

实现点击加载更多评论的功能1、为加载更多按钮，绑定点击事件，在事件中，请求下一页数据2、点击加载更多按钮，让 pageIndex++,然后重新调用 this.getComments()方法重新获取最新一页的数据3、为了防止 新数据 覆盖老数据的情况，我们在 点击加载更多的时候，每当获取到新数据，应该让 老数据 调用 数组的 concat 方法，拼接上新数据...

原创 分页数据加载（一）

原创 vue组件中如何嵌套子组件

如何把一个子组件comment.vue放到一个组件中去1、先创建一个单独的 comment.vue 组件模板<template>    <div class="cmt-container">        <h3>发表评论</h3>        <hr>        <textarea placeholder=&qu

原创 实现 新闻资讯列表 点击跳转到新闻详情

1、把列表中的每一项改造为 router-link,同时，在跳转的时候应该提供唯一的 ID 标识符2、创建新闻详情的组件页面  NewsInfo.vue，注意获取当前路由id号的语法是 this.$route.params.属性3、在 路由模块中，将 新闻详情的 路由地址 和 组件页面对应起来，注意 传参 id 在路由中的拼接方法...

原创 设置路由跳转页面

1、将想要跳转的标签改为 router-link 标签，设置to 属性，要跳转到的位置2、新建上面指定的 to 跳转地址的 .vue文件，用来展示跳转的页面3、配置路由，用来完成跳转的绑定...

原创 VUE 中时间格式化方法

1、在main.js 文件中定义全局过滤器，因为要用到 moment 插件，所以先用 npm 安装，然后导入 2、在需要的地方，用管道符“|”调用即可，如果想再次自定义样式，在dateFormat后面传参即可 ...

原创 获取新闻列表数据并渲染

1、获取数据，并使用 使用 mint-ui 的 Toast控件进行提示2、把访问到的数据放置到页面上，注意，图片数据要在 src 属性前面加上 ：进行绑定  3、设置请求的根路径，注意，此句代码一定要放在 VueResource 导入之后 ...

原创 绘制新闻资讯列表页面布局

1、绘制页面，使用 MUI 中的 media-list.html2、右键查看源代码，把图片居左的代码复制到指定的 vue 文件中，这时候回报错，因为代码中的图片本地是没有的，在网页上复制一个图片地址替换它即可3、在模板里面自定义自己的内容 4、修改内容样式 ...

原创 组件切换时候的动画设置

1、在 router-view 标签外面嵌套一层 transition 动画标签2、在style 中设置动画的四个生命周期的样式 

原创 路由重定向设置

路由重定向设置

原创 MUI 九宫格改造成六宫格

1、下载mui库文件，放到项目的src下的lib文件夹中2、main.js 文件中导入 mui 样式//导入muiimport './lib/mui/dist/css/mui.min.css'import './lib/mui/dist/css/icons-extra.css'3、在mui 样例中找到九宫格案例后，右键查看源代码，复制九宫格的代码到对应的 vue 组件的对应位置...

原创 首页轮播图数据的加载

1、npm 安装 VueResource2、main.js 中导入 VueResource//导入 vue-resourceimport VueResource from 'vue-resource'Vue.use(VueResource)3、在需要的 vue 文件中访问数据，jsonp 可以解决 跨域的问题4、在网页中放置访问到的数据  ...

转载 用wamp打开进入localhost，但是无法打开localhost中的文件夹

用wamp打开进入localhost，但是无法打开localhost中的文件夹点击文件夹，显示进入www文件夹下index.php文件，搜索$projectContents .= '<li><a href="'.($suppress_localhost ?在http://加上localhost/就可以了...

原创 Mint UI制作轮播图效果

1、npm安装 mint-ui2、main.js导入mint-ui3、在对应的vue文件中添加轮播图代码4、修改轮播图的类样式，用来展示轮播图，scss样式

转载 vue-cli中配置sass

如何配置sass一、安装对应依赖node模块： 1 2 npm install node-sass --save-dev npm install sass-loader --save-dev 二、打开webpack.base.config.js在loaders里面加上 1 rules: [ 2 { 3 ...

原创 路由—tabar路由跳转设置和路由高亮

1、把 a 标签改成 router-link,并且把herf属性改成 to="" 到链接地址2、在路由设置 index.js 文件中设置路由跳转的高亮显示类，这个类是 mui 提供的3、新建四个组件文件，在 index.js 文件中导入这四个组件，并且在下面的路由配置规则中配置这四个组件的路由规则，这里的 /home 等路径是 App.vue 中路由标签设置的 to=""  地址...

原创 VUE CLI 项目构建初始化文件预览

1、index.html 页面入口2、main.js ：js入口文件3、index.js 路由文件，路由入口4、App.vue 根组件，组件入口 5、通过以上设置，components 文件中自带的 HelloWorld.vue 文件可以直接删除掉...

原创 MUI tabbar购物车小图标的制作

1、在制作底部的 Tabbar 区域，使用的是 MUI 的 Tabbal.html2、在制作 购物车 小图标的时候，操作会相对多一些；+ 先把扩展图标的 css 样式，拷贝到 项目dist目录中的css文件夹中  + 再把扩展字体库中的 扩展 ttf 文件拷贝到 项目dist目录中的fonts文件夹中+ 为购物车小图标添加如下样式：mui-icon mui-icon...