vue
Vue 组件开发demo
1、代码地址github：https://github.com/MengFangui/VueComponentDemo-2、关键代码（1）main.js//引入vueimportVuefrom'vue';importAppfrom'./app.vue';varapp=newVue({el:'#app',//虚拟DOMr...
Vue 过滤器filters
1、示例代码采用vue单文件组件，使用moment插件格式化日期<template><div><h1>{{date|dateFormat}}</h1></div></template><script>importmomentfrom'm...
Vue工程模板文件 webpack打包
1、githubgithub地址：https://github.com/MengFangui/VueProjectTemplate 2、webpack配置（1）基础配置webpack.base.config.js constpath=require('path');//处理共用、通用的jsconst...
Vue 进入/离开动画
1、示例代码（注：写到vue单文件中了）<template><div><buttonv-on:click="show=!show">Toggle</button><transitionname="fade"><pv-if="show">hello&...
Vue 状态管理 Vuex
1、概述Vuex作为插件，管理和维护整个项目的组件状态。 2、安装vuexcnpmi--savevuex 3、vuex使用github地址：https://github.com/MengFangui/VuexnewVue({el:'#app',router:router,//使用vuexstore:...
Vue 前端路由 vue-router
1、前端路由后端路由：多页面，服务器端渲染好返回给浏览器。前端路由：改变url不向服务器发送请求；前端可以监听url变化；前端可以解析url并执行相应操作。 前后端分离：后端只提供API来返回数据，前端通过ajax获取数据后，在通过一定的方式渲染到页面上。SPA：前后端分离+前端路由。SPA只有一个html文...
Vue webpack配置文件
一、代码地址github：https://github.com/MengFangui/VueWebpackConfig 二、配置说明1、命令（1）npmi安装依赖包（2）numrundev发布调试环境（3）npmrunbulid发布线上环境 2、功能（1）处理vue文件（2）处理js文件（3）ES6...
Vue creatElement
1、传统template写法<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"/><title>Vue</title><linkrel="stylesheet"type="text/...
Vue 虚拟DOM
虚拟DOM是基于js计算的，开销会小很多。虚拟DOM的运行过程： 组件中的template属性里的内容都会被编译为虚拟DOM。工程使用webpack编译时，template都会被编译为render函数。...
基于Vue开发的tab切换组件
github地址：https://github.com/MengFangui/VueTabSwitch1、index.html<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"/><title>基于V...
基于Vue的数字输入框组件开发
1、概述Vue组件开发的API：props、events和slots 2、组件代码github地址：https://github.com/MengFangui/VueInputNumber效果： （1）index.html <!DOCTYPEhtml><htm...
Vue $nextTick
1、概述Vue在观察到数据变化时并不是立即更新DOM，而是开启一个队列，并缓冲在同一个事件循环中发生所有数据的改变。在缓冲时会去除重复的数据，从而避免不必要的计算和DOM操作。在下一个事件循环的tick中，Vue刷新队列并执行实际（已去重）的工作。Vue是异步更新DOM（异步更新队列）。$nextTick就是知道什么时...
Vue 作用域插槽
使用场景：复用子组件的slot，又可以使slot的内容不一样。<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"/><title>Vue</title></head><b...
Vue 组件通信（组件间通信）
1、中央事件总线bus<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"/><title>Vue</title></head><body><divid="ap...
Vue slot分发内容
1、概述slot:混合父组件的内容和子组件的模板。slot分发的内容，作用域在父组件上。2、单个slot子组件使用<slot>，在父组件模板里，插入子组件标签里的内容替换子组件slot标签以及它的内容。<!DOCTYPEhtml><htmllang="zh"><head>...
