概念 Vue遵循Web Component规范,提供了自己的组件系统.组件是一段独立的代码,代表页面中某个功能块,拥有自己的数据.JS.样式,以及标签.组件的独立性是指形成自己独立的作用域,不会对其它组件产生任何副作用. Vue 组件是可复用 Vue 实例,接受相同的选项option对象 (除了一些根级特有的选项) 和使用相同的生命周期钩子,以及模板调用方式. Vue 组件可以嵌套,所以组件之间可以进行引用和通信 组件定义 Vue提供了专用的API来定义组件,组件构造器函数: Vue.exten…
组件的定义注册 效果: 方法一: <div id="box"> <v-header></v-header> <hr /> <br /> {{name}} <hr /> <br /> <v-footer></v-footer> </div> <script> //1.定义组件 var Header={ template:'<h2>这是一个头部组件…
别看Spring现在玩的这么花,其实它的“筹码”就两个,“容器”和“bean定义”. 只有先把bean定义注册到容器里,后续的一切可能才有可能成为可能. 所以在进阶的路上如果要想走的顺畅些,彻底搞清楚bean定义注册的所有细节至关重要. 毕竟这是万里长征的第一步.有句话怎么说来着,“勿在浮沙筑高台”. Spring步入注解和Java配置的时代也有些时日了.而且也旗帜鲜明的表达了bean的注册方法. 这不,就是这个接口,AnnotationConfigRegistry,如下图01: 再来看下这个接…
上一篇文章整体非常轻松,因为在容器启动前,只注册了一个bean定义,就是SpringBoot的主类. OK,今天接着从容器的启动入手,找出剩余所有的bean定义的注册过程. 具体细节肯定会颇为复杂,同样,大家只需关注都干了什么,不用考虑如何干的. 来宏观的看下容器的启动过程,即refresh方法,如下图01: 只捡重要的来说,就是四大步: 第一,准备好bean工厂(BeanFactory). 第二,调用已经注册的bean工厂后处理器(BeanFactoryPostProcessor). 第三,注…
1. 什么是组件?有两种解释 1. 第一种解释: 什么是组件? 1. 组件是 vue 中的一个可复用的实例,所以new Vue() 是vue中最大的那个组件(根组件),有名字,使用的时候以单标签或双标签使用. 2. Vm = new vue() 是最大的组件,具有很多实用性的属性,比如 data,methods,computed等,所以定义的组件也有这些属性. 2. 第二种解释: 什么是组件? 1. 组件的出现就是为了拆分 vue 实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将…
[DOM Event Learning] Section 2 概念梳理 什么是事件 DOM Event   事件 事件(Event)是用来通知代码,一些有趣的事情发生了. 每一个Event都会被一个Event对象所表示,这个对象可能还会有一些自定义的字段或者方法,来获取发生什么事情的更多信息. Event对象实现了Event接口(https://developer.mozilla.org/en-US/docs/Web/API/Event).   事件可以是任何事情,从最基本的用户交互,到rend…
这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的,因为大家都踩过大写命名的坑 下面我们来看个例子: <div id="app"> <myTemplate></myTemplate> </div> <script> Vue.component('myTemplate',{ temp…
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 6.vue如何在路由里面定义一个子路由? 给父路由加一个 children:[] 参考我的<1.d>的代码 const routes = [ { //path是路由的路径 path:'/', //redirect代表重定向,因为当前路径'/'并没有对应的组件,所以需要重定向到其他路由页面 redirect:'/ho' }, { path: '/ho', redirect:'/ho/h…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" cont…
Vue Login Form Component Account Login <template> <div> <slot></slot> <el-form class="account-form-container" status-icon :ref="loginFormRef" :model="loginForm" :rules="loginRules"> <…