分类：组件

2020
12-26

vue 实现基础组件的自动化全局注册

参考官网：https://cn.vuejs.org/v2/guide/components-registration.html在日常开发中，有一些组件是比较常用，但是为了避免在开发过程中不停地引入，或者在main.js中注册，，或者每添加一个组件就需要手动注册一次。则直接进行自动化全局注册。自动化全局注册，官网上都详细的说明，以下是自己官网的说明基础上进行了一个demo开发实例：1、自定义文件夹：在src下新建一个components文件夹，用于存放组件。并新建一个用于存放需要... 继续阅读 >
2020
12-17

Vue 组件注册全解析

全局组件注册语法components中的两个参数组件名称和组件内容Vue.component(组件名称,{data:组件数据,template:组件模板内容})全局组件注册应用组件创建：Vue.component('button-counter',{data:function(){return{count:0}},template:'<button@click="handle">点击了{{count}}次</button>',methods:{handle:function(){this.count++;}}})varvm=newVue({el... 继续阅读 >
2020
12-03

如何实现vue的tree组件

前言Tree一直是大家熟知的组件，做一些大型的后台管理系统都会用到。使用树组件可以完整的展现其中的层级关系，并具有展开收起选择等交互功能。效果节点可以无限的递归延伸可以展开和收起子节点如果子节点全部选择对应的父节点也应该选中，反之父节点取消选中对应子节点也需要取消选中APIprop传递data属性，来描述所有的节点的信息每个节点的配置描述如下title：展示的标题expand是否展开节点checked是否选中节点childr... 继续阅读 >
2020
12-02

vue组件中节流函数的失效的原因和解决方法

今天使用节流函数的时候遇见了一个问题，搞了半天才找到原因，所以在这里做个总结。节流函数浏览器的一些事件，如：resize，scroll，mousemove等。这些事件触发频率太过频繁，绑定在这些事件上的回调函数会不停的被调用，加重浏览器的负担，导致用户体验非常糟糕。所以先贤们发明了节流函数，简单版本如下：functionthrottle(f,wait=200){letlast=0returnfunction(...args){letnow=Date.now()if(now-last>... 继续阅读 >
2020
11-25

Vue组件生命周期运行原理解析

Vue实例有一个完整的生命周期，从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。beforeCreate(创建前)在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el和data并未初始化，因此无法访问methods，data，computed等上的方法和数据。created(创建后）实例已经创建完成之后被调用... 继续阅读 >
2020
11-22

详解vue 组件注册

一、了解组件注册的两种方式1.1全局组件的注册方法//main.jsimportVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'Vue.config.productionTip=falseletHello={name:'hello',template:'这是全局组件hello'}Vue.component('hello',Hello)newVue({el:'#app',router,components:{App},template:''})上面我们就通过Vue.component()注册了一个全局组件hello，接下来分析... 继续阅读 >
2020
11-19

Springboot自定义mvc组件如何实现

Springboot自定义mvc组件如何实现 如果你想实现一些定制化功能，只需要写这个组件，然后将它交给springboot管理，springboot会给我们自动装配以下是spring官方文档解释由官方文档可知，想要自定义组件，需要实现以下步骤写一个配置类，加上@Configuration注解实现WebMvcConfigurer接口不添加@EnableWebMvc注解示例：自定义视图解析器packagecom.yl.config;importorg.springframework.context.annotation.Bean;importorg.springframework.context.annotatio... 继续阅读 >
2020
11-19

Restful_framework视图组件代码实例解析

一、基本视图写一个出版社的增删查改resful接口要自己事先创建好django项目，并创建好表，添加完记录路由：url(r'^publish/$',views.PublishView.as_view()),url(r'^publish/(?P<pk>\d+)/$',views.PublishDetailView.as_view()),视图：fromapiimportmodelsfromrest_frameworkimportserializersfromrest_framework.responseimportResponsefromrest_framework.viewsimportAPIViewclassPublishSerializers(seriali... 继续阅读 >
2020
11-16

vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作

vuex数据改变，组件中页面不渲染相信许多vuex新手都会遇到这样的问题：vuex数据更新后，插件中使用数据的地方没有更新这样的代码data(){return{tableData:this.$store.state.AdminInfo};}然后在template中使用tableData<el-table:data="tableData"class="tablePst"><el-table-columnlabel="登录名"prop="loginname"></el-table-column><el-table-columnlabel="真实姓名"prop="realname"></el-table-column></el... 继续阅读 >
2020
11-13

详解vue 组件的实现原理

组件机制的设计，可以让开发者把一个复杂的应用分割成一个个功能独立组件，降低开发的难度的同时，也提供了极好的复用性和可维护性。本文我们一起从源码的角度，了解一下组件的底层实现原理。组件注册时做了什么？在Vue中使用组件，要做的第一步就是注册。Vue提供了全局注册和局部注册两种方式。全局注册方式如下：Vue.component('my-component-name',{/*...*/})局部注册方式如下：varComponentA={/*...*/}newVue({e... 继续阅读 >
2020
10-24

vue 如何使用递归组件

有的时候我们会使用二级标题，什么叫做二级标题？先看看传过来的数据。类似于这种，数组中还有一个数组，有的人可能会说那就用两个v-for嵌套使用啊，但是这里，我们想要它们是同样的功能，同样的样式，所以使用递归组件是最好的选择。递归组件：在组件的自身再调用组件的自身。组件一般要给个名字，方便我们使用递归组件的时候来使用，如果我自身有children，就把children当做list再传给自己，做一个递归的循环。此时就渲染出来了... 继续阅读 >
2020
10-13

Django Auth用户认证组件实现代码

用户认证组件:功能：用session记录登录验证状态前提：用户表：django自带的auth-userpython3manage.pycreatesuperuser#创建超级用户补充匿名用户：API:fromdjango.contribimportauth:1.#if验证成功返回user对象，否则返回Noneuser=auth.authenticate(username=user,password=pwd)2.auth.login(request,user)#request.user当前登录对象3.auth.login(request)fromdjango.contrib.auth... 继续阅读 >
2020
10-13

Django ModelForm组件原理及用法详解

这是一个神奇的组件，通过名字我们可以看出来，这个组件的功能就是把model和form组合起来。先来一个简单的例子来看一下这个东西怎么用：比如我们的数据库中有这样一张学生表，字段有姓名，年龄，爱好，邮箱，电话，住址，注册时间等等一大堆信息，现在让你写一个创建学生的页面，你的后台应该怎么写呢？首先我们会在前端一个一个罗列出这些字段，让用户去填写，然后我们从后天一个一个接收用户的输入，创建一个新的学生对... 继续阅读 >
2020
10-10

简单了解SpringMVC常用组件作用解析

springmvc的核心在于其流程，这是使用springmvc框架的基础，springmvc是一种基于servlet的技术，它提供了核心控制器dispatcherservlet和相关的组件，并制订了松散的结构，一使用各种灵活的需求。首先springmvc框架是围绕DispatcherServlet而工作的，所以这个类是其最为重要的类。从他的名字来看，他是一个servlet，那么根据javaEE基础的学习，我们知道可以拦截http发送过来的请求，在servlet初始化时，springmvc会根据配置获取... 继续阅读 >
2020
10-10

如何在JS文件中获取Vue组件

1.背景最近在写项目时候遇到这样一个需求：我封装了一个js文件utils.js，然后在组件my-component.vue中引用了该js文件。在utils.js文件中有一些函数，需要操作my-component.vue中的data和methods。为了方便理解，上述js文件和组件名非实际工程中的名字，仅是示例。2.思路通过调用函数把组件实例this传递到被应用的js文件里。3.目录结构src/├──App.vue├──assets├──main.js├──component... 继续阅读 >