angus.dai的博客

使用到的知识点// 获取吸顶元素的domlet header = this.$refs.header;// 吸顶元素到top的距离this.offsetTop = header.offsetTop;// 元素自身的高度this.offsetHeight = header.offsetHeight;// 监听滚动条window.addEventListener("scroll", ...

helloworld<div> <div> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-vie...

Vue插槽（vue2.6及以后版本，新版插槽v-slot）默认插槽没有名字的插槽// 父组件<template> <p>默认插槽</p></template>// 子组件<slot></slot>具名插槽带名字的插槽// 父组件<template v-slot:title> ...

sync其实是一种语法糖，可以很简单的使用子组件与父组件的通信知识点：当子组件想要修改父组件数据时，只用使用 this.$emit('update:dataName', dataValue)这种方式去通知父组件，父组件上不需要做任何操作。下面上代码父组件<template> <div> <div>父组件中 {{ name }}</di...

vue的插件通常是用来添加全局功能，插件按功能分一般有：1、添加全局方法或属性2、添加全局属性：指令、过滤器、过渡3、通过全局混入来添加一些组件选项4、添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现使用插件1、使用import引入插件2、Vue.use(插件名称)开发插件Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个...

计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。而每当触发重新渲染时，调用方法总会再次执行函数。<div>计算属性方式：{{ reveres1 }}</div><div>方法方式：{{ reveresMethod2() }}</div><button @click="() => $for...

区别计算属性（computed）:改变一个或多个响应式元素的值，去修改一个响应式元素的值侦听器（watch）:改变一个响应式元素的值，去修改多个响应式元素的值实例<div> <input v-model="firstName" /> <br /> <input v-model="lastName" /> &...

使用vuex也有一段时间了，今天总结一下vuex的使用vuex有5个核心概念state ``````getter``````mutation``````action``````modulestatethis.$store.state.xxx或者使用mapStategetterthis.$store.getters.xxx或者使用mapGettermutationthis....

我们先看一下vue官方文档中对key的介绍key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。其实看完这段文档就大概知道key到底有什么用了，v...

使用keep-alive包裹动态组件时，会缓存不活动的组件。但是有些情况下希望使用keep-alive包裹的动态组件有些页面需要缓存，有些页面不需要缓存那该怎么做呢？vue的官方文档提供了include和exclude来解决这个问题。具体案例但是，还是解决不了一些特殊的问题：如一. 用户前进时，总是进入新的页面。（比如在合同列表页反复加载多次列表之后，进入其中一个合同详情，再返回时，应...

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 -->&l...

1、使用前需要在项目中安装一下vuexnpm install vuex --save 或 cnpm install vuex --save2、需要了解一下vuex是什么以及vuex提出的几个概念(1)、vuex是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。(...

vue中的ref其实功能很强大，下面介绍一下如何使用。基本用法，本页面获取dom元素<template> <div id="app"> <div ref="testDom">11111</div> <button @click="getTest">获取test节点</button> </div...

父子组件通信1、父组件给子组件传递数据，请查看下面这篇文章 vue中的prop2、子组件给父组件传递数据（一般不推荐）需要借助 emit 事件，可以传递数据和调用父组件的方法兄弟组件通信兄弟组件之间的通行需要借助第三方，如bus.jsbus.jsimport Vue from 'vue';// 使用 Event Busconst bus = new Vue();expo...

vue是一套用于构建用户界面的渐进式框架，可以快速上手。在这里我们使用vue-cli来进行vue学习。在使用vue-cli前，你需要先安装nodejs和对nodejs的npm的一些命令进行学习。安装nodejswindow上安装nodejs直接去 nodejs官网 进行下载mac上安装nodejsmac上可以先安装brewhome，然后使用brewhome下载nodejsbrew in...