![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue文章
文章平均质量分 60
墨痕留绝
这个作者很懒,什么都没留下…
展开
-
vuex学习笔记
vuex是vue提供的一个集中式状态管理器,用于对数据的集中式管理。vuex有四个重要的属性:state、mutations、actions、getters1.vuex的使用安装npm install vuex建一个文件夹(store),新建一个index文件,文件内创建状态管理器storeimport Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({原创 2022-04-25 16:36:15 · 215 阅读 · 0 评论 -
uni-app学习笔记
uni-app环境以及配置开发环境使用H-builder 开发,下载app开发版本,项目使用uni-app项目。项目配置文件static文件夹用于静态资源文件存放,不会被webpack解析,因此less、sass文件不可存放在此文件夹manifest.json应用配置文件,可配置程序的权限、图标、名称等,同时可以为vue为h5设置跨域配置vue.config.jsvue项目配置文件,可配置webpack等。pages.jsonuni-app全局配置,决定了项目原创 2022-04-08 09:21:38 · 1583 阅读 · 0 评论 -
使用JavaScript编写vue指令v-model,v-model原理实现
首先先要知道的是v-model的作用是实现数据的双向绑定,即:数据在视图层的双向响应。实现思路主要分为两步:第一步:数据层到视图 的响应将数据响应到视图层的方式,在vue2使用的是Object.defineProperty()来实现,需要劫持到数据的变化,在数据变化的时候将其渲染到视图上:第二步:视图层到数据层的响应...原创 2021-09-05 00:17:32 · 1583 阅读 · 3 评论 -
vue进阶一~数据响应式,数据响应到视图层,手写v-model,订阅发布者模式,
1,数据响应式 当数据发生改变的时候,我们立即知道数据发生改变,并做出相关的操作:发送请求,打印文字,操作DOM等。1.1,vue实现数据响应的原理 vue中使用了两种模式来实现数据响应式,分别是vue2(Object.defineProperty()),vue3(Proxy)。1.2,vue2实现数据响应:对象属性拦截Object.defineProperty()首先我们先要知道如何多一个对象进行赋值:两种方式,字面量赋值和Object.def...原创 2021-09-02 23:14:55 · 931 阅读 · 1 评论 -
VUE小知识~作用域插槽
作用域插槽可以为我们向组件内插入特定的标签,方便修改维护。组件内需要使用<slot></slot>进行插槽站位。组件标签内需要使用<template ></template>作为模板来存放需要放入组件内的标签(主要还是为了好取组件内传来的值)例如:在组件内(List.vue文件):<template> <div v-for="item in dates" :key="item"> &l..原创 2021-07-07 23:15:56 · 258 阅读 · 2 评论 -
vue小知识~eventBus
eventBus是指在向全区暴露这个vue对象,此时在任意一个地方都可以使用vue相关的实例在main.js配置Vue.prototype.$bus=new Vue()此时整个应用都可以使用vue的实例,我们来用$on来举例;在任意的vue文件中定义方法: created() { this.$bus.$on('changeBus', function() { console.log('bus'); }); },表示原创 2021-07-04 23:16:08 · 170 阅读 · 1 评论 -
vue小知识~ref和$refs
$refs表示的是获取被ref标识的标签的DM实例。用法简单:标签上:<div ref='refName'></div>获取:this.$refs.refName就可以获取到该div的DOM实例了。例如:<template> <div> <div @click="getsss">老子</div> <sona ref='getChange'><原创 2021-07-04 22:46:04 · 212 阅读 · 0 评论 -
vue小知识~注入provide!
注入表示的是将该组件的相关值,方法,实例向后代组件注入。祖先元素中定义注入:export default {provide() { return { provideName: provideValue }; },}还可以是一个对象:export default {provide{ provideName: provideValue },}例如:export default { data() { re原创 2021-07-04 22:38:27 · 334 阅读 · 0 评论 -
vue小知识~使用$attrs和$listeners接收父组件转来的属性和方法
一般下我们子组件获取父组件传过来的的值得时候,我们是使用props来接收,但是如果我们父组件转过来的值是给孙组件使用时,使用哪个props接收的方式太过麻烦。这是vue为我们提供了一个实例$attrs,表示该组件标签上的属性实例。1,$attrs,该组件的实例标签上的属性例如一个组件在父组件中进行渲染成标签时: <sona name="小智" age="18" sex="男"></sona>怎$arrrs表示<sona/>标签上的name="小智"原创 2021-07-04 22:01:15 · 1012 阅读 · 6 评论 -
vue小知识:多层数据双向相应之向上派发和向下派发($dispatch和$broadcast)
注意:这两个实例已经在vue3中弃用啦!!!(所以不详细说了,封装知道怎么用就行了,作为了解)都是在vue实例配置(main.js)向上派发:$dispatch注意,在相应后代组件中使用this.$dispatch(eventName, value);表示向上派发事件,只要其祖先元素上有该事件,都会被触发。配置main,js:Vue.prototype.$dispatch=function(eventName,value){ let parent =this.$paren原创 2021-07-03 00:01:07 · 346 阅读 · 2 评论 -
vue小知识~实现父子组件双向数据绑定
vue的数据是单向数据流动,在子组件中是不可以修改父组件的数据的,但是还是可以通过其他方式间接修改父组件的数据。案例:子组件是一个按钮组件,分别有两个按钮,一个按钮表示男,标识符为0,另一个按钮是女,标识符是1。父组件定义一个标识,用于显示子组件按钮选中后标识符。1,方式一:通过向子组件传递方法...原创 2021-07-01 23:14:45 · 637 阅读 · 1 评论