qq_39225271的博客

axios基本使用axios请求方式axios使用安装简单使用axios发送并发请求全局配置常见的配置选项axios实例axios封装axios拦截器axios请求方式axios(config):默认为get请求axios.get(),axios.post(),axios.delete()等等axios使用安装npm install axios --save简单使用导入axios，然后调用，默认为get请求import axios from 'axios'axios({ url:'

这里写目录标题网络请求模块选择jsonpJSONP的封装axios特点网络请求模块选择选择一：传统的Ajax是基于XMLHttpRequest为什么不用：配置调用方式混乱，编码复杂选择二：jQuery-Ajax相对于传统的Ajax非常好用为什么不选择：整个Vue开发中都不需要jQuery，为了网络请求引入jQuery不合理选择三：官方在Vue1.x时退出Vue-resource体积相对jQuery小很多，但是Vue2.x后不再更新vue-resource，以后的项目开发维护存在隐患选择四：

VuexVuex概念状态管理管理什么状态单页面状态管理Vuex使用添加插件使用Vuex步骤Vuex状态管理图例Vuex概念Vuex是一个专为vuejs应用程序开发的状态管理模式，他采用集中式存储管理，状态可以理解为变量状态管理理解为多个变量需要共享，可以创建一个对象看作一个管家，多个组件需要使用时进行获取，集中式存储管理即一起管理状态（变量）这个管家对象数据是响应式的可以自己封装一个对象来实现变量共享，但是无法做到响应式，所以创建了Vuex管理什么状态多个组件共享状态：例如登陆状态，用户名

属性gettersmutations定义与更新方式参数问题提交风格getters类似于单个组件中的计算属性默认参数为state，参数可以添加getters，但是不能添加其他在store中定义gettersgetters:{ powerCounter(state){ return state.count*state.count; } },使用时：<h2>{{$store.getters.powerCounter}}</h2>state

promise的使用promise的使用过程promise的三种状态promise的链式调用all方法使用promise的使用过程//参数：函数（resolve, reject） //resolve, reject本身又是函数 new Promise((resolve, reject)=>{ //成功时调用resolve resolve() }).then( data =>{ console.log('Hello world'); })new Pr

vue-router$route和 $router的区别导航守卫$route和 $router的区别$route表示活跃的路由$router表示vue-router对象导航守卫

vue-router动态路由路由懒加载vue-router打包文件解析路由懒加载的使用嵌套路由router-link传递参数配置动态路由——params使用querybutton传递参数使用query使用params动态路由在设置路由映射关系时：后面使用：添加拼接内容{ path:'/user/:userId', component:User }在使用时：动态获取userId的内容，使用v-bind，然后进行字符串拼接<router-link v-bind:

vue-routervue-routervue-router的安装vue-router的配置index.js文件vue实例中使用配置路由的映射关系设置默认路径——重定向修改为html5的history模式router-link属性补充代码跳转路由vue-routervue-router是基于路由和组件的，将url路径和组件映射起来，在单页面中，页面路径的改变就是组件的切换vue-router的安装在不使用脚手架vueCLI时，通过webpack进行安装npm install vue-router

vue-router路由前端渲染，前端路由和后端渲染，后端路由后端渲染，后端路由前后端分离阶段单页面富应用（SPA）修改页面不刷新url的hashhtml5的history路由路由是通过互联网的网络把信息从源地址传输到目的地址的活动前端渲染，前端路由和后端渲染，后端路由后端渲染，后端路由在输入路径url向服务器请求页面时，服务端已经通过css+html+java渲染了一个页面，直接将页面给浏览器显示，就是后端渲染。浏览器将url提交给服务器，服务器对url进行解析，通过css+ html+jav

vueCLI3vueCLI3创建项目vueCLI3目录结构vueCLI3创建项目vueCLI3基本上零配置vue create vuecli3learn然后pick a preset选择一个配置，这里选择Manually select features来手动选择配置，（空格选择取消），选择完成回车这里选择单独的配置文件便于修改选择n，如果选择了向想删掉，vueCLI3目录结构...

vuejsruntimecompiler和runtimeonly区别vue程序运行过程两者区别render函数runtimecompiler和runtimeonly区别vue程序运行过程两者区别两个区别只在main.js里面runtimeonly的箭头函数相当于function(h){ return h(App)}可见两者区别在于：runtimecompiler：template->ast->render->vdom->uiruntimeonly:rend

这里写目录标题一级目录二级目录三级目录一级目录二级目录三级目录

vueCLIvueCLI介绍vueCLI的前提——node，webpackvueCLI的安装vueCLI介绍如果是小的demo程序，不需要使用VueCLI，但是如果是开发大型项目，必然需要使用VueCLI，因为大型应用需要考虑代码目录结构，项目结构部署，热加载等等CLI是Command Line Interface翻译为命令行界面俗称脚手架VueCLI是官方发布vuejs项目的脚手架使用vueCLI可以快速搭建Vue开发环境和对应的webpack配置vueCLI的前提——node，webpack

这里写目录标题搭建本地服务器安装 webpack-dev-server配置运行方式终止方式配置文件的分离base.config.jsdev.config.jsprod.config.js解释安装webpackMerge使用webpackMerge结果调用——修改配置文件package.json运行文件路径问题webpack提供了一个可选的本地开发服务器，基于nodejs搭建，内部使用express框架，可以实现让浏览器自动刷新修改后的结果搭建本地服务器暂时缓存到内存，没有添加到磁盘中安装 webpa

插件plugin和loader的区别plugin的使用过程添加版权声明的plugin打包html的plugin安装配置添加模板添加模板运行结果对js文件进行压缩（丑化）安装配置丑化结果plugin是对于现有架构进行扩展plugin和loader的区别loader主要用于转换某些类型的模块，是一个转换器plugin是插件，对webpack本身的扩展，是一个扩展器plugin的使用过程1，通过npm进行安装2，在webpack.config.js中的plugins中配置插件添加版权声明的plug

配置Vue下载使用vue真实代码el和template区别代码抽取抽取一抽取二抽取三安装vue-loader vue-template-compiler配置下载下载特定版本npm install vue@2.6.11 --save使用vue//后面必须是小写的vueimport Vue from "vue"const app = new Vue({ el:"#app", data:{ message:"我是message", },})<div id="ap

webpack基本使用loader使用css文件处理安装css loader配置css loader安装style-loader配置style-loader提示test: /\.css$/use: [ 'style-loader', 'css-loader' ]less文件的处理添加依赖安装less-loader less配置图片文件的处理安装 url-loader配置提示options: { limit: 8192 }安装file-loader图片找不到问题解决方法打包后的图片有一定的格式配置ES6转

webpack使用webpack起步webpack配置webpack起步dist文件夹保存打包的文件，src存放源文件src中三个js文件使用模块化，想在index文件中调用，如果直接使用< script src="./src/main.js"></ script>由于浏览器不能识别commonJs代码，所以不能运行成功可以通过webpack对文件打包成浏览器能够识别的文件，执行如下:终端Terminal通过cd进入指定文件夹（cd 文件名表示进入文件，cd …表示退到

webpackwebpack的安装webpack的安装

插槽与前端模块化插槽插槽的基本使用具名插槽的使用作用域插槽前端模块化CommonJs（需要node环境才能实现）ES6模块化（type="module" export和import）导出语法导入语法使用default使用全部导入插槽插槽的基本使用将按钮替换到组件中的插槽中，如果没有命名，就会将所有都替换到所有没有名字的插槽中<div id="app"> <cpn><button>按钮2</button></cpn> <cpn&

组件通信父子组件通信父传子——props父子组件通信父传子——props

组件化开发组件化的实现和使用步骤（vue1.x方法实现）全局组件和局部组件父组件和子组件注册组件的语法糖写法（vue2.x后方法方法实现)组件模板抽离scripttemplate组件存放数据data必须是一个函数原因1，函数例子2，解释组件化的实现和使用步骤（vue1.x方法实现）组件化是vuejs的重要思想，可以开发出一个个独立可复用的小组件来构造我们的应用，任何的应用都会被抽象成一颗组件树。组件的使用分为三个步骤：创建组件构造器（调用Vue.extend()方法），注册组件（调用Vue.compo

vue语法v-modelv-model基本使用v-model原理v-model与radiov-model与checkboxv-model修饰符lazynumbertrim对于用户信息shangxiang提交需要大量的表单，vue使用v-model来实现表单元素和数据的双向绑定v-model="message"来表示表单域message进行绑定v-modelv-model基本使用<body><div id="app"> <input type="text" v-m

购物车案例过滤器index.htmlmain.jsstyle.css实现要求如下：性能：能够修改购买数量按钮数量为自然数，移除操作会将一行移除，根据操作，下面的总价格会随之改变。基础数据存储为对象数组如下：books:[ { id:1, name:"<<算法导论>>", date:'2010-1', price:20, count:1 }, {

vue语法v-ifv-elsev-else-if用户登陆切换v-showv-for遍历数组遍历对象数组的哪些方法是响应式的非响应式响应式pushpopshiftunshiftsplicesortreversev-ifv-if后面的条件为true，对应的子元素及其子元素才会被渲染<body><div id="app"> <h2 v-if="true">{{message}}</h2> <h2 v-if="false">{{messag

这里写目录标题一级目录二级目录三级目录计算属性一级目录二级目录三级目录计算属性computed来计算属性<div id="app"> <h2>{{fullName}}</h2></div><script src="../js/vue.js"></script><script> const app = new Vue({ el:'#app', data:{ firstNam

Vue语法插值语法Mustache语法v-oncev-htmlv-textv-prev-cloak动态绑定基本使用动态绑定class对象语法数组语法动态绑定style对象语法数组语法综合例子首先我们需要new一个vue对象来实现对特定id得模块进行操作，el表示模块的id（为字符串），data表示用到的数据（为对象），还包含methods等等<script> const app = new Vue({ el:'#app', data:{ message:"你好

Vuevuejs下载1，使用cdn引入2，下载引入3，npm安装认识vuejsvue语法Mustache语法动态绑定动态绑定class动态绑定style综合例子计算属性vuejs下载1，使用cdn引入//开发版本<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>//生产版本<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"&g