Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。
在介绍如何封装 axios 的 http 请求之前,我们先来了解下什么是 axios。axios 是通过 promise 实现对 ajax 技术 的一种封装,就像 jQuery 实现 ajax 封装一样。简单来说,ajax 技术实现了网页的局部数据刷新,axios 实现了对 ajax 的封装。平时开发 vue 项目时,不同模块都会使用 axios 请求后台的接口,代码如下:this.$axios({ method: "POST", url: "接口地址", params: { 参
随着页面数据越来越多,一次性加载所有数据会对后端服务造成压力,同时加载速度慢也会影响用户体验,所以我们通常使用分页的方式来提高性能,优化体验。很多其他博客中都是后端返回所有数据,前端再进行截取,个人认为这样并没有实现真正意义上的分页,所以本博客中由后端实现数据分页,前端只负责展示和处理。vue 分页可以通过 iView 的 Page 组件来实现,简单高效。一. vue 的 Page 组件实现前端分页1. 在 vue 文件中引入 Page 组件<template> <div&g
Modal 对话框点击确定按钮后,对话框会自动消失,如果想阻止它消失,官方给出的解决方案是给 Modal 添加属性 loading,实现方式如下所示:<template> <Button type="primary" @click="modal1 = true">展示Modal</Button> <Modal v-model="modal1" title="Title" :loading="loadi
vue组件的定义● 组件(Component)是Vue.js最强大的功能之一● 组件可以扩展HTML元素,封装可重用代码● 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能● 有些情况下,组件也可以表现用 is 特性进行了扩展的原生的HTML元素● 所有的Vue组件同时也都是Vue实例,所以可以接受相同的选项对象(除了一些根级特有的选项),并提供相同的生命周...
对vue的template(模板)编译的理解简单的说法:先转化为AST树,在得到的render函数中返回VNode(vue的虚拟DOM节点)详细步骤● 首先,通过compile编译器把template编译成AST语法树(abstract syntax tree,即源代码的抽象语法结构的树状表现形式),compile是creatCompiler(createCompiler是用以创建编译器的)的返回...
下面介绍Vue中集成的指令以及用法和作用v-bind v-on v-model v-for v-html v-text v-if v-else-if v-else v-show v-once v-pre v-cloak1、声明式渲染有两种方法A、文本插值,用两个花括号:{{内容}}html如下:<div id="app"&gt...
vue.js的核心思想包括:数据驱动和组件化思想。下面看一张关系图:如果没有中间的ViewModel则关系图编程下面所示:通过Ajax通信获得后台数据,那么要将获得数据显示在DOM上,则需要手动操作DOM节点。这是一个繁琐的过程,还很容易出错。而使用ViewModel则省去手动操作DOM 。在vue.js里面只需要改变数据,Vue.js通过Directives指令去对DOM做封装,当数据发生变化,...
vue.js的vue-cli的理解:vue-cli是Vue的脚手架工具,帮我们写好vue.js基础代码的工具,搞定目录结构、本地调试、代码部署、热加载、单元测试等工作。vue.js开发环境搭建1、安装node.js,下载地址,安装好之后需要配置node.js系统环境变量,这里要保证node.js的版本是4版本以上2、安装全局vue-cli脚手架,用于帮助搭建所需的模板框架首先:...
使用vue-cli创建的工程的相关文件介绍1、使用vue-cli安装的项目的整个文件如下图所示:下面介绍一级目录的文件夹的作用sell2是项目名;一级目录下的文件夹名build和config都是和webpack配置相关的;文件夹node_modules是通过npm install安装的依赖代码库;文件夹src用来存放项目源码,即开发的代码都放在src文件夹下;文件夹static存放第三方静...
vue中filters选项的用法filters是.vue文件中export对象中的一个选项,其类型是Object,即包含Vue实例可用过滤器的哈希表。下面讲讲filters选项的用法1、html如下<div id="app"> {{message | filters2| filters3(true,priceCount)}}</div>2、js如下var app = ...
vue中实现横向滚动不生效,如下图红圈中所示:红圈中的html在seller.vue中的<template>内容如下<div class="pics"> <h1 class="title">商家实景</h1> <!--因为图片要横向滚动,那么父级就要设定一个固定宽度--> &
Vue中内置的组件有以下几种:1)component2)transition3)transition-group4)keep-alive5)slot1)component组件:有两个属性---is    inline-template渲染一个‘元组件’为动态组件,按照'is'特性的值来渲染成那个组件2)transition组件:为组件的载入和切换提供动画效果,具有非常强的可定制性,支持16个属性和...
  1、vuex的定义1)Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式,使用插件的形式引进项目中2)集中存储和管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化3)每一个 Vuex 应用的核心就是 store(仓库),new Vue.store({...}),“store”基本上就是一个容器,它包含应用中大部分的状态 (state)...
