星辰之嗨的博客

如何解决vue-resource中出现的Failed to load http://localhost:8000/index: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response。问题描述：在配置服务器时设置res.header("Acc...

在单页面项目中，通常会将一部分视图抽象成一个组件（就好似面向对象语言中的类），将要显示的文字或者其他的信息设置成组件的变量，这样就可以在使用时，只需要考虑变量了而不用考虑内部是怎样的。当然了这些只是我的看法。下面来看看在vue中如何自定义组件，在这里以异步加载组件为例来说明，具体步骤分三步：首先将视图抽象化：<template> <div class="more" ...

由于在项目中会加载大量的图片，因此需要使用懒加载技术，虽然网上有很多关于vue的懒加载的插件，如vue-lazyload。但是希望能在项目中通过自定义的组件和一些vue的语法糖去完成，而不是需要时就导入插件，那样学到的东西会很少。关于vue指令的知识请参考官方文档。在这里我只是介绍一下我写的简单的懒加载指令:directives: { lazy:{ inserted (el...

分页是WEB开发中很常用的功能，尤其是在各种前后端分离的今天，后端API返回数据，前端根据数据的count以及当前页码page来计算分页页码并渲染到页面上已经是一个很普通很常见的功能了。分页大多数情况下（基本上）是对异步请求数据的处理，因此需要弄明白分页的流程：请求API，然后返回第一页的数据以及相关条件下的数据总数将数据总数传给组件的属性total，并计算页码后渲染到页面上通过点击上一页...

在使用自定义的lazyload指令后，发现在webkit内核的浏览器中，网络图片请求失败，一直报403的错误，如图所示：然后在网上搜索了一下，发现只要在index.html中的head中添加<meta name="referrer" content="no-referrer" />就可以了。关于referrer的介绍可以参考https://www.jianshu.com/p/b12...

由于原生的单选框的样式太丑，在网页中使用与整体的样式不搭配。因此需要自定义样式实现功能自定义v-model，使组件之间数据能够进行双向绑定。使用disabled属性禁用radio。使用label属性定义radio的值。当用户点击radio时触发组件上绑定的change事件。代码实现template<template> <label role="radi...

今天在创建一个兼职后台管理系统的vue项目时，由于在事先更新了vue-cli和vue。一番操作之后出现了’webpack-dev-server’ 不是内部或外部命令，也不是可运行的程序或批处理文件的问题最后发现在项目文件夹下没有node_model子文件夹，通过cnpm install之后就行了。如果install之后还不行就将项目文件夹下的node_model文件夹删掉之后再输入命令。...

整体界面如下：在点击插入链接等快捷方式后，当点击清除后，发现页面上的内容并没有被清除掉。点击清除前：点击清除后：因此想到了.sync修饰符，但是在查看官网后发现不能与v-model一起使用。最后发现v-model语法糖实际上隐藏了双向绑定的特性，当在子组件中textarea的value换成v-mode将一切正常了。关于vue组件通信源码...