1.Vue:现代前端三大框架之一(Vue/React/Angualr),基于HTML.CSS和JavaScript,2014年正式对外发布,目前已发展到3.X版本.值得说道的是,Vue的创始人作者是华裔尤雨溪,这可能也是Vue在中国特别受欢迎的原因之一. 2.Blazor:.NET技术体系的现代前端框架,基于HTML.CSS和C#,2019年正式发布了Blazor Server,2020年发布Blazor Webassembly,2022年还将发布Blazor Hybrid.Blazor的这三个

Blazor和Vue的组件事件,都使用事件订阅者模式.相对于上一章的组件属性,需要多绕一个弯,无论Blazor还是Vue,都是入门的第一个难点.要突破这个难点,一是要熟悉事件订阅模式<其实不难>:二是多练几次.熟悉套路.接下面,我们开始学习以下几个知识点 事件订阅模式 使用事件订阅模式实现子传父 子传父参数详解 事件定义的校验 Vue中使用模板,定义和触发事件的方法 Blazor中委托可以传递参数吗 一.事件订阅模式(简单的知道整个结构是怎样就可以了) 1.事件的两个主体:事件拥有者和事件订阅

Vue使用模板语法,Blazor使用祖传的Razor语法,从逻辑和方向上看,两者极为相似,比如: 都基于HTML 都通过声明式地将组件实例的状态(数据/方法)绑定到呈现的DOM上 都通过指令实现更加丰富的视图/HTML与逻辑/JS和C#的互动应用 底层机制都是通过虚拟DOM,实现差量更新 工程组建方式都基于组件树 都具有单文件组件特征 但在具体实现和语法上,两者有比较大的差异.给人的总体感觉就是,都很熟悉,但就是不太一样.以下仅对语法基础进行逐点比较,内容较多,目录如下: 标签内容绑定(单向)

1.7章<传递UI片断>,需要做几个案例,这部分暂停消化几天.我们先把基础部分相对简单的最后两章学习了. 计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应.两者的区别,在于响应方式的不同. 1.计算属性,如[const result = computed(()={return a + b})].知名见意,是一个计算表达式,表达式中使用到的响应式变量都是它监听的对象,只要其中有任何变量发生变化,结果都会重新计算.可以理解为EXCEL里的计算,比如某个单元格的公式为&q

这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm 一.表单输入绑定 表单输入主要涉及前面章节的双向绑定,但不需要我们自定义,直接使用就行.如果已经掌握了"1.6章节双向绑定",那这部分的知识点简直"洒洒水".Vue的v-model指令,为所有原生的HTML组件做了一些特殊处理,不仅支持双向绑定,也支持check或ra

注:本节涉及到前后端,这个系列的对比学习,还是专注在前端Vue和Blazor技术,所以就不撸码了,下面主要学习概念. 我们知道,Http是无状态协议,客户端请求服务端,认证一次后,如果再次请求,又要重新认证,因为对服务端来说,客户端的每次请求都是无差别的!另外,服务端的授权体系,一般使用基于RBAC角色权限模型.角色信息,我们可以在客户端每次请求都,都查询一次,但这样比较消耗资源.最好的方式,是客户端第一次请求时,就将角色传给客户端,之后客户端每次请求,直接携带角色信息.而这些问题,都需要使用C

难度:★ 简单说一说: 1.Vue和Blazor都遵循单文件结果,即HTML(视图模板).CSS(样式).JS/C#(代码逻辑)写在一个文件里,Vue的文件后缀为.vue,Blazor的文件后缀为.razor 2.三个部分的区别: 1)视图HTML部分,区别在于模板语法,主要是标签内容和标签属性的数据绑定.另外,Vue需要使用顶级标签<template>,Blazor不需要,上来就可以直接撸HTML. 2)样式CSS部分,基本一样,可能高级功能有一些差异,这部分目前关注的比较少,估计Vue会更

组件除了要解决视图层展示.视图层与逻辑层的数据绑定,还需要解决一个重大问题,就是在组件树中实现数据传递,包括了父到子.子到父.祖到孙,以及任意组织之间.而我们上一章讲到的实现双向绑定的两个指令,Vue的v-model,Blazor的@bind,可以认为是父到子和子到父,两个方向同时实现的语法糖,后面章节我们再来实现它. 我们先从最简单的父子传值开始学习.在Vue和Blazor中,都是通过属性来实现父子组件的数据传递.我们以往都是在html标签上设置属性,属性值可以是字面量,也可以绑定逻辑数据.比

这章我们来学习,现代前端框架中最精彩的一部分,双向绑定.除了掌握原生HTML标签的双向绑定使用,我们还要在一个自定义的组件上,手撸实现双向绑定.双向绑定,是前两章知识点的一个综合运用(父传子.子传父),但因为又多了一层抽象,有一点小难度,需要一点时间和练习来熟悉套路,但必须要越过去.此后,基础部分就是一马平川了.此章我们分为以下几个部分来一起学习: 补充:HTML标签和组件 HTML标签的双向绑定 自定义组件的双向绑定 再次认识指令属性/修饰符 一.补充:HTML标签和组件 在学习双向绑定前,我

