天心天地生的博客

computed 计算属性只有在相关的数据发生变化时才会改变要计算的属性，当相关数据没有变化是，它会读取缓存。1、watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。当处理页面的数据变化时，我们有时候很容易滥用watch， 而通常更好的办法是使用computed计算属性，而不是命令式的watch回调。

路由懒加载当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。首先，可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件...

什么是Vuex在Vue官方网站的解释是： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 。使用Vuex常见的关键词store：仓库容器， 包含应用中大部分的状态 (state)state：数据状态mutations：更改 Vuex 的 store 中状态的唯一方法是提交...

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。使用vue框架，需要在合适的时机做合适的事情，了解了vue对象的生命周期和钩子函数，才能知道，哪些事情应该咋哪个函数里做。Vue生命周期经历哪些阶段：总...

vue项目中，前端与后台进行数据请求或者提交的时候，如果后台没有设置跨域，前端本地调试代码的时候就会报“No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” 这种跨域错误。搜素资料，发现方式五花八门，什么修改config/index.js中的配置，但是我的项目里面根本就没有这文件夹，大多都是过...

vue-cli3按照官网教程配置搭建后，发现每次编译，eslint都抛出错误error: Expected indentation of 4 spaces but found 0 (indent) at src\views\User.vue:26:1:1 error found.1 error potentially fixable with the `--fix` option.You...

title: Vue 自定义组件categories:Vuedate: 2019-10-22 21:23:14tags:组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。创...

为什么要有props验证但是上面这种方式是建立在大家都很遵守约定的情况下的，想象一下当有一个人要使用foo-component组件的时候，他可能对于其要接受的参数有什么要求并不是很清楚，因此传入的参数可能会在开发子组件的人的意料之外，程序就会发生错误，就像我们在函数调用之前先检查一下函数一样，props也可以进行一个预先检查。平时调用函数的时候在函数开头的地方都是一坨糊糊的参数检查，这种写法很...

使用vue-cli（脚手架工具版本）：3.0.0-rc.5目录结构截图：简要说明：index.html文件入口src放置组件和入口文件node_modules为依赖的模块config中配置了路径端口值等build中配置了webpack的基本配置、开发环境配置、生产环境配置等main.js 入口文件main.js 是入口文件，主要作用是初始化vue实例并使用需要的插件impor...

本文主要介绍了vue中使用路由进行页面的跳转时,vue的路由如何传递参数,第二个页面如何获取参数.一. 通过router-link进行跳转<router-link:to="{path: 'yourPath', params: { name: 'name', dataObj: data},query: { name: 'name', ...

1、$emit子组件调用父组件的方法子组件调用父组件的方法并传递数据注意：子组件标签中的时间也不区分大小写要用“-”隔开子组件：<template> <button @click="emitEvent">点击我</button></template><script> export default { data(...

种类父组件跟子组件通信子组件跟父组件通信兄弟组件之间的通信一.父组件如何将数据传到子组件中可以通过prop将数据传递给子组件需要注意的是prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改...

title: vue常用指令categories:Vuedate: 2019-10-19 23:10:39tags:指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。数据绑定表达式“{{}}...

问题描述: 路由进行页面的跳转时,使用query进参数传递,query中存储一个较为复杂的对象,页面初次载入时数据可以成功获取,刷新页面后数据显示{accountInfo: &quot;[object Object]&quot;}#代码示例路由跳转代码if (data.code === 200) { this.$router.push({ name: 'admin/', ...

本文主要介绍了vue中使用路由进行页面的跳转时,vue的路由如何传递参数,第二个页面如何获取参数.一. 通过router-link进行跳转&lt;router-link:to="{path: 'yourPath', params: { name: 'name', dataObj: data},query: { name: 'n...