Vue
文章平均质量分 94
...
探鱼不是鱼
这个作者很懒,什么都没留下…
展开
-
手写分页器
<template> <div class="paginationContainer"> <button :disabled="current === 1">上一页</button> <button v-if="startEnd.start > 1" @click="current = 1" :class="{ active: current === 1 }" > 1原创 2020-12-26 00:07:17 · 175 阅读 · 1 评论 -
vue组件间通信11种方式
组件间多种通信方式组件间通信1: props组件间通信2: vue自定义事件组件间通信3: 事件总线组件间通信4: v-model组件间通信5: .sync 属性修饰符组件间通信6: attrs与attrs与attrs与listeners组件间通信7: children与children与children与parent组件间通信8: provide与inject组件间通信9: vuex组件间通信10: 作用域插槽slot-scope11.组件间通信11:PubSub 项目中不会使用原创 2020-12-22 00:26:09 · 318 阅读 · 0 评论 -
Vue后台项目知识点总结
ES6暴露默认导出/* 默认导出,只能有一个 */const a = 1;// const b = 2;export default a;// export default b默认暴露实际暴露的内容:{default: 1}当你 import result from ‘./xxx’ 引入时实际相当于 import { default as result } from ‘./xxx’ 写法import result from "./test/es-module/test1";原创 2020-12-18 00:18:54 · 757 阅读 · 0 评论 -
vue项目常用知识精简版
基础准备技术选型1). 前台数据处理/交互/组件化2). 前后台交互3). 模块化4). 项目构建/工程化5). css预编译器6). 其它接口相关理解1). 接口、API - 简单理解:前后端通信的地址 - 复杂理解:包含请求地址、请求方式、请求参数、响应的结果等所有内容才是一个完整接口 - vue接口文档:vue向外暴露的功能方法、属性等2). 接口文档3). 对/调/测接口 / 联调4). 前后台分离5). mock数据/接口git 版本控制的基原创 2020-12-02 00:07:01 · 246 阅读 · 2 评论 -
Vue项目基础配置以及常见知识点积累
全局安装vuenpm i -g vue全局安装@vue/clinpm i -g @vue/cli全局安装serve快速运行打包生成的文件,运行服务器启动在dist下文件npm i -g serve创建项目Your connection to the default yarn registry seems to be slow.Use https://registry.npm.taobao.org for faster installation?你到默认纱线注册表的连接似乎很.原创 2020-11-30 00:21:14 · 1279 阅读 · 0 评论 -
vuex
vuex是什么github站点: https://github.com/vuejs/vuex在线文档: https://vuex.vuejs.org/zh-cn/简单来说: 对vue应用中多个组件的共享状态进行集中式的管理(读/写)状态自管理应用state: 驱动应用的数据源view: 以声明方式将state映射到视图actions: 响应在view上的用户输入导致的状态变化(包含n个更新状态的方法)流程actions函数内部调用commit触发某个mu原创 2020-11-30 00:20:24 · 3202 阅读 · 0 评论 -
Vue响应式原理 源码解析
响应式原理数据代理:将 data 中的数据代理 this 上,访问数据更方便详细版将 data 数据赋值给变量 data 和 this._data 上,这种数据称为原数据通过 Object.keys 方法提取原数据的所有属性名成为一个数组遍历这个数据,调用 _proxy 对每一个属性名进行数据代理所谓数据:就是通过 Object.defineProperty 方法给 this 定义这个属性,设置属性的元属性(属性描述符)元属性中定义数据的是否可枚举,是否可以重新配置,以及 get 属原创 2020-11-26 00:49:15 · 153 阅读 · 0 评论 -
自定义on/once/off/emit
class EventEmmiter { constructor() { // 存储事件的容器 this._events = { // eventName: [listener1, listener2...] }; } // 绑定事件 on(eventName, listener) { if (this._events[eventName]) { // 说明之前添加过事件 this._events[eventName].p原创 2020-11-25 00:41:37 · 275 阅读 · 0 评论 -
vue-router 路由传参方式/缓存路由/路由跳转
下载下载包yarn add vue-routerviews组件About和Home组件<template> <h1>About</h1></template><script>export default { name: 'About',};</script><style></style>src下定义router文件夹// 因为要安装到Vue上面import Vu原创 2020-11-22 00:44:57 · 1625 阅读 · 1 评论 -
Vue基础知识精简总结
Vue渐进式 JS 框架MVCM - Model 数据层(数据库)V - View 视图层(页面、ejs)C - Controler 控制层(路由)MVVMM - Model 数据层(data、computed…)V - View 视图层(模板页面)VM - ViewModel 视图模型层(vm 实例对象)数据能由 ViewModel 操作渲染到视图层上(当数据将来发生修改,自动重新渲染到视图层上-响应式)页面数据发生变化,能由 ViewModel 操作来修改数据层的原创 2020-11-30 00:12:53 · 721 阅读 · 1 评论 -
Vue基础入门
入门介绍渐进式JavaScript框架作用:动态构建(显示)用户界面特点遵循MVVM模式编码简洁,体积小,运行效率高,适合移动/pc端开发它本身只关注UI,可以轻松引入VUE插件或其他第三方库开发项目借鉴angular的模板和数据绑定技术借鉴react的组件化和虚拟DOM技术MVC/MVVMMVCModel 数据层View 视图层Controller 操作层 数据由控制层去操作,读取数据层的数据,渲染到视图层的页面上,返回MVVMModel原创 2020-11-17 00:38:57 · 396 阅读 · 0 评论 -
Vue-cli 脚手架使用/自定义脚手架/错误解决/跨域解决
说明vue-cli是vue官方提供的脚手架工具 command line interface client最新的版本是4,3.x版本与4.x版本变化不大, 但3.x相对于2.x的版本变化特别大在线文档: https://cli.vuejs.org/zh/创建脚手架4/3的vue项目, 并运行npm install -g @vue/clivue create vue-demonpm run serve创建脚手架2的vue项目npm install -g @vue/cli-init原创 2020-11-16 23:19:35 · 1459 阅读 · 0 评论