vue
文章平均质量分 52
.luluHoney
脑子清醒比干什么都强
展开
-
vuex的求和案例
首先需要搭建好vuex的环境,需要让每个组件都能够看见store。在组件中倘若没有相关的条件限制的话,直接调用mutation,如果有条件的话先调用dispatch,再在main.js中的action中明确相关的条件限制。main.js中的代码/* 该文件是整个项目的入口文件*///引入Vueimport Vue from 'vue'//引入App组件,它是所有组件的父组件import App from './App.vue'// 引入插件import vueResourc...原创 2022-05-14 19:51:19 · 117 阅读 · 0 评论 -
vue-router路由
目录一个路由(route)就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。前端路由:key是路径,value是组件。1.基本使用安装vue-router,命令:```npm i vue-router```(1). 应用插件:```Vue.use(VueRouter)```(2). 编写router配置项: 新创建的router文件夹的index.js中//在新创建的router文件夹中 //引入VueRouter ...原创 2022-05-15 14:52:56 · 242 阅读 · 0 评论 -
vuex模块化+命名空间
一说起模块化就要想到优化,提高复用性,让多种数据的分类更加明确1. 修改store.js将原来混合的不同板块的数据按照类别分开,此处分为了两类,countAbout,personAbout。每一类中都有state,mutations,actions,getters,在分类了之后要开启命名空间,这样就可以避免插值语法中的内容过长所造成的不简洁const countAbout = { namespaced:true,//开启命名空间 state:{x:1}, muta原创 2022-05-14 20:25:42 · 403 阅读 · 0 评论 -
搭建vuex环境
1. 创建文件:```src/store/index.js``````js //引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) //准备actions对象——响应组件中用户的动作 const actions = {} //准备mutations对象——修改state中的数据 const mutation原创 2022-05-14 09:33:22 · 80 阅读 · 0 评论 -
组件之间数据信息传递方法
方法一将组件中需要传递的东西交给共同的父亲,父亲再将数据交给其中一个儿子,这个过程通过props的方法传递,让son2接收 props['xxx'],此时接收的数据出现在son2的实例对象vc身上,所以模板可以使用。此时son1要获得数据1,father就要提前创造一个函数传递给son1,然后son1调用函数。此时就可以定义在father中的函数,进行操作,这就意味着只要son1调用函数,vue就会重新解析模板,然后更新数值。......原创 2022-05-07 20:21:10 · 1463 阅读 · 0 评论 -
nanoid库使用(精简版uuid)
nanoid用于生成一个标准的唯一的字符串在vue脚手架中安装 npm i nanoid使用方法:引入--->调用//引入nanoidimport {nanoid} from 'nanoid'export default { name:'MyHeader', methods:{ add(e){ // 将用户的输入包装成为一个todo对象 const todoObj={id:nanoid,title:e.target,value,done:..原创 2022-05-07 16:38:23 · 737 阅读 · 0 评论 -
vue中的脚手架结构
vue中的脚手架称为CLI:command line interface,命令行接口工具创建Vue脚手架,vue中脚手架依赖于node.js,所以在搭建脚手架之前要下载好node.js安装过程:①全局安装@vue/cil :npm install-g@vue/cil全局安装时需要配置npm淘宝镜像:npm config set registry https://registry.npm.taobao.org打开cmd,输入淘宝镜像地址,出现警告不要紧,卡住时按回车。此时安装完毕之后关闭c原创 2022-05-06 21:30:20 · 363 阅读 · 0 评论 -
关于Vue的核心基础知识点
vue核心知识学习总结原创 2022-05-04 21:52:03 · 1214 阅读 · 0 评论 -
Vue数据监测原理
Vue数据监测的原理 1.vue会监视data中所有层次的数据。 2.如何监测对象中的数据? 通过setter实现监视,且要在new Vue时就传入要监测的数据 (1).对象中后追加的属性,Vue默认不做响应式处理 (2).如需给后添加的属性做响应式,请使用如下API ...原创 2022-05-03 18:21:22 · 460 阅读 · 0 评论 -
vue生命周期图示
利用断点来去查看钩子函数的执行过程 <body> <div id="root"> <h2>当前的n值是:{{n}}</h2> <button @click="add">点我n+1</button> <button @click="bye">点我销毁vm</button> </div> </body><script t原创 2022-05-04 16:48:32 · 672 阅读 · 0 评论