vue中的computed的实现原理---------需要建立数据依赖搜集,动态计算实现原理1)问题:计算属性如何与属性建立依赖关系?属性发生变化又如何通知到计算属性重新计算?如何建立依赖关系?----------利用 JavaScript 单线程原理和 Vue 的 Getter 设计,通过一个简单的发布订阅,就可以在一次计算属性求值的过程中收集到相关依赖2)data 属性初始化 ge...
vue+node.js+mongodb:书城系统的项目的构建概述1、课程主要讲什么:基于全栈开发一个简易的商城系统2、课程涵盖了哪些内容:商品列表、购物车、地址、结算、订单、登录模块3、课程使用了哪些技术栈:前端使用功能vue全家桶以及ES6语法;后端使用Express框架,DB使用Mongo非关系型数据库 项目整体架构如下图所示 Webpack:代码模块化构建打包...
库和框架,vue和react的比较库:小而巧,只提供API,可以方便的从一个库切换到另外一个库,代码几乎不需要改变框架:大而全的是框架,,框架与框架之间的切换比较困难vue和react的比较一)组件化方面1)什么是模块化模块化是从代码的角度进行分析,把一些可复用的代码,抽离为单个模块,便于项目开发和维护2)什么是组件化组件化是从UI界面角度进行分析,把一些可...
多页面网站的定义:每一次页面跳转的时候,后台服务器都会返回一个新的html文件,这种类型的网站就称为多页面网站(多页面应用)优点:首屏时间快---整个页面展现出来所需要的时间 SEO效果好首屏时间快的原因:当访问一个页面的时候,服务器返回一个html,然后这个html展现出来,这个过程只经历一个http请求的过程,所以页面展现快,请求回来了,页面就展现出来了SEO效果好的...
1、在子component中的data不能是一个对象,必须是一个函数,然后该函数返回一个对象data(){ retrun { swiperOption:{} }}2、vue中,如果每个组件发生一个ajax请求,就会造成很大的性能损耗,如何操作可以降低性能损耗问题:在vue中,一个页面被拆分成多个component,如果每一个component都发生一个ajax请求,...
Vue的本质Vue的本质就是用一个Function实现的Class,然后在它的原型prototype和本身上面扩展一些属性和方法。它的定义是在src/core/instance/index.js里面定义使用ES5的方式,即用函数来实现一个class,不用ES6来实现class的原因:在ES5中,是可以往Vue的原型上挂很多方法,并且可以将不同的原型方法拆分到不同的文件下,这样方便代码的...
在vue编写的项目中,在浏览器的console报错:Invalid prop: type check failed for prop "radius". Expected Number, got String.如下图所示:在子组件progress-circle.vue的template中的定义如下: <svg :width="radius" :height="radius" viewBox=...
在vue中设置默认的路由,即一进入页面就显示其中一个路由的内容,也就是设定重定向。如下是设置默认路由的代码,即router文件夹下的index.js的内容:import Vue from 'vue';import Router from 'vue-router';import seller from '@/componentsllerller';import ratings from '@/...
在vue中给对象扩展属性的方法。如下图所示给seller对象扩展一个属性id,利用立即执行函数给id赋值                                                             图1然后将从后台返回来的数据赋值给seller对象,如下图所示:                                                       ...
在vue中实现localStorage的思路:对window.localStorage[key]对象进行封装,这样就可以实现模块化的思想(实现window.sessionStorage的思想一样)如图1是在文件store.js中对localStorage的封装:完整的代码如下://保存数据export function saveToLocal(id, key, value) {...