前端组件

基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarframework/quasar: Quasar Framework https://github.com/quasarframework/quasar Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的开源框架（基于Vue），可帮助Web开发人员创建： 响应式网站 PWA（Progressive Web App） 通过Apache Cordova构建移动APP（Android，iOS，…） 多平台桌面应用程序（使用Electron） Quasar允许开发人员编写一次代码，然后使用相同的代码库同时部署为网站、PWA、Mobile App和Electron App。使用最先进的CLI设计应用程序，并提供精心编写，速度非常快的Quasar Web组件。 当使用Quasar时，你不需要像Hammerjs，Momentjs或Bootstrap这样的额外重型库。它拥有这些功能，而且体积很小！ 1、 iView UI组件库 iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。iView的组件还是比较齐全的，更新也很快，文档写得很详细。有公司团队维护，比较可靠的Vue UI组件框架。iView生态也做得很好

Vue 是一套用于构建用户界面的渐进式 JavaScript 框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 该博客的主要目的是将面试中常见的概念总结，方便快速去了解。 什么是 mvvm？ MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。 在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 mvvm 和 mvc 区别？ mvc 和 mvvm

本文转载于: 猿2048 网站➪ React 进阶之选择合适的组件类型 最近项目基本都是用 React，今天总结分享 React Component 常见的几种形式，如果你在写 React 时经常不知道怎么拆分代码，这篇文章或许对你有所帮助。 原文链接： https://w3ctrain.com/2018/11/05/react-component-types/ 为了更充分理解 React，先搞懂平时写的 JSX 是什么。初学的时候有比较大困惑，这是一门新语言吗？大部分人是匆匆扫过文档就开始开发。通过 babel-presets-react 处理能看到，其实 JSX 只是语法糖，最终在浏览器跑的还是 JS。React Component 最终都通过 React.createElement 创建。 总之，写 React 其实就是在写 JS 。 SFC （Stateless Functional Component） React 可以使用 Function 来创建 Component，这类 Component 没有 lifecycle, 内部不维护 state，只要传入的 props 有变化则进行重新渲染。 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } 用箭头函数的写法还更加简洁。 const

vue.js是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计。（自底向上设计方法是根据系统功能要求，从具体的器件、逻辑部件或者相似系统开始，凭借设计者熟练的技巧和丰富的经验，通过对其进行相互连接、修改和扩大，构成所要求的系统。）Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。 什么是*.vue文件 首先，用 vue-cli 脚手架搭建的项目，已经遇到了很多，如 index.vue 或者 App.vue 这一的文件了。如果是初次接触 vue 开发的同学，可能之前没有见过这个东西。*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 <template>, <script> 和 <style>。这三个部分分别代表了 html,js,css。 其中 <template> 和 <style> 是支持用预编译语言来写的。比如，在项目中就用了 scss 预编译，因此，是这样写的： 工具/原料 JavaScript 方法/步骤 html 也有自己的预编译语言， vue 也是支持的，不过一般来说，前端人员还是比较中意 html 原生语言。 另外，在 App.vue 文件中

vue-router-基础 vue 路由的mode(模式)有几种， 分别是什么？在那些环境下运行？ 【 黄金 】 hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。 #/home history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】 /home abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。【 这个模式不常用 】 hash/history 常用于浏览器端，abstract用于服务端 路由的使用步骤 . 装 vue-router - yarn add vue-router 在src目录下创建一个router目录， 里面创建一个index.js文件 ， 这个目录就是router的模块 引入第三方的依赖包, 并注册路由 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use( VueRouter ) //使用vue-router这个第三方插件 注意： import这个关键字要放在整个文件的上层 创建了一个router对象实例，并且创建路由表 const routes = [ { path: '/home'

一、什么是MVVM？ MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和Model的对象（桥梁）。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 二、mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？ mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。 区别：vue数据驱动

从输入 URL 到页面加载完成，完整的链路 http层面优化 DNS 解析: DNS 实现域名到IP的映射。通过域名访问站点，每次请求都要做DNS解析。目前每次DNS解析，通常在200ms以下。一般采用DNS Prefetch 一种DNS 预解析技术，当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行DNS的解析，减少用户等待时间，提高用户体验。 <link rel="dns-prefetch" href="www.baidu.com" /> 只有部分浏览器支持 TCP 连接： 采用http2.0，可以复用tcp通道，采用二进制格式而非文本格式，使用报头压缩，HTTP/2降低了开销，支持cache push 浏览器并发 基于端口跟线程切换开销，浏览器不可能无限的并发请求。chrome的并发为6，超过限制数目的请求就会被阻塞； 对于某些静态资源，图片等等，我们可以对其URL分散处理 ，不同的资源域名(部署在cdn上)。 http请求次数 减少http的请求次数，将多个请求合并成同一个，减少http的开销 webpack 充分利用webpack提供给我们的能力，利用DllPlugin与commonPlugins等插件对我们代码进行 优化，文件的分割与合并，公共代码的提取，长缓存等策略，webpack是个很好的东西，值得大家仔细研究

以下排名不分先后： 1.Mint UI 概述：饿了么团队，基于Vue.js的移动端组件库。GitHub上目前提交是3年前. 官网： https://mint-ui.github.io/#!/zh-cn GitHub： https://github.com/ElemeFE/mint-ui/ 2.Element UI 概述：饿了么团队基于Vue2.0 PC端UI组件库。 官网： https://element.eleme.cn/#/zh-CN 来源： https://blog.csdn.net/qq_31708763/article/details/102757118

一、简介 Vue.js的定位是一个渐进式框架 前端三大mvvm框架之一，Vue上手比较快，只要你会HTML、css、js等一些基础就能轻松做开发。 vue官方文档 二、导入Vue.js库 <script src= "vue.js" ></script> 三、核心技术 1.cli方式写组件 组件的构成 template模板 script业务逻辑 style样式 组件的使用 1.创建组件.vue 2.导入并注册组件 3.使用组件 2.路由与视图 1）页面.vue 2）配置router.js path:"/cart" 路由对应的地址 name:"cart" 路由的名称 compon:Cart 路由地址对应的组件 3）路由指令 router-link 路由链接(切换) to="路由地址" 切换的地址 router-view 路由视图显示url对应的组件 4）路由的参数 1.router.js path:"/product/:id" 2.组件内部获取到参数 {{$route.params.id}} 5）路由编程跳转 router.js的配置 path:"product/:id" 组件内部获取到参数 {{$route.params.id}} 6）子路由 目标 article comment评论 detail参数 {path:"article", component:"Article",

###今日目标 1.初始化项目 2.基于Vue技术栈进行项目开发 3.使用Vue的第三方组件进行项目开发 4.理解前后端分离开发模式 ###1.电商业务概述 客户使用的业务服务：PC端，小程序，移动web，移动app 管理员使用的业务服务：PC后台管理端。 PC后台管理端的功能：管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计 电商后台管理系统采用前后端分离的开发模式 前端项目是基于Vue的SPA（单页应用程序）项目 前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts 后端技术栈：Node.js,Express,Jwt(模拟session),Mysql,Sequelize(操作数据库的框架) ###2.项目初始化 A.安装Vue脚手架 B.通过脚手架创建项目 C.配置路由 D.配置Element-UI:在插件中安装，搜索vue-cli-plugin-element E.配置Axios：在依赖中安装,搜索axios(运行依赖) F.初始化git仓库 G.将本地项目托管到github或者码云中 ###3.码云相关操作 A.注册登录码云账号 B.安装git 在Windows上使用Git，可以从Git官网直接下载安装程序进行安装。 测试命令：git --version C.点击网站右上角“登录”