前端组件

模块化 ： 是从代码逻辑的角度进行划分的。方便代码分层开发，保证每个功能模块的职能单一； 组件化 ： 前端的组件化，是从 UI 界面的角度进行划分的，方便 UI 组件的重用。 在Vue中，组件的出现，是为了拆分 Vue 实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以调用对应的组件即可。 来源： https://www.cnblogs.com/JAVA-STUDYER/p/11024513.html

父组件向子组件传值 组件实例定义方式，注意：一定要使用 props 属性来定义父组件传递过来的数据 <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '这是父组件中的消息' }, components: { son: { template: '<h1>这是子组件 --- {{finfo}}</h1>', props: ['finfo'] } } }); </script> 使用 v-bind 或简化指令，将数据传递到子组件中： <div id="app"> <son :finfo="msg"></son> </div> 子组件向父组件传值 原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去； 父组件将方法的引用传递给子组件，其中， getMsg 是父组件中 methods 中定义的方法名称， func 是子组件调用传递过来方法时候的方法名称 <son @func="getMsg"></son> 子组件内部通过 this.$emit('方法名', 要传递的数据) 方式，来调用父组件中的方法，同时把数据传递给父组件使用 <div id="app"> <!-- 引用父组件 --> <son

Vue.js - Day3 定义Vue组件 什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可； 组件化和模块化的不同： 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一； 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用； 全局组件定义的三种方式 使用 Vue.extend 配合 Vue.component 方法： var login = Vue.extend({ template: '<h1>登录</h1>' }); Vue.component('login', login); 直接使用 Vue.component 方法： Vue.component('register', { template: '<h1>注册</h1>' }); 将模板字符串，定义到script标签种： <script id="tmpl" type="x-template"> <div><a href="#">登录</a> | <a href="#">注册</a></div> </script> 同时，需要使用 Vue.component 来定义组件： Vue.component('account', { template: '#tmpl'

前面的话 　　笔者在做一个完整的博客上线项目，包括 前台 、 后台 、 后端接口 和服务器配置。本文将详细介绍使用vue全家桶制作的博客网站 概述 　　该项目是基于vue全家桶（vue、vue-router、vuex、vue SSR）开发的一套博客前台页面，主要功能包括首页显示、认证系统、文章管理、评论管理和点赞管理 【访问地址】 　　域名： https://xiaohuochai.cc 　　Github: https://github.com/littlematch0123/blog-client 　　或者可以直接扫描二维码访问 【项目介绍】 　　该项目的内容以笔者自学前端的过程中写的600多篇博客为基础，对于同样学习前端的同学可能会有所帮助。许多博客都有直接可以操作的DEMO，对知识的理解可能会更直观 　　采用移动优先的响应式布局，移动端、桌面端均可适配；字体大小使用em单位，桌面端的文字相应变大；移动端可使用滑屏操作，桌面端通过光标设置、自定义滚动条、回车确定等，提升交互体验 　　全站采用服务器端渲染SSR的方式，有利于SEO，减少了首屏渲染时间；使用service worker和manifest实现了PWA方案的离线缓存和添加到桌面的功能 　　根据HTML标签内容模型，使用语义化标签，尽量减少标签层级，尽量减少无语义的div标签 　　CSS大量使用类选择器

export function categoryList() { return Axios.get("categoryListUrl").then((res)=>{ res = res.data }) } 相当于 简写的 export function categoryList(){ return Axios.get(categoryListUrl).then(res=>res.data) } 一、内容回顾 1、 webpack （前端中工作， 项目上线之前对整个前端项目优化） 　　- entry : 整个项目的郑旭入口 （main.js 或index.js）； 　　- output ： 输出的出口； 　　- loader ： 加载器 ， 对es6 代码的解析， babel-loader （官网：https：// www.babeljs.cn/） 是浏览器支持es6， css-loader解析css文件， style-loader 将css代码添加一个style 标签插入header 标签中， url-loader 等等 　　- plugins： 有很多，比如html-webpack-plugin， 丑陋等等； 二 ： VUE 项目中常见问题 　　我们已经学过如何使用用脚手架创建一个vue项目， 接下来我们介绍一下vue项目中的，常见问题。 1、使用vue

复习 """ 1、指令： v-once: <p v-once>{{ msg }}</p> v-cloak: 防止页面加载抖动 v-show：绑定的变量为布尔类型 <p v-show="isShow">{{ msg }}</p>，隐藏时，任然在页面中通过display:none渲染 v-if|v-else-if|v-else: 前分支成立会屏蔽后分支，else分支不需要条件 v-if="showBox == 'rBox'" v-for：遍历 字符串: v-for="(ch, index) in str" 数组：v-for="(ele, index) in arr" 对象：v-for="(value, key, index) in obj" 2、实例成员： computed: 设置 方法属性，该方法属性在页面渲染后，绑定的方法中任意变量发生改变(都被监听)，都会回调绑定的方法 - 一个变量依赖多个变量 computed:{ fullName() { return this.firstName + this.lastName; } } watch: 设置已有属性的监听事件，监听的变量值改变就会回调绑定的方法 - 多个变量依赖一个变量 watch:{ fullName() { this.firstName = this.fullName.split('')[0]; this

SpringMVC的工作原理图： SpringMVC流程 1、 用户发送请求至前端控制器DispatcherServlet。 2、 DispatcherServlet收到请求调用HandlerMapping处理器映射器。 3、 处理器映射器找到具体的处理器(可以根据xml配置、注解进行查找)，生成处理器对象及处理器拦截器(如果有则生成)一并返回给DispatcherServlet。 4、 DispatcherServlet调用HandlerAdapter处理器适配器。 5、 HandlerAdapter经过适配调用具体的处理器(Controller，也叫后端控制器)。 6、 Controller执行完成返回ModelAndView。 7、 HandlerAdapter将controller执行结果ModelAndView返回给DispatcherServlet。 8、 DispatcherServlet将ModelAndView传给ViewReslover视图解析器。 9、 ViewReslover解析后返回具体View。 10、DispatcherServlet根据View进行渲染视图（即将模型数据填充至视图中）。 11、 DispatcherServlet响应用户。 组件说明： 以下组件通常使用框架提供实现： DispatcherServlet：作为前端控制器

【 重点提前说：组件化与虚拟DOM是React.js的核心理念！】 先抛出一个论题：在React.js中，JSX语法提倡将 HTML 和 CSS 全都写入到JavaScript 中是代码书写规范中的"资本主义复辟”吗？ react值得推荐的地方就是组件和virtualdom，前者解决多团队协作复杂前端的问题，后者使dom操作到视图刷新变得现实。 对于React.js大家褒贬不一，脑残粉极力捧吹，而黑粉则是一昧的踩低。既然这样，那我们就自己学习使用，来下个定论吧~ 一、学习前，你该知道这些有关的基础知识~ 一、什么是React.js React 是一个用于构建[用户界面]的 JAVASCRIPT 库，t主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 二、React有哪些 特点？ ● 1.声明式设计 −React采用声明范式，可以轻松描述应用。 ● 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。--虚拟DOM结构 ● 3.灵活 −React可以与已知的库或框架很好地配合。 ● 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。 ● 5.组件 −

一、为什么需要前后端分离 1.1什么是前后端分离 前后端分离这个词刚在毕业（15年）那会就听说过，但是直到17年前都没有接触过前后端分离的项目。怎么理解前后端分离？直观的感觉就是前后端分开去做，即功能和职责上的一种划分，前端负责页面的渲染，部分页面交互的逻辑，然后通过网络请求与后端进行数据的交互；后端则着重关注业务逻辑的处理，直接操控数据库。 1.2前后端未分离前 （1）jsp + servlet 开发模式: JSP页面：负责视图层的渲染及交互，内部可以嵌入java 代码，在某些场景下开发起来比较方便，但是这种页面和java代码混合开发的方式造成逻辑不够直观，项目代码维护起来困难。 Servlet类: 负责接收from表单提交的参数，进行业务层逻辑和页面导航的处理。但是这种方式需要区分请求的方式，手动把请求的参数拿出来进行封装。基本上一个请求对应一个servlet，需要在web.xml文件中配置urL映射或者注解的方式。 大体流程： 编写JSP页面，引入java常用类库和JSTL标签库，编写HTML表单，CSS，javascript。 编写Servlet 方法，重写service()方法，需要手动获取请求参数，然后业务逻辑处理。 配置web.xml。在web.xml文件中注册servlet，配置请求映射(简单方法：增加注册)。 （2）jsp + spring mvc开发模式

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深的吸引了我，下面来跟我一起领略 ReactJS的风采吧~~ 章有点长，耐心读完，你会有很大收获哦~ 一、ReactJS简介 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。 ReactJS官网地址： http://facebook.github.io/react/ Github地址： https://github.com/facebook/react 二、对ReactJS的认识及ReactJS的优点 首先，对于React，有一些认识误区，这里先总结一下： React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式； React的服务器端Render能力只能算是一个锦上添花的功能，并不是其核心出发点