Vue全家桶技术
文章平均质量分 56
骑着毛驴的小猴子
哇哇哇
展开
-
vue-cli构建vue项目
一、下载node.js (node里面提供了npm包可供我们下载各种包,因此我们先下载node.js)https://nodejs.org/en/download/下载完成之后傻瓜式安装即可(一直点下一步)安装完成检查是否安装成功 升级npm版本npm install -g npm //-g指全局安装npm是要访问国外站点的,因此速度会较慢。在安装模块时我们可以使用淘宝镜像。安装淘宝镜原创 2017-08-28 20:08:08 · 248 阅读 · 0 评论 -
vue-resource -- 全局拦截器interceptors
用于加载之前的设置loading等 代码展示目录结构interceptor.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="../../node_modules/vue/dist/vue.min.js" type=原创 2017-09-07 18:34:41 · 3139 阅读 · 0 评论 -
vue-resource实现get,post,jsonp请求
一、vue-resource概述1、 使用:引入vue-resource<script src="js/vue.js"></script><script src="js/vue-resource.js"></script>2、支持的HTTP方法 vue-resource的请求API是按照REST风格设计的,它提供了7种请求API:get(url, [options])head(url, [op原创 2017-09-07 17:57:53 · 2835 阅读 · 0 评论 -
vue-router -- 命名路由和命名视图
说明:vue-router的几个文章中例子是连贯的,因此对哪块有疑问请翻阅按发表时间排序的其他文章。 一、概述给路由定义不同的名字,根据名字进行匹配给不同的router-view定义名字,router-link通过名字进行对应组件的渲染。二、代码展示:目录视图 1、命名路由 2、命名视图index.jsimport Vue from 'vue'import Router fr原创 2017-09-07 15:58:12 · 9265 阅读 · 0 评论 -
vue-router -- 编程式路由
一、概述通过JavaScript实现页面跳转相关函数 $router.push(“name”);$router.push({path:”name”});$router.push({path:”name”?a=123}); //传参$router.push({path:”name”,query:{a=123}});$router.go();参数查询:$router.query.[参数名原创 2017-09-07 15:24:58 · 4425 阅读 · 0 评论 -
vue-router -- 嵌套路由
一、概述路由嵌套路由使用场景: name找用户,用户找对应的信息 二、代码演示目录结构 goods.vue<template> <div> 商品列表 <router-link to="/goods/title">标题</router-link> <router-link to="/goods/img">图片</router-li原创 2017-09-07 13:40:25 · 522 阅读 · 0 评论 -
vue-router -- 动态路由匹配
一、概述使用场景: 根据商品的id返回指定商品的详情页匹配规则 模式 匹配路径 $route.params /user/:username /user/Jack {username=’Jack’} /user/:username/post/:post_id /user/Jack/post/123 {username=’Jack’,post_id=’123’}二原创 2017-09-07 13:14:53 · 7697 阅读 · 0 评论 -
前端路由 -- vue-router
一、概念1、 什么是前端路由?路由是根据不同的URL来展示不同的内容或页面前端路由就是把不同路由对应的不同页面或内容的展示交给前端来做(真正实现前后端分离),以前都是通过服务器端来根据URL的不同返回不同的页面,那些页面在服务端都是实实在在存在的,而前端路由就是只有一个index,其余页面是根据组件等进行渲染的,虚拟页面。2、什么时候使用前端路由?在单页面应用程序中,大部分页面结构不变,只改原创 2017-09-07 12:58:16 · 324 阅读 · 0 评论 -
vue实现数据双向绑定原理剖析
一、对象.define 属性()该Object.defineProperty()方法直接在对象上定义一个新属性,或修改对象上的现有属性,并返回该对象。语法:Object.defineProperty(obj, prop, descriptor)参数说明: obj 定义属性的对象。prop 要定义或修改的属性的名称。descriptor 定义或修改属性的描述符。返回值 传递给函数的原创 2017-09-07 11:04:56 · 348 阅读 · 0 评论 -
vue实现父子双向通信
父组件通过props向子组件传递数据子组件用emit向父组件传递数据父子组件同时操作同一个数,进行加运算与减运算子组件 counter.vue<template> <div> <button v-on:click=increament>+</button> <button @click=decreament>-</button> <p>原创 2017-08-28 20:21:05 · 559 阅读 · 0 评论 -
vue目录结构
一、目录结构 二、目录解析转载 2017-08-28 20:12:16 · 288 阅读 · 0 评论 -
面包屑设计
一、什么是面包屑 面包屑是作为辅助和补充的导航方式(secondary navigation scheme),它能让用户知道在网站或应用中所处的位置并能方便地回到原先的地点。 最常见的面包屑的样式是:横向的文字链接,由大于号“>”分开,这个符号也暗示了它们的层级关系。【 面包屑的分类】基于用户所在的层级位置。(Location-based) 基于位置的面包屑用于告知用户在当前网站中所在的结转载 2017-09-08 11:52:54 · 939 阅读 · 0 评论