随笔分类 - vue相关
摘要：定义： 当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值。 为什么要使用computed 首先，通过vue官方文档的案例，来解释一下，为什么要使用computed。我们都知道，在模板内的表达式非常遍历的，但是，有时候，我们会在模板内的放入太多逻辑的东西。会让模板变重，且难
阅读全文
摘要：Vue.js 有一个方法 watch，它可以用来监测Vue实例上的数据变动。 如果对应一个对象，键是观察表达式，值是对应回调，值也可以是方法名，或者是对象，包含选项。 下面写两个demo，参考例子来了解一下 1 <template> 2 <div> 3 <el-input v-model="demo
阅读全文
摘要：1、vue的生命周期图 在vue实例的整个生命周期的各个阶段，会提供不同的钩子函数以供我们进行不同的操作。先列出vue官网上对各个钩子函数的详细解析。 生命周期钩子 详细 beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前
阅读全文
摘要：当混合里面包含异步请求函数，而我们又需要在组件中使用异步请求函数的返回值时，我们会取不到此返回值，如下： mixin中 组件中 控制台 解决方案：不要返回结果而是直接返回异步函数 mixin中 组件中 控制台
阅读全文
摘要：mixins基础概况 vue中的解释是这样的，如果觉得语言枯燥的可以自行跳过嘿~ 混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。 举个栗子： 定义一个混入对象 把混入对象
阅读全文
摘要：前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 针对不同的使用场景，
阅读全文
摘要：今天面试被问到这个问题，我自己思考的是让父组件做两个子组件之间的桥梁，但是我并没有去说，感觉是有些low啊，面试完了赶紧查查是怎么通信的； 就是我自己设想的这种方法也是解决问题的一种方法； 兄弟组件通讯 在Vue中实现兄弟组件的通讯也有几种方法，其中一种方法是让父组件允当两个子组件之间的中间件（中继
阅读全文
摘要：static和assets的区别，原理就在于webpack是如何处理静态资源的 assets 1）在vue组件中，所有模板和css都会被vue-html-loader和css-loader解析，并查找资源url。 例：<img src="./logo.png" /> 或者 background: u
阅读全文
摘要：vue中的watch监听，除了监听data中的数据 还可以监听props、$route、$emit、computed watch:{ //监听路由变化 $route( to , from ){ console.log( to , from ) // to , from 分别表示从哪跳转到哪，都是一个
阅读全文
摘要：beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不能获取组件实例 `this` // 因为当钩子执行前，组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当
阅读全文
摘要：this.$router.push跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面 // 字符串 this.$router.push('index') // 对象 this.$router.push({path: 'login-pw'}) // 带参数 this.
阅读全文
摘要：1.导航被触发2.在即将离开的组件里调用beforeRouteLeave守卫3.调用全局前置守卫beforeEach守卫4.在重用的组件里调用beforeRouteUpdate守卫 / 调用路由配置的beforeEnter守卫5.解析异步路由组件6.在被激活的组件里调用beforeRouteEnte
阅读全文
摘要：active-class是哪个组件的属性 active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换 在vue组件中怎么获取到当前的路由信息 如果是template中获取直接 $route 即可如果是script中获取 this.$route可以 c
阅读全文
摘要：vue-router 页面切换后保持在页面顶部而不是保持原先的滚动位置的办法：https://www.cnblogs.com/kugeliu/p/7172042.html vue-router有提供一个方法scrollBehavior，它可以使切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位
阅读全文
摘要：问题：为什么要响应参数变化？ 切换路由，路由参数发生了变化，但是页面数据并未及时更新，需要强制刷新后才会变化。 路由后面参数不同渲染相同的组件时（组件复用比销毁重新创建效率要高），在切换路由后，当前组件下的生命周期函数不会再被调用。 解决方案： 使用 watch 监听 watch: { $route
阅读全文
摘要：keep-alive <keep-alive>包裹动态组件的时候，会缓存不活动的组件实例，而不是摧毁他们。其是一个抽象的组件，自身不会渲染一个DOM元素，也不会出现在父组件链中。说白了被<keep-alive>包裹的组件其会被缓存废话不多说直接上例子. 我们现在创建两个子组件conpoment1,c
阅读全文
摘要：1.beforeCreat 第一个生命周期函数，表示实例在完全创建出来之前会执行它，在执行它时，data和methods中的数据都还未初始化。 2.created 第二个生命周期函数，此时data和methods已经初始化完成，created()完成之后，vue开始编译模板，最终在内存中生成一个编译
阅读全文
摘要：今天对这个问题做一个总结 一、Vue的初始化 我们在使用Vue.js的时候，最基本的一个使用，就是在HTML引入Vue.js的库文件，并写如下一段代码： 1.var app = new Vue({ 2. el: '#app', 3. data: { 4. message: 'Hello Vue!'
阅读全文
摘要：背景： 在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去； 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.definePropert
阅读全文
摘要：有这样的需求，父组件绑定v-model，子组件输入更改父组件v-model绑定的数值。是怎么实现的呢？ 实际上v-model 只是语法糖而已 <input v-model="inputValue" /> <input v-bind:value="inputValue" v-on:input="inp
阅读全文
