vue
文章平均质量分 72
qq_46472106
这个作者很懒,什么都没留下…
展开
-
为什么用vuex
Vuex 和单纯的全局对象有以下两点不同:1.Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。vuex得四个对象2.getter功能上和适用场景上完全和comput原创 2021-03-10 18:57:00 · 117 阅读 · 0 评论 -
vue中computed和watch的区别
computedcomputed也就是计算属性,它可以帮助我们将在模板中的一些稍微复杂的逻辑计算放回到js代码中,方便理解与修改维护。在computed中定义的每一个计算属性,都会被缓存起来,只有当计算属性里面依赖的一个或多个属性变化了,才会重新计算当前计算属性的值watchwatch是属性监听器,一般用来监听属性的变化(也可以用来监听计算属性函数),并做一些逻辑。computed和watch的使用场景并不一样,computed的话是通过几个数据的变化,来影响一个数据,而watch,则是可以一个数原创 2020-10-20 18:14:13 · 144 阅读 · 0 评论 -
mvvm与mvc模式得区别
MVC模式MVC是应用最广泛的软件架构之一,一般MVC分为:Model(模型),View(视图),Controller(控制器)。 这主要是基于分层的目的,让彼此的职责分开.View一般用过Controller来和Model进行联系。Controller是Model和View的协调者,View和Model不直接联系。基本都是单向联系。Model: 模型(用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法)View: 视图(渲染页面)Controller: 控制器(M和V之间的连接器,用于控制原创 2020-10-20 11:07:35 · 121 阅读 · 0 评论 -
v-model得实现原理
v-model只是一个语法糖,等于:value+@input,真正的实现靠的还是: v-bind:绑定响应式数据,触发 input 事件并传递数据 (核心和重点)<input type="text" v-model="msg" /><input v-bind:value="msg" @input="msg=$event.target.value" />这两行代码得效果是一样得监听原生组件的事件,当获取到原生组件的值后把 值通过调用 $emit(‘input’ ,da原创 2020-10-17 15:44:47 · 161 阅读 · 0 评论 -
vue中的动态路由
介绍需要把某种模式匹配到的所有路由,全部映射到同一个组件例如:我们有一个user组件,对于所有id不同的用户,都要使用这个组件来渲染,那么我们可以在vue-router的路由路径中使用动态路径参数来达到这个效果。使用html代码:<div id="app"> <router-link to="/user/1">user1</router-link> <router-link to="/user/2">user2<原创 2020-10-13 10:52:39 · 426 阅读 · 0 评论 -
vue中路由组件传参
path-query参数拼接在地址栏上html代码: <div id="app"> <router-link to="user">user</router-link> <router-link to="manager">manager</router-link> <router-view></router-view> </div>js代码:原创 2020-10-08 18:45:59 · 95 阅读 · 0 评论 -
vue中的mixin的混入规则
当组件和混入对象有同名选项时,这些选项会以恰当的方式合并数据 data数据对象在混入时,会进行合并,发生冲突是,保留组件的数据值为对象 methods computed等在混入时,同名的methods会合并成为一个对象如果对象的键名发生冲突,则保留组件对象的键值对生命周期钩子函数同名的钩子函数会被合并为一个数组,依次都会被调用,但是混入对象的钩子函数先被调用代码:html代码:<div id="app"> {{num}} //99 如果实例中没原创 2020-10-07 10:08:27 · 603 阅读 · 0 评论 -
vue中的作用域插槽
一、知识点1.在slot标签中通过v-bind绑定插槽可以使用的属性 <slot :user='user' :list='list'>slot</slot>在template标签中,使用v-slot:default=‘scope’scope:template标签中可以使用的作用域对象<template v-slot:default='scope'> {{scope.user.name}} {{scope.list}}</templa原创 2020-10-06 10:13:36 · 301 阅读 · 0 评论 -
Vue中父子组件的传值问题
父组件向子组件传值在父组件中使用子组件时,添加自定义属性,属性值为传输的内容<my-footer msg='hello-父组件给子组件的内容'></my-footer>在子组件中,使用props:[]接受父组件中传递的属性props:[“msg”]多个属性使用逗号分隔props声明在和date同级位置在这里插入代码片...原创 2020-10-05 15:21:23 · 65 阅读 · 0 评论