Vue.js
文章平均质量分 55
My_Bells
Not all heroes wear capes
展开
-
Vue单元测试框架选取
单元测试:关注应用中每个零部件的正常运转,防止后续修改影响之前的组件。TDD:测试驱动型的开发方式,先写测试代码,之后编写能通过测试的业务代码,可以不断的在能通过测试的情况下重构。BDD:行为驱动型,测试代码的风格是预期结果,更关注功能,看起来像需求文档。vue test utils:https://vue-test-utils.vuejs.org/zh/vue test utils推荐:Jest/mocha-webpackjestmochagithub stars35.原创 2021-10-08 15:38:50 · 617 阅读 · 0 评论 -
vue实现浏览器跳转真实URL隐藏的方法
背景2020Q1需求中有一段关于浏览器URL地址隐藏的需求如下:需将系统的URL地址需要进行加密处理。a)IP地址后面的信息需要控制为不能按照意思猜到或者改变页面内容,不能把一些参数的名称和值都在URL地址栏中暴露出来,需以不可表意的乱码展示;b)加密后的链接复制后不能打开同一页面,且同一功能每次打开时的URL链接需不同;以上描述总结下来共有以下几个规则:IP地址后的路径需要乱码显示...原创 2020-03-17 21:37:01 · 11370 阅读 · 10 评论 -
Vue响应式源码分析
1. 初始化处理2. 收集依赖3. 更新视图原创 2020-03-10 10:49:12 · 179 阅读 · 0 评论 -
Vue源码分析-自定义事件处理
Vue.js中有四个事件API可以用来处理自定义事件,分别是$on,$once,$off,$emit。初始化当引入Vue.js时会给Vue Function原型上绑定一些方法和属性。源码在vue-2.6.11/src/core/instance/index.jsfunction Vue (options) { this._init(options)}initMixin(Vue)s...原创 2020-01-13 15:41:37 · 367 阅读 · 0 评论 -
element中table操作按钮展示与折叠的实现
element UI中table操作按钮展示与折叠的实现原创 2019-11-25 18:01:53 · 8748 阅读 · 5 评论 -
记一次vue项目打包时出现的throw new Error('Cyclic dependency: '+JSON.stringify(node))问题
记一次vue项目打包时出现的throw new Error('Cyclic dependency: '+JSON.stringify(node))问题原创 2019-11-25 12:32:20 · 2246 阅读 · 0 评论 -
Vue Loader总结(9)
1.什么是vue loaderVue Loader 是一个 webpack 的 loader,它可以将.vue文件转换为webpack能够处理的有效模块:<template> <div class="example">{{ msg }}</div></template><script>export default { ...原创 2019-09-24 10:48:57 · 1223 阅读 · 0 评论 -
Vue CLI配置项总结(8)
vue.config.jsconst webpack = require("webpack");module.exports = { //baseUrl,从 Vue CLI 3.3 起已弃用,请使用publicPath。 // 项目部署的基础路径 // 我们默认假设你的应用将会部署在域名的根部, // 比如 https://www.my-app.com/ // 如果你...原创 2019-09-17 14:48:14 · 450 阅读 · 0 评论 -
Vue-Cli查漏(7)
1.介绍CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令。它可以通过 vue create 快速创建一个新项目的脚手架,或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包,局部安装在每个 @vue/...原创 2019-09-16 14:46:44 · 632 阅读 · 0 评论 -
Vue Router API总结(6)
1.守卫分类全局守卫:router.beforeEach((to, from, next) => { /* 必须调用 `next` */})router.beforeResolve((to, from, next) => { /* 必须调用 `next` */})router.afterEach((to, from) => {})路由配置中的守卫:c...原创 2019-09-12 17:45:49 · 735 阅读 · 0 评论 -
Vue Router查漏(5)
vue-router查漏原创 2019-09-12 15:38:48 · 183 阅读 · 0 评论 -
解决:[Vue warn]: Unknown custom element: router-link, [Vue warn]: $listeners and $attrs is readonly
解决一下错误:1.[Vue warn]: Unknown custom element: <router-link>2.[Vue warn]: $listeners and $attrs is readonly原创 2019-09-10 11:17:05 · 4700 阅读 · 0 评论 -
Vuex-总结(4)
vuex官网总结。1. 使用vuex2. State3. Getters4. mutation5. Action6. Mutation与Action差异7. Module原创 2019-09-03 10:42:29 · 266 阅读 · 2 评论 -
Vue API-找出知识盲点(3)
API1. Vue.nextTick( [callback, context] )2. Vue.use( plugin )3. Vue.observable( object )4. data5. propsData6. watch7.provide / inject8.name9.delimiters10.model11. inheritAttrs12. vm.$attrs13. vm.$listeners14. vm.$forceUpdate()15. keep-alive原创 2019-08-22 11:13:36 · 195 阅读 · 0 评论 -
再战Vue官网-找出知识盲点(2)
1.自定义事件事件名不同于组件和 prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的),所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。自定义组件的 v-model 2.2.0+ 新增一个组...原创 2019-08-16 17:33:00 · 147 阅读 · 0 评论 -
再战Vue官网-找出知识盲点(1)
1. 动态参数2.6.0 新增从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数:<!-- 这会触发一个编译警告 --><a v-bind:['foo' + bar]="value"> ... </a>变通的办法是使用没有空格或引号的表达式,或用计算属性替代这种复杂表达式。另外,如果你在 DOM 中使用模板 ...原创 2019-08-14 18:12:18 · 205 阅读 · 0 评论 -
vue中使用loadsh的debounce防抖函数
<s-input placeholder="请输入查询关键字" prefix-icon="magnifier" v-model="content"></s-input> <script> import {debounce} from 'lodash' export default { watch: { cont...原创 2019-07-10 17:56:28 · 4649 阅读 · 0 评论 -
vue 动态插入组件实例
<div id="app"> <p>{{ message }}</p> <button @click="add('a-component', '我是A')">添加A组件</button> <button @click="add('b-component', '我是B')">添加B组件</button>...原创 2019-05-27 10:48:54 · 3663 阅读 · 0 评论