前面章节,我们实现了父子组件之间的数据传递.大多数时候,我们以组件形式来构建页面的区块,会涉及到组件嵌套的问题,一层套一层.这种情况,很大概率需要将祖先的数据,传递给子孙后代去使用.我们当然可以使用父传子的方式,使用属性一级级往下传,但这样真得很麻烦.所以在Vue和Blazor都提供了祖孙传值的方案. 插个话题:有人会问,子传父是不是也可以一级级往上传?当然可以,但你绝不要这么去做.子传父就已经够绕了,不要为难自己.如果有这种需求,应该考虑数据状态从组件中剥离出来,我们将在进阶章节,一起学习"状

组件开发模式,带来了复用.灵活.性能等优势,但也增加了组件之间数据传递的繁杂.不像传统的页面开发模式,一个ViewModel搞定整个页面数据. 组件之间的数据传递,是学习组件开发,必须要攻克的难关.这个章节,我们将一起学习如何将UI片断传递给子组件.子组件的UI片断,由父组件来提供,子组件接收到后直接渲染,这种场景的使用范围还是比较多的.我们之前对自定义组件的操作,一直都是在标签属性的位置,从来没有在标签体内容的位置搞过[<Child>这个位置</Child>].这个位置,就是为传

一.基本理解 首次接触"生命周期"这个名词,是比较晦涩的,Vue中又有生命周期钩子,而Blazor则是虚方法重写,容易蒙.所以,我尝试从初学者的角度来阐述一下. 1.我们在基础部分已经知道,组件有两部分组成,一是逻辑层,有数据和方法(方法本质上也是数据):二是视图层,虽然有自定义组件,但拆到底,还是HTML原生标签. 2.组件的初次呈现,可以先简单的理解为两个过程,第一步,完成逻辑层的实例化,类似于一个类的实例化,为视图层准备数据:第二步,完成视图层DOM的渲染,会使用到逻辑层的数据.

Blazor没有提供状态共享的方案,虽然依赖注入可以实现一个全局对象,这个对象可以拥有状态.计算属性.方法等特征,但并不具备响应式.比如,组件A和组件B,都注入了这个全局对象,并引用了全局对象上的数据.我们通过组件A,修改全局对象的数据,全局对象上的数据更新,但引用了这个数据的组件B,并不会自动更新.如果要实现真正的状态共享,需要借助第三方库Fluxor. 一.通过依赖注入,实现全局状态 打开官方预制的Counter模板,无论是WASM模式,还是Server模式,组件切换/URL地址变更/页面刷

C#和JS互操作的基本语法是比较简单的,但小知识点特别多,同时,受应用加载顺序.组件生命周期以及参数类型的影响,会有比较多坑,需要耐心的学习.在C#中调用JS的场景会比较多,特别是在WASM模式下,由于WebAssembly的限制,很多时候,还是需要借助JS去控制DOM或BOM,比如WebStorage.WebGL.MediaCapture,还比如使用JS的图表库echart.js.反过来,在JS中调用C#的场景,就比较少见.所以,此章节关于"C#中调用JS" 的篇幅会多一些. 这个章

vue对比其他框架详细介绍 对比其他框架 — Vue.jshttps://cn.vuejs.org/v2/guide/comparison.html React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件. 将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库. 由于有着众多的相似处,我们会用更多的时间在这一块进行比较.这里我们不只保证技术内容的准确性,同时

php开发面试题---jquery和vue对比(整理) 一.总结 一句话总结: jquery的本质是更方便的选取和操作DOM对象,vue的本质是数据和页面分离 反思的回顾非常有用,因为决定了我的方向和技巧 以战养己,这是非常非常好的方式 1.MVVM框架是什么? Model-View-ViewModel:数据和视图分离框架 MVVM是Model-View-ViewModel的简写.它本质上就是MVC 的改进版.MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开

对比其他框架 React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式(Reactive)和组件化(Composable)的视图组件. 将注意力集中保持在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库. 性能简介 Vue 的性能是优于 React 的.如果你对此表示怀疑,请继续阅读.我们会解释为什么会这样(并且会提供一个与 React 团队共同约定的比较基准). 渲染性能 在渲染用户界面时,DOM 操作成本是最高的,不幸的是没有库可以让

1.jquery介绍:想必大家都用过jquery吧,这个曾经也是现在依然最流行的web前端js库,可是现在无论是国内还是国外他的使用率正在渐渐被其他的js库所代替,随着浏览器厂商对HTML5规范统一遵循以及ECMA6在浏览器端的实现,jquery的使用率将会越来越低 2.vue介绍:vue是一个兴起的前端js库,是一个精简的MVVM.从技术角度讲,Vue.js 专注于 MVVM 模型的 ViewModel 层.它通过双向数据绑定把 View 层和 Model 层连接了起来,通过对数据的操作就可以

Vue--​​两分钟概述 Vue 是一个JavaScript 框架. 在其最简单的模式中,您可以简单地将核心 Vue 脚本包含在您的应用程序中,然后开始构建您的组件. 除此之外,对于更复杂的应用程序,您可以使用 Vue 自己的 CLI 创建(并最终发布)一个 Vue 项目. 与大多数其他 JavaScript 框架一样,Vue 应用程序构建为一系列小组件,然后您可以将它们组合在一起以构建更大的功能(最终是整个应用程序). 您通常会使用 HTML.CSS 和 JavaScript(或 TypeSc

相同点 都支持服务器端渲染 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范 数据驱动视图 都有支持native的方案,React的React native,Vue的weex 不同点 React严格上只针对MVC的view层,Vue则是MVVM模式 virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要s