前端组件 | 易学教程

angular 组件通信

阅读更多关于 angular 组件通信

单页面应用组件通信有以下几种，这篇文章主要讲 Angular 通信父组件 => 子组件子组件 => 父组件组件A = > 组件B 父组件 => 子组件子组件 => 父组件 sibling => sibling @input @output setters (本质上还是@input) 注入父组件 ngOnChanges() (不推荐使用) 局部变量 @ViewChild() service service service Rxjs的Observalbe Rxjs的Observalbe Rxjs的Observalbe localStorage,sessionStorage localStorage,sessionStorage localStorage,sessionStorage 上面图表总结了能用到通信方案,期中最后3种,是通用的,angular的组件之间都可以使用这3种, 其中Rxjs是最最牛逼的用法,甩redux,promise,这些同样基于函数式的状态管理几条街 ,下面一一说来父组件 => 子组件 @input,最常用的一种方式 @Component({ selector: 'app-parent', template: '<div>childText:<app-child [textContent] = "varString"></app-child></div>

如何才能做一个合格的前端开发者呢？

阅读更多关于如何才能做一个合格的前端开发者呢？

如何才能做一个合格的前端开发者呢？第一，必须掌握基本的Web前端开发技术，其中包括：CSS、HTML、SEO、DOM、BOM、Ajax、Java等，在掌握这些技术的同时，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。第二，在一名合格的前端工程师的知识结构中，网站性能优化、SEO和服务器端的基础知识也是必须掌握的。第三，必须学会运用各种工具进行辅助开发。第四，除了要掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持，等等。来源： CSDN 作者：前端碎碎念链接： https://blog.csdn.net/zhongqw_00/article/details/88929162

Vue

阅读更多关于 Vue

目录 Vue 实例成员指令组件生命周期钩子 Vue-CLI 项目搭建项目功能插件 Vue 在我们的大型项目开发的时候我们往往都会采用前后端分离的方案，而我们的前端一般都是采用Vue框架来实现前后端分离。那这样我们就不能不讲一下Vue开发的优点了：先进的前端设计模式：MVVM 可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发特点单页面Web应用数据驱动数据的双先绑定虚拟DOM 平时开发可以直接使用js文件导入的形式使用Vue开发开发版本生产版本 <div id="app"> {{ }} </div> <script src="js/vue.min.js"></script> <script> new Vue({ el: '#app' }) </script> 实例成员 el 实例与页面挂载点一一对应一个页面中可以出现多个实例对应多个挂载点实例只操作挂载点内部内容 data data为插值表达式中的变量提供数据 data中的数据可以通过Vue实例直接或间接访问 methods methods为事件提供实现体 computed 一个变量依赖于多个变量当依赖的变量发生变化，便会触发 watch：监听用于监听某个变量的变化 delimiters：分隔符当我们的 {{}} 与其他组件发生冲突时可以使用这个来替换新的标识符指令文本指令

201871010115 十二周作业

阅读更多关于 201871010115 十二周作业

项目内容这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/11867214.html 作业学习目标 (1) 掌握Vetor、Stack、Hashtable三个类的用途及常用API； (2) 掌握ArrayList、LinkList两个类的用途及常用API； (3) 了解java集合框架体系组成； (4) 掌握Java GUI中框架创建及属性设置中常用类的API； (5) 了解Java GUI中2D图形绘制常用类的API；随笔博文正文内容包括：第一部分：总结第九章、第十章理论知识（40分）第九章集合 9.1.1将集合的接口与实现分离 1.集合框架实现了对基本数据结构的封装。集合是一种包含多个元素，并提供对所包含元素，操作方法的类，其包含的元素可以由同一类型的，对象组成，也可以由不同类型的对象组成。 2.集合类的使用： Java的集合类包含在java.util包中。import java.util.*; 3.队列(queue)接口：“先进先出”。 4.队列通常有两种实现方式: 使用循环数组；循环数组比链表更高效。循环数组是一个有界集合，即容量有限。如果程序中要收集的对象数量没有上限，就最好使用链表来实现。使用链表 9.1.2

Vue基础

阅读更多关于 Vue基础

Vue基础渐进式Javascript框架通过对框架的了解与运用程度,来决定其在整个项目的应用范围,最终可以独立的以框架方式完成整个web前端项目. 1.什么是Vue 可以独立的完成前后端分离式web项目的JavaScript框架 2.为什么学习Vue 三大主流框架: Angular React Vue 先进的前端设计模式: MVVM 可以完全脱离服务端,以前端代码复用的方式渲染整个页面: 组件化开发 3.特点单页面web应用数据驱动数据的双向绑定虚拟DOM 4.如何使用Vue 去百度官网并且下载 <div id='app'> {{ }} </div> <script src='js/vue.min.js'> new Vue({ el: '#app' }) </script> # 1.el为挂载点, 采用css3选择器语法与页面进行绑定,决定该vue对象控制的页面范围 # 2.挂载点只会匹配第一个匹配到的结果,所以一般采用id选择器 # 3.但是html与body标签不可以作为挂载点 5.vue变量 <body> <div id="app"> <p>{{ msg }}</p> <p>{{ info }}</p> </div> <div id="main"> <p>{{ msg }}</p> <p>{{ info }}</p> </div> </body> <script

（十）动态加载菜单

阅读更多关于（十）动态加载菜单

动态加载菜单之前我们的导航树都是写死在页面里的，而实际应用中是需要从后台服务器获取菜单数据之后动态生成的。我们在这里就用上一篇准备好的数据格式Mock出模拟数据，然后动态生成我们的导航菜单。接口模块化我们向来讲究模块化，之前接口都集中在，interface.js，我们现在把它改名为 api.js，并把里边原来登录、用户、菜单的相关接口都转移到我们新建的接口模块文件中。模块化之后的文件结构如下图所示模块化之后，模块接口写在相应的模块接口文件中，如下面是登录模块 login.js import axios from '../axios' /* * 系统登录模块 */ // 登录 export const login = data => { return axios({ url: '/login', method: 'post', data }) } // 登出 export const logout = () => { return axios({ url: '/logout', method: 'get' }) } 模块化之后，父模块可以像这样引入 api.js /* * 接口统一集成模块 */ import * as login from './moudules/login' import * as user from './moudules/user' import

最火移动端跨平台方案盘点：React Native、weex、Flutter

阅读更多关于最火移动端跨平台方案盘点：React Native、weex、Flutter

1、前言跨平台一直是老生常谈的话题，cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放，颇有一股推倒原生开发者的势头。为什么我们需要跨平台开发？本质上，跨平台开发是为了增加代码复用，减少开发者对多个平台差异适配的工作量，降低开发成本，提高业务专注的同时，提供比web更好的体验。嗯～通俗了说就是：省钱、偷懒。目前移动端跨平台开发中，备受关注的方案大致归纳为以下几种情况： 1）react native、weex均使用JavaScript作为编程语言，目前JavaScript在跨平台开发中，可谓占据半壁江山，大有“一统天下”的趋势； 2）kotlin-native开始支持 iOS 和 Web 开发，（kotlin已经成为android的一级语言）也想尝试“一统天下”； 3）flutter是Google跨平台移动UI框架，Dart作为谷歌的亲儿子，毫无疑问Dart成为flutter的编程语言。作为巨头新生儿，在flutter官网也可以看出，flutter同样“心怀天下”（可支持Web端、Android端、iOS端等）。本篇主要以react-native、weex、flutter，深入聊聊当前最火的这3种跨平台移动开发方案的实现原理、现状与未来。至于为什么只讲它们，因为对比ionic、phoneGap

热门跨平台方案对比：WEEX、React Native、Flutter和PWA

阅读更多关于热门跨平台方案对比：WEEX、React Native、Flutter和PWA

本文主要对WEEX、React Native、Flutter和PWA几大热门跨平台方案进行简单的介绍和对比。内容选自《WEEX跨平台开发实战》（WEEX项目负责人力荐，从入门到实战，教你玩转移动前端跨平台开发！）传统的原生Android、iOS开发面临着诸多难以解决的问题，例如开发周期长、迭代缓慢等，因此很多公司备受困扰。近年来，伴随着“大前端”概念的提出和兴起，涌现出一大批移动跨平台开发框架和模式，为解决传统移动开发问题找到了新的方向。从早期的PhoneGap、Inoic等Hybrid混合技术，到现在耳熟能详的React Native、WEEX和Flutter等跨平台技术，借助这些优秀的跨平台开发框架，在不牺牲性能和体验的前提下，开发进度和多端研发的问题得到有效解决。 WEEX是由阿里巴巴研发的一套移动跨平台技术框架，最初是为了解决移动开发过程中频繁发版和多端研发的问题而开发的。使用WEEX提供的跨平台技术，开发者可以很方便地使用Web技术来构建具有可扩展的原生性能体验的应用，并支持在Android、iOS、YunOS和Web等多平台上部署。具体来说，当在项目中集成WeexSDK之后，就可以使用JavaScript（JS）和主流的前端框架来开发移动应用了。同时，WEEX框架的结构是解耦的，渲染引擎与语法层分离，也不依赖任何特定的前端框架，目前，开发者可以使用Vue

前端vue框架（四）

阅读更多关于前端vue框架（四）

vue项目搭建和项目目录介绍、组件、路由 Vue项目环境搭建 1.安装node，官网下载，安装到本地官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/ 2.下载node后，便能获得npm（npm相当于一个应用商城，与后端python中的pip类似）由于使用npm下载插件是用的外网，下载速度慢，所以建议换源安装 cnpm （cmd窗口下进行换源） >: npm install -g cnpm --registry=https://registry.npm.taobao.org 3.换源安装cnpm后，下一步下载脚手架 >: cnpm install -g @vue/cli 注：如果在第二或第三步安装失败时，可先清空 npm缓存后，再重复执行下载，清空缓存如下： >: npm cache clean --force Vue项目搭建 1.先将cmd切换到要下载的指定目录下（如下:表示将创建的项目存在桌面上) >:cd Desktop 2.创建项目 >:vue create 项目名 3.项目初始化，需要按步骤选择环境配置，按照如下配置即可 pycharm配置并启动vue项目 1.项目创建好后，用pycharm打开 2.添加配置npm启动，点击 + 号，找到 npm ，按下方配置 Vue项目目录介绍 ├── v-proj | ├── node_modules

前端Vue框架（三）

阅读更多关于前端Vue框架（三）

子组件补充子组件案列 <!DOCTYPE html> <html lang="en"> <head> <meta charset='UTF-8'> <title>子组件案例</title> <style> .wrap { width: calc(200px * 4 + 80px); margin: 0 auto; user-select: none; } .box { width: 200px; height: 360px; /*border: 1px solid black;*/ background-color: rgba(10, 200, 30, 0.5); border-radius: 10px; float: left; margin: 10px; } .box img { width: 100%; /*height: 200px;*/ border-radius: 50%; /*width:10%;*/ /*height:15%;*/ float:right; /*margin-left:20px;*/ } .b1{ text-align: center; } </style> </head> <body> <div id="app"> <div class="wrap"></div> <my-tag1 ></my-tag1> <my-tag2 ></my-tag2>

订阅前端组件