05 2022 档案
摘要:现代前端框架的核心,是数据驱动,绝大多数时候,我们不需要直接去操作DOM,而是通过改变数据,由框架自动完成DOM的渲染。但框架还是给我们留了后门,使我们可以拿到组件的引用。Vue使用ref属性,Blazor则使用@ref指令。 1、我们先看一个Vue的简单例子,使用很简单: //父组件 <templ
阅读全文
摘要:一、基本理解:首次接触“生命周期”这个名词,是比较晦涩的,Vue中有生命周期钩子,而Blazor则是虚方法重写,容易蒙。所以,我尝试从初学者的角度来阐述一下。 我们在基础部分已经知道,组件有两部分组成,一是逻辑层,有数据和方法(方法本质上也是数据);二是视图层,虽然有自定义组件,但拆到底,还是HTM
阅读全文
摘要:基础部分完结撒花!!! 1、通过对比学习,Vue和Blazor的相似性很大,或者说现代前端框架的底层逻辑都基本一致(DOM差量更新、响应式、组件化等),实现上有各自的想法,但很多也都是相互借鉴融合。 2、虽然实际开发中,我们都是直接上各种功能丰富的组件库,大多数时候,我们都不需要去关心组件的内部实现
阅读全文
摘要:这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding。我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm 一、表单输入绑定 表单输入主要涉及前面章节的双向绑定,但不需要我们自定义,直接使用就行。如果已经掌
阅读全文
摘要:Vue和Blazor的组件都有key属性,两者的作用和原理基本一致,语法上有一点点差异,如下所示 //Vue中使用key //key在ul上绑定,使用v-bind指令(简写为冒号) <ul v-for=”people in peoples” :key=”people.id”> <li>{{peopl
阅读全文
摘要:组件开发模式,带来了复用、灵活、性能等优势,但也增加了组件之间数据传递的繁杂。不像传统的页面开发模式,一个ViewModel搞定整个页面数据。 组件之间的数据传递,是学习组件开发,必须要攻克的难关。这个章节,我们将一起学习如何将UI片断传递给子组件。子组件的UI片断,由父组件来提供,子组件接收到后直
阅读全文
摘要:1、Vue的动态组件为component,有一个is属性,通过控制is属性来完成组件的动态切换。组件切换时,被切走的组件被销毁,状态无法保存。可以结合KeepAlive,实现状态的保存。 <template> <button @click="()=>isTab1 = !isTab1">切换组件</b
阅读全文
摘要:1.7章《传递UI片断》,需要做几个案例,这部分暂停消化几天。我们先把基础部分相对简单的最后两章学习了。 计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应。两者的区别,在于响应方式的不同。 1、计算属性,如【const result = computed(()={retu
阅读全文
摘要:Blazor和Vue,都可以渲染包含原生HTML标签的变量,但因为安全原因,均不推荐这么做 1、Vue中使用v-html指令: <template> <span v-html="htmlString"></span></template> <script setup>import {ref} fro
阅读全文
摘要:前面章节,我们实现了父子组件之间的数据传递。大多数时候,我们以组件形式来构建页面的区块,会涉及到组件嵌套的问题。这种情况,很大概率需要将祖先的数据,传递给后代组件去使用。我们当然可以使用父传子的方式,使用属性一级级往下传,但这样真得很麻烦。所以在Vue和Blazor都提供了祖孙传值的方案。有人会问,
阅读全文
摘要:这章我们来学习,现代前端框架中最精彩的一部分,双向绑定。除了掌握原生HTML标签的双向绑定使用,我们还要在一个自定义的组件上,手撸实现双向绑定。双向绑定,是前两章知识点的一个综合运用(父传子、子传父),但因为又多了一层抽象,有一点小难度,需要多次练习,才能熟悉套路。此后,基础部分就是一马平川了。此章
阅读全文
摘要:Blazor和Vue的组件事件,都使用事件订阅者模式。相对于上一章的组件属性,需要多绕一个弯,无论Blazor还是Vue,都是入门的第一个难点。要突破这个难点,一是要熟悉事件订阅模式;二是多练几次、熟悉套路。接下面,我们开始学习以下几个知识点 事件订阅模式 使用事件订阅模式实现子传父 子传父参数详解
阅读全文
摘要:组件除了要解决视图层展示、视图层与逻辑层的数据绑定,还需要解决一个重大问题,就是在组件树中实现数据传递,包括了父传子、子传父、祖传孙,以及任意组件之间传值。我们上一章讲到的实现双向绑定的两个指令,Vue的v-model,Blazor的@bind,可以认为是父子组件双向传值的语法糖,后面章节我们再来实
阅读全文
摘要:#一、先复习一下上个章节学习的组件本质 ###1、Vue的组件本质是一个对象(通过选项式API来看Vue组件本质): 视图层是属性template的值。在视图层中,使用模板语法,使视图层和逻辑层建立关联。 date()方法返回响应式数据。 methods属性中,定义方法。 computed属性中,定
阅读全文