做网站 写文章怎样加视频,wordpress主题插件汉化,免费建站工具有哪些,wordpress 顶部 空白最近#xff0c;我的朋友因为不熟悉 Vue.js 而未能通过面试。
她平时工作中大部分时间都在使用React#xff0c;所以也懒得去了解其他前端框架。
世界上所有的前端框架我们都应该熟悉吗#xff1f;
不#xff0c;这是极其不合理的。
但为了生存#xff0c;朋友还是要学…最近我的朋友因为不熟悉 Vue.js 而未能通过面试。
她平时工作中大部分时间都在使用React所以也懒得去了解其他前端框架。
世界上所有的前端框架我们都应该熟悉吗
不这是极其不合理的。
但为了生存朋友还是要学习Vue的框架。
让我们看看如何使用 Vue 来实现 React 的一些功能。
1. v-if如何显示和隐藏元素
控制元素或组件的显示和隐藏是我们最常见的事情之一在React中我们经常这样编码。
JavaScript 中的三元表达式和“”也可以实现同样的目标。 React
import React, { useState } from reactexport default function Vif (){const [ isShow, setIsShow ] useState(true)const onToggleShow () {setIsShow(!isShow)}return (div classNamev-ifbutton onClick{ onToggleShow }Toggle/button{/* Of course you can also use ternary expressions */}{/* isShow ? divfatfish has shown/div : null */}{isShow divfatfish has shown/div}/div)
}
Vue
那么在Vue中如何实现同样的功能呢
是的我们可以使用 v-if 指令来控制元素的显示和隐藏这很简单不是吗
templatediv classv-ifbutton clickonToggleShowToggle/buttondiv v-ifisShowfatfish has shown/div/div
/template
script
export default {name: vif,data () {return {isShow: true}},methods: {onToggleShow () {this.isShow !this.isShow}}
}
/script
2. v-show如何显示和隐藏元素
v-if 导致元素或组件被重复删除和创建如果我们只想“显示”或“隐藏”它怎么办
也许我们可以借助 CSS 中的 display 属性来做到这一点。 React
import React, { useState } from reactexport default function VShow (){const [ isShow, setIsShow ] useState(true)const onToggleShow () {setIsShow(!isShow)}return (div classNamev-showbutton onClick{ onToggleShow }Toggle/button{div style{{ display: isShow ? : none }}fatfish has shown/div}/div)
}
Vue
你可能已经猜到了我们可以使用 v-show 来实现与它相同的功能。看起来 Vue 更简洁你不觉得吗
template
div classv-showbutton clickonToggleShowToggle/buttondiv v-showisShowfatfish has shown/div/div
/template
script
export default {name: vshow,data () {return {isShow: true}},methods: {onToggleShow () {this.isShow !this.isShow}}
}
/script
3. v-for渲染列表
在React中我们可以使用数组的map方法来创建列表这非常简单。
看一下这段代码它创建了三个不同职业的列表。 React
import React, { useState } from reactexport default function VFor (){const [ list, setList ] useState([{id: 1,name: Front end,},{id: 2,name: Android,},{id: 3,name: IOS,},])return (div classNamev-for{list.map((item) {return div key{ item.id } classNamev-for-item{ item.name }/div})}/div)
}
Vue
你喜欢 Vue 中的 v-for 指令吗
templatediv classv-fordiv classv-for-item v-foritem in list :keyitem.id{{ item.name }}/div/div
/template
script
export default {name: vfor,data() {return {list: [{id: 1,name: Front end,},{id: 3,name: Android,},{id: 4,name: IOS,},],};},
};
/script
4. 计算
如果我们想计算两个数的和有什么好的方法吗
我的意思是当 num1 和 num2 发生变化时它们的总和会自动变化我们不需要手动处理。 React
import React, { useMemo, useState } from reactexport default function Computed (){const [ num1, setNum1 ] useState(10)const [ num2, setNum2 ] useState(10)const num3 useMemo((a, b) {return num1 num2}, [ num1, num2 ])const onAdd () {setNum1(num1 10)}return (div classNamecomputedbutton onClick{ onAdd }10/buttondivresult{ num3 }/div/div)
}
哇太棒了useMemo 帮我们解决了一个问题。
Vue
那么Vue中有没有更好的实现呢它实际上提供了一种称为“计算”的机制该机制更智能且更易于使用。
templatediv classcomputedbutton clickonAdd10/buttondivresult{{ num3 }}/div/div
/template
script
export default {name: computed,data () {return {num1: 10,num2: 10,}},computed: {num3 () {return this.num1 this.num2}},methods: {onAdd () {this.num1 10}}
}
/script
5.watch
当我们需要监听数据变化然后执行回调函数时可以在React中使用useEffect来完成。
让我们尝试模拟一个场景
我们点击男孩或女孩按钮选中时发送请求最后显示请求结果我们通过setTimeout模拟异步请求过程。 React
export default function Watch() {const [fetching, setFetching] useState(false)const [selects, setSelects] useState([boy,girl])const [selectValue, setSelectValue] useState()const result useMemo(() {return fetching ? requesting... : the result of the request: ${selectValue || ~}}, [ fetching ])const onSelect (value) {setSelectValue(value)}const fetch () {if (!fetching) {setFetching(true)setTimeout(() {setFetching(false)}, 1000)}}// Pay attention hereuseEffect(() {fetch()}, [ selectValue ])return (div classNamewatchdiv classNameselects{selects.map((item, i) {return button key{ i } onClick{ () onSelect(item) }{ item }/button})}/divdiv classNameresult{ result }/div/div)
}
Vue
别担心我们可以在 Vue 中做同样的事情你知道它的秘密是什么吗
是的答案是watch。
templatediv classwatchdiv classselectsbutton v-for(item, i) in selects:keyiclickonSelect(item){{ item }}/button/divdiv classresult{{ result }}/div/div
/template
script
export default {name: watch,data () {return {fetching: false,selects: [boy,girl],selectValue: }},computed: {result () {return this.fetching ? requesting... : the result of the request: ${this.selectValue || ~}}},// Pay attention herewatch: {selectValue () {this.fetch()}},methods: {onSelect (value) {this.selectValue value },fetch () {if (!this.fetching) {this.fetching truesetTimeout(() {this.fetching false}, 1000)}}}
}
/script
style
button{margin: 10px;padding: 10px;
}
/style
6. style
有时我们需要动态地向元素添加样式Vue 和 React 都为我们提供了一种便捷的使用方式。
从用途上来说它们基本上是相似的。
相同点
CSS 属性名称可以是驼峰命名法或短横线命名法记住将它们用引号引起来
差异
在Vue中我们可以通过数组语法绑定多个样式对象React主要是单个对象的形式这一点Vue也可以在React中对于属性的数量它会自动给内联样式添加“px”这一点Vue不会自动处理后缀其他单位需要手动指定在 React 中样式不会自动添加前缀。当 v-bind:style 使用需要浏览器引擎前缀的 CSS 属性时例如 TransformVue.js 会自动检测并添加相应的前缀。 React
import React from reactexport default function Style (){const style {width: 100%,height: 500px,}const style2 {backgroundImage: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%),borderRadius: 10px,}return (div classNamestyle style{ { ...style, ...style2 } } /div)
}
Vue
templatediv classstyle :style[ style, style2 ]/div
/template
script
export default {name: style,data () {return {style: {width: 100%,height: 500px,},style2: {backgroundImage: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%),borderRadius: 10px,}}}
}
/script
7.class
我们应该如何动态地为元素添加类
在Vue中我更喜欢使用数组语法当然也有对象方式在React中也可以使用一些第三方包比如classnames来起到更方便的方式来添加类的效果。
React
import React, { useMemo, useState } from reactimport ./class.css
export default function Class (){const [ isActive, setIsActive ] useState(false)const buttonText useMemo(() {return isActive ? Selected : UnSelected}, [ isActive ])const buttonClass useMemo(() {return [ button, isActive ? active : ].join( )}, [ isActive ])const onClickActive () {setIsActive(!isActive)}return (div className{ buttonClass } onClick{onClickActive}{ buttonText }/div)
}
Vue
templatebutton :classbuttonClasses clickonClickActive{{ buttonText }}/button
/template
script
export default {name: class,data () {return {isActive: false,}},computed: {buttonText () {return this.isActive ? Selected : UnSelected},buttonClasses () {return [ button, this.isActive ? active : ]}},methods: {onClickActive () {this.isActive !this.isActive}}
}
/script
style scoped
.button{display: block;width: 100px;height: 30px;line-height: 30px;border-radius: 6px;margin: 0 auto;padding: 0;border: none;text-align: center;background-color: #efefef;
}
.active{background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);color: #fff
}
/style
8. provide/inject
Vue 和 React 对于全局状态的管理都有自己很好的解决方案比如 Vue 中的 Vuex、Redux 中的 React 和 Mobx但是当然这些小项目的引入对于小用途来说有点太大了就没有其他解决方案
provide/inject可以在Vue中使用
React 可以使用 Context
假设我们有一个用于用户信息的全局变量“userInfo”需要在每个组件中轻松访问它如何在Vue和React中实现它 React
为了在 React 中实现这一点您可以借助 Context 将全局状态共享给任何子节点。
上下文/index.js
import { createContext } from react;
export const UserInfoContext createContext({userInfo: {name: }
})
App.js
import { UserInfoContext } from ./context/indexfunction App() {return (BrowserRouter// Pay attention hereUserInfoContext.Providervalue{{ userInfo: { name: fatfish } }}div classNametitleI am React App/divRoutesRoute path/v-if element{Vif /} /Route path/v-show element{VShow /} /Route path/v-for element{VFor /} /Route path/computed element{Computed /} /Route path/watch element{Watch /} /Route path/style element{Style /} /Route path/class element{Class /} /Route path/slot element{Slot /} /Route path/nameSlot element{NameSlot /} /Route path/scopeSlot element{ScopeSlot /} /Route path/provide element{Provide /} //Routes/UserInfoContext.Provider/BrowserRouter);
}
provide.js
import React, { useContext } from react
import { UserInfoContext } from ../context/indexexport default function Provide() {// We can use the defined UserInfoContext through the userContextconst { userInfo } useContext(UserInfoContext)return (div classprovide-inject{ userInfo.name }/div)
}
Vue
在Vue中我们可以使用“provide/inject”将顶级状态传递给任何子节点假设我们在app.vue中声明一个“userInfo”数据。
App.vue
templatediv idappdiv classtitleI am Vue App/divrouter-view//div
/template
script
export default {name: app,// Pay attention hereprovide () {return {userInfo: {name: fatfish}}}
}
/script
provide.vue
templatediv classprovide-inject{{ userInfo.name }}/div
/template
script
export default {name: provideInject,// Use datainject: [ userInfo ]
}
/script
9. Slots
假设我们要实现一个简单的对话组件基本功能是标题可以作为字符串传递内容部分可以完全自定义我们应该如何实现呢
React
虽然React中没有槽的概念但是可以通过props.children获取组件内部的子元素通过这个可以实现默认的槽。
Dialog.js
import React, { useState, useEffect } from react
import ./dialog.cssexport default function Dialog(props) {// Forgive me for implementing this in a silly way like visible -1 first, but thats not the pointconst { children, title , visible -1 } propsconst [visibleInner, setVisibleInner] useState(false)const onHide () {setVisibleInner(false)}useEffect(() {setVisibleInner(visible 0)}, [ visible ])return (div classNamedialog style{ { display: visibleInner ? block : none }}div classNamedialog-mask notallow{ onHide }/divdiv classNamedialog-body{ title ? div classNamedialog-title{ title }/div : null }div classNamedialog-main{/* Note here that the default slot function is implemented via children */}{children}/divdiv classNamedialog-footerdiv classNamebutton-cancel notallow{ onHide }Cancel/divdiv classNamebutton-confirm notallow{ onHide }Confirm/div/div /div /div )
}
slot.js
import React, { useState, useEffect } from react
import Dialog from ./components/dialogexport default function Slot() {const [visible, setVisible] useState(-1)const onToggleVisible () {setVisible(Math.random())}return (div classNameslotbutton onClick{ onToggleVisible }Toggle/buttonDialogvisible{visible}titledefault slot{/* Note that here, it will be read and replaced by the children of the Dialog component */}div classNameslot-bodyfatfish/div/Dialog/div)
}
Vue
同样的功能在Vue中应该如何实现呢
dialog.vue
templatediv classdialog v-showvisiblediv classdialog-mask clickonHide/divdiv classdialog-bodydiv classdialog-title v-iftitle{{ title }}/divdiv classdialog-main!-- Note: A default slot has been placed here --slot/slot/divdiv classdialog-footerdiv classbutton-cancel clickonHideCancel/divdiv classbutton-confirm clickonHideConfirm/div/div/div/div
/template
script
export default {name: dialog,props: {title: {type: String,default: ,},visible: {type: Boolean,default: false,},},methods: {onHide () {this.$emit(update:visible, false)}}
};
/script
slot.vue
templatediv classslotbutton clickonToggleVisible切换dialog/buttonDialog:visible.syncvisibletitledefault slot!-- The slot/slot will be replaced here --div classslot-bodyfatfish/div/Dialog/div
/template
script
import Dialog from ./components/dialog.vue
export default {name: slot,components: {Dialog,},data () {return {visible: false}},methods: {onToggleVisible () {this.visible !this.visible}}
}
写在最后
不管是开发语言还是开发框架都是我们实现创造产品的工具最终我们能够实现什么样的效果做出什么样的产品都是依赖实现它的人。
作为技术人多学技术没有错但是不能为了学习技术而学习技术我们学习技术的目的是要解决一些问题这个是我对学习技术的一些感悟。
当然也希望我今天分享的内容对你有用。
最后基于Vue3.0的优秀低代码项目 JNPF开发平台。近年在市场表现和产品竞争力方面表现较为突出采用的是最新主流前后分离框架SpringBootMybatis-plusAnt-DesignVue3。代码生成器依赖性低灵活的扩展能力可灵活实现二次开发。 以JNPF为代表的企业级低代码平台为了支撑更高技术要求的应用开发从数据库建模、Web API构建到页面设计与传统软件开发几乎没有差异只是通过低代码可视化模式减少了构建“增删改查”功能的重复劳动还没有了解过低代码的伙伴可以尝试了解一下。 应用https://www.jnpfsoft.com/?csdn 有了它开发人员在开发过程中就可以轻松上手充分利用传统开发模式下积累的经验。所以低代码平台对于程序员来说有着很大帮助。
