angus.dai的博客

使用到的知识点 // 获取吸顶元素的dom let 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``````module state this.$store.state.xxx 或者使用mapState getter this.$store.getters.xxx 或者使用mapGetter mutation this....

我们先看一下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、使用前需要在项目中安装一下vuex npm install vuex --save 或 cnpm install vuex --save 2、需要了解一下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中的prop 2、子组件给父组件传递数据（一般不推荐） 需要借助 emit 事件，可以传递数据和调用父组件的方法 兄弟组件通信 兄弟组件之间的通行需要借助第三方，如bus.js bus.js import Vue from 'vue'; // 使用 Event Bus const bus = new Vue(); expo...